style(editor): new default icons

Novout · Dec 3, 2021 · aaf0408 · aaf0408
1 parent 2b85467
commit aaf0408
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 134 deletions.
diff --git a/package.json b/package.json
@@ -12,8 +12,9 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "rimraf ./dist && yarn build && vite preview",
-    "format": "prettier desktop/**/*.ts test/**/*.ts src/**/*.{vue,css,ts} --write",
+    "format": "prettier test/**/*.ts src/**/*.{vue,css,ts} --write",
     "test": "jest",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src && yarn format",
     "extract": "vue-i18n-extract report --vueFiles './src/**/*.?(js|vue)' --languageFiles './src/lang/*.?(json|yml|yaml|js)'",
     "release:initial": "standard-version --first-release",
     "release:minor": "standard-version --release-as minor",
@@ -103,7 +104,6 @@
         "docx",
         "dropbox",
         "file-saver",
-        "is-electron",
         "keyboardjs",
         "mitt",
         "node-fetch",

diff --git a/src/components/editor/entity/default/EditorEntityDefaultInputPopover.vue b/src/components/editor/entity/default/EditorEntityDefaultInputPopover.vue
@@ -132,11 +132,13 @@
         </svg>
       </EditorEntityDefaultInputSelect>
     </section>
-    <HeroIcon @mouseenter.prevent.stop="onNewEntityWrapper">
+    <HeroIcon
+      class="h-6 w-6 wb-icon"
+      @mouseenter.prevent.stop="onNewEntityWrapper"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 wb-icon"
-        viewBox="0 0 20 20"
+        viewBox="0 0 18 18"
         fill="currentColor"
       >
         <path
@@ -266,18 +268,25 @@
       </EditorEntityDefaultInputSelect>
     </section>
     <HeroIcon
-      class="wb-icon"
+      class="wb-icon h-6 w-6"
       @mouseenter.prevent.stop="onSwitcherEntityWrapper"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5"
-        viewBox="0 0 20 20"
-        fill="currentColor"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 17 16"
       >
-        <path
-          d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
-        />
+        <g fill="currentColor" fill-rule="evenodd">
+          <path
+            d="M16.796 8.908L15.234 7.21a.553.553 0 0 0-.776 0l-1.564 1.698a.543.543 0 0 0 0 .772h1.294a5.345 5.345 0 0 1-3.789 3.79a5.378 5.378 0 0 1-5.767-2.119l-1.091.751a6.709 6.709 0 0 0 7.196 2.643A6.665 6.665 0 0 0 15.55 9.68h1.245a.544.544 0 0 0 .001-.772z"
+          ></path>
+          <path
+            d="M5.475 8.021a.543.543 0 0 0 0-.772H4.018a5.339 5.339 0 0 1 3.771-3.738a5.373 5.373 0 0 1 5.766 2.121l1.092-.752a6.712 6.712 0 0 0-7.199-2.645a6.67 6.67 0 0 0-4.8 5.014H1.196a.543.543 0 0 0 0 .772l1.638 1.637a.553.553 0 0 0 .776 0l1.865-1.637z"
+          ></path>
+        </g>
       </svg>
     </HeroIcon>
     <section
@@ -289,7 +298,7 @@
           <HeroIcon>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
+              class="h-6 w-6"
               viewBox="0 0 20 20"
               fill="currentColor"
             >
@@ -348,12 +357,11 @@
         props.entity.type === 'line-break' ||
         props.entity.type === 'image'
       "
-      class="wb-icon"
+      class="wb-icon h-6 w-6"
       @mouseenter.prevent.stop="onAdjustEntityWrapper"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5"
         viewBox="0 0 20 20"
         fill="currentColor"
       >
@@ -394,12 +402,11 @@
     </section>
     <HeroIcon
       v-if="props.entity.type === 'image'"
-      class="wb-icon ml-1"
+      class="wb-icon h-6 w-6"
       @mouseenter.prevent.stop="onImageEntityWrapper"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5"
         viewBox="0 0 20 20"
         fill="currentColor"
       >
@@ -416,7 +423,7 @@
           props.entity.external?.comment?.raw === '' ||
           !props.entity.external?.comment?.raw
         "
-        class="wb-icon ml-0.5"
+        class="wb-icon ml-0.5 mt-0.5 h-6 w-6"
         @mouseenter.prevent.stop="onCommentEntityWrapper"
         @click.prevent.stop="onClickComment"
       >
@@ -425,9 +432,8 @@
           xmlns:xlink="http://www.w3.org/1999/xlink"
           aria-hidden="true"
           role="img"
-          class="h-5 w-5"
           preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 24 24"
+          viewBox="0 0 27 27"
         >
           <path
             d="M12 23a1 1 0 0 1-1-1v-3H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4.1l-3.7 3.71c-.2.18-.44.29-.7.29H12m1-6v3.08L16.08 17H21V7H7v10h6M3 15H1V3a2 2 0 0 1 2-2h16v2H3v12m6-6h10v2H9V9m0 4h8v2H9v-2z"
@@ -437,7 +443,7 @@
       </HeroIcon>
       <HeroIcon
         v-else
-        class="wb-icon ml-0.5"
+        class="wb-icon ml-0.5 h-6 w-6"
         @mouseenter.prevent.stop="onCommentEntityWrapper"
         @click.prevent.stop="onClickComment"
       >
@@ -446,7 +452,6 @@
           xmlns:xlink="http://www.w3.org/1999/xlink"
           aria-hidden="true"
           role="img"
-          class="h-5 w-5"
           preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 24 24"
         >

diff --git a/src/components/editor/header/items/EditorBaseHeaderAddons.vue b/src/components/editor/header/items/EditorBaseHeaderAddons.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- DROPBOX -->
+  <EditorHeaderButton>
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        width="29"
+        height="29"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12.6 2.86c2.67 1.24 5.4 2.53 8.06 3.77c.15.07.34.12.34.32s-.19.24-.34.31C18 8.5 15.3 9.77 12.62 11a1.3 1.3 0 0 1-1.24 0C8.69 9.76 6 8.5 3.32 7.25C3.18 7.19 3 7.14 3 6.94c0-.18.18-.23.31-.29C6 5.39 8.74 4.1 11.44 2.85c.29-.13.86-.12 1.16.01M12 21.15c-.2 0-.34-.08-.62-.18c-2.69-1.24-5.38-2.5-8.05-3.75c-.14-.07-.33-.11-.33-.32c0-.2.19-.24.34-.31c.44-.21.89-.42 1.33-.63c.45-.2.89-.2 1.33.01c1.79.83 3.57 1.66 5.35 2.49c.44.21.88.2 1.32 0c1.78-.84 3.56-1.67 5.33-2.5c.44-.2.87-.21 1.29-.01c.48.21.95.44 1.42.66c.07.03.14.07.2.12c.13.1.13.27 0 .35c-.08.06-.17.11-.26.15c-2.65 1.27-5.32 2.49-7.99 3.72c-.2.1-.47.2-.66.2m0-4.98c-.1 0-.45-.1-.64-.17c-2.68-1.26-5.36-2.5-8.02-3.76c-.14-.06-.34-.11-.34-.31c0-.21.2-.25.35-.32c.45-.22.9-.43 1.35-.64c.43-.19.86-.19 1.3.03c1.78.82 3.58 1.66 5.38 2.5c.41.19.83.19 1.25 0c1.8-.85 3.6-1.69 5.41-2.53c.41-.19.83-.19 1.25 0c.47.22.95.44 1.42.66c.06.03.13.06.19.11c.14.11.14.26-.01.38c-.05.04-.12.07-.18.1c-2.71 1.28-5.4 2.53-8.1 3.78c-.19.09-.53.17-.61.17z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.dropbox.connect')"
+        shortcut=""
+        @action="dropbox.connect"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M7.06 1L0 5.61l4.882 3.908L12 5.123L7.06 1zM0 13.428l7.06 4.61L12 13.914L4.882 9.52L0 13.43zm12 .486l4.94 4.124l7.06-4.61l-4.882-3.91L12 13.914zM24 5.61L16.94 1L12 5.124l7.118 4.395L24 5.609zM12.014 14.8L7.06 18.913l-2.12-1.385v1.552l7.074 4.243l7.075-4.243v-1.552l-2.12 1.385l-4.955-4.112z"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+      <EditorHeaderItem
+        v-if="AUTH.dropbox.accessToken"
+        :text="t('editor.bar.dropbox.load')"
+        shortcut=""
+        @action="dropbox.load"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M7.06 1L0 5.61l4.882 3.908L12 5.123L7.06 1zM0 13.428l7.06 4.61L12 13.914L4.882 9.52L0 13.43zm12 .486l4.94 4.124l7.06-4.61l-4.882-3.91L12 13.914zM24 5.61L16.94 1L12 5.124l7.118 4.395L24 5.609zM12.014 14.8L7.06 18.913l-2.12-1.385v1.552l7.074 4.243l7.075-4.243v-1.552l-2.12 1.385l-4.955-4.112z"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+      <EditorHeaderItem
+        v-if="AUTH.dropbox.accessToken"
+        :text="t('editor.bar.dropbox.save')"
+        shortcut=""
+        @action="dropbox.save"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            width="24"
+            height="24"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M7.06 1L0 5.61l4.882 3.908L12 5.123L7.06 1zM0 13.428l7.06 4.61L12 13.914L4.882 9.52L0 13.43zm12 .486l4.94 4.124l7.06-4.61l-4.882-3.91L12 13.914zM24 5.61L16.94 1L12 5.124l7.118 4.395L24 5.609zM12.014 14.8L7.06 18.913l-2.12-1.385v1.552l7.074 4.243l7.075-4.243v-1.552l-2.12 1.385l-4.955-4.112z"
+            ></path>
+          </svg>
+        </template>
+      </EditorHeaderItem>
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { useDropbox } from '@/use/storage/dropbox'
+  import { useAuthStore } from '@/store/auth'
+
+  const AUTH = useAuthStore()
+
+  const dropbox = useDropbox()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderConfigurations.vue b/src/components/editor/header/items/EditorBaseHeaderConfigurations.vue
diff --git a/src/components/editor/header/items/EditorBaseHeaderDropbox.vue b/src/components/editor/header/items/EditorBaseHeaderDropbox.vue
diff --git a/src/components/editor/header/items/EditorBaseHeaderProject.vue b/src/components/editor/header/items/EditorBaseHeaderProject.vue
@@ -38,6 +38,13 @@
         @action="local.onSaveProject"
       />
       <EditorHeaderItemDiv />
+      <EditorHeaderItem
+        v-if="PROJECT.name !== env.projectEmpty()"
+        :text="t('editor.bar.project.preferences')"
+        shortcut=""
+        @action="ABSOLUTE.project.preferences = true"
+      />
+      <EditorHeaderItemDiv />
       <EditorHeaderItem
         :text="t('editor.bar.project.import')"
         @action="project.onImportProject"

diff --git a/src/components/editor/main/EditorBaseHeader.vue b/src/components/editor/main/EditorBaseHeader.vue
@@ -26,10 +26,9 @@
     </div>
 
     <div class="flex flex-row items-center">
-      <EditorBaseHeaderConfigurations />
       <EditorBaseHeaderProject />
       <EditorBaseHeaderCreate />
-      <EditorBaseHeaderDropbox />
+      <EditorBaseHeaderAddons />
       <EditorBaseHeaderChapters />
       <EditorBaseHeaderExternals />
     </div>

diff --git a/src/plugin/theme/external.ts b/src/plugin/theme/external.ts
@@ -52,7 +52,6 @@ export const setContentTheme = (theme: string) => {
   const favicon = useFavicon()
   const utils = useUtils()
 
-
   // custom favicon
   switch (theme) {
     case 'betterwrite-light':

diff --git a/src/router.ts b/src/router.ts
@@ -1,7 +1,4 @@
-import {
-  createRouter,
-  createWebHistory,
-} from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import { defineAsyncComponent } from 'vue'
 import Loading from '@/pages/generics/GenericsLoading.vue'