feat: add tooltips (#159)

Author: antonreshetov

package.json

@@ -43,6 +43,7 @@
     "axios": "^0.26.1",
     "date-fns": "^2.28.0",
     "electron-store": "^8.0.1",
+    "floating-vue": "^2.0.0-beta.17",
     "fs-extra": "^10.0.1",
     "highlight.js": "^11.5.1",
     "html2canvas": "^1.4.1",

pnpm-lock.yaml

@@ -50,5 +50,7 @@
   "darkMode": "Dark Mode",
   "background": "Background",
   "restartApp": "Restart massCode",
-  "updateAvailable": "Update Available"
+  "updateAvailable": "Update Available",
+  "hide": "Hide",
+  "show": "Show"
 }

src/main/services/i18n/locales/en/common.json

@@ -63,5 +63,6 @@
     "format": "Format",
     "previewMarkdown": "Preview Markdown",
     "previewCode": "Preview Code",
+    "previewScreenshot": "Preview Screenshot"
   }
 }

src/main/services/i18n/locales/en/menu.json

@@ -49,5 +49,7 @@
   "darkMode": "Темный режим",
   "background": "Фон",
   "restartApp": "Перезагрузить massCode",
-  "updateAvailable": "Доступно обновление"
+  "updateAvailable": "Доступно обновление",
+  "hide": "Hide",
+  "show": "Show"
 }

src/main/services/i18n/locales/ru/common.json

@@ -62,6 +62,7 @@
     "copy": "Скопировать сниппет в буфер",
     "format": "Форматировать",
     "previewMarkdown": "Просмотр Markdown",
-    "previewCode": "Просмотр результата HTML/CSS"
+    "previewCode": "Просмотр результата HTML/CSS",
+    "previewScreenshot": "Просмотр скриншота"
   }
 }

src/main/services/i18n/locales/ru/menu.json

@@ -64,11 +64,25 @@
 
 .toast-container {
   .toast {
-    
     width: 400px;
     &-text {
       display: flex;
       align-items: center;
     }
   }
-}
+}
+
+.v-popper {
+  &--theme-tooltip {
+    .v-popper {
+      &__inner {
+        font-size: 12px;
+        padding: 4px 8px !important;
+        border-radius: 3px !important;
+      }
+      &__arrow-container {
+        display: none;
+      }
+    }
+  }
+}

src/renderer/assets/scss/vendor.scss

@@ -43,7 +43,7 @@
       type="folders"
     >
       <template #action>
-        <AppActionButton>
+        <AppActionButton v-tooltip="i18n.t('newFolder')">
           <UniconsPlus @click="onAddNewFolder" />
         </AppActionButton>
       </template>

src/renderer/components/sidebar/TheSidebar.vue

@@ -12,23 +12,48 @@
       <div class="action">
         <AppActionButton
           v-if="snippetStore.currentLanguage === 'markdown'"
+          v-tooltip="
+            !snippetStore.isMarkdownPreview
+              ? i18n.t('menu:editor.previewMarkdown')
+              : i18n.t('hide') + ' ' + i18n.t('menu:editor.previewMarkdown')
+          "
           @click="onClickMarkdownPreview"
         >
           <UniconsEye v-if="!snippetStore.isMarkdownPreview" />
           <UniconsEyeSlash v-else />
         </AppActionButton>
-        <AppActionButton @click="onClickScreenshotPreview">
+        <AppActionButton
+          v-tooltip="
+            !snippetStore.isScreenshotPreview
+              ? i18n.t('menu:editor.previewScreenshot')
+              : i18n.t('hide') + ' ' + i18n.t('menu:editor.previewScreenshot')
+          "
+          @click="onClickScreenshotPreview"
+        >
           <UniconsCamera v-if="!snippetStore.isScreenshotPreview" />
           <UniconsCameraSlash v-else />
         </AppActionButton>
-        <AppActionButton @click="onCodePreview">
+        <AppActionButton
+          v-tooltip="
+            !snippetStore.isCodePreview
+              ? i18n.t('menu:editor.previewCode')
+              : i18n.t('hide') + ' ' + i18n.t('menu:editor.previewCode')
+          "
+          @click="onCodePreview"
+        >
           <SvgArrowSlash v-if="snippetStore.isCodePreview" />
           <UniconsArrow v-else />
         </AppActionButton>
-        <AppActionButton @click="onAddDescription">
+        <AppActionButton
+          v-tooltip="i18n.t('addDescription')"
+          @click="onAddDescription"
+        >
           <UniconsText />
         </AppActionButton>
-        <AppActionButton @click="onAddNewFragment">
+        <AppActionButton
+          v-tooltip="i18n.t('newFragment')"
+          @click="onAddNewFragment"
+        >
           <UniconsPlus />
         </AppActionButton>
       </div>

src/renderer/components/snippets/SnippetHeader.vue

@@ -8,6 +8,7 @@
     >
     <AppActionButton
       v-if="!query"
+      v-tooltip="i18n.t('newSnippet')"
       class="item"
       @click="onAddNewSnippet"
     >