chore(editor): header ux

Novout · Mar 12, 2022 · 78452ea · 78452ea
1 parent dd4baae
commit 78452ea
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 66 deletions.
diff --git a/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderExternals.vue b/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderExternals.vue
@@ -8,19 +8,15 @@
         aria-hidden="true"
         role="img"
         preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 512 512"
+        viewBox="0 0 24 24"
       >
         <path
           fill="currentColor"
-          d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36l-67.88-11.31l-11.31-67.88l74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16c-47.38-11.74-99.55.91-136.58 37.93c-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5c24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22c37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"
+          d="m13.78 15.3l6 6l2.11-2.16l-6-6l-2.11 2.16m3.72-5.2c-.39 0-.81-.05-1.14-.19L4.97 21.25l-2.11-2.11l7.41-7.4L8.5 9.96l-.72.7l-1.45-1.41v2.86l-.7.7l-3.52-3.56l.7-.7h2.81l-1.4-1.41l3.56-3.56a2.976 2.976 0 0 1 4.22 0L9.89 5.74l1.41 1.4l-.71.71l1.79 1.78l1.82-1.88c-.14-.33-.2-.75-.2-1.12a3.49 3.49 0 0 1 3.5-3.52c.59 0 1.11.14 1.58.42L16.41 6.2l1.5 1.5l2.67-2.67c.28.47.42.97.42 1.6c0 1.92-1.55 3.47-3.5 3.47Z"
         ></path>
       </svg>
     </template>
     <template #bar>
-      <EditorHeaderItem
-        :text="t('editor.bar.assistants.actions')"
-        @action="ABSOLUTE.logger = true"
-      />
       <EditorHeaderItem
         :text="t('editor.bar.assistants.finder')"
         @action="ABSOLUTE.shortcuts.finder = true"

diff --git a/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderFullscreen.vue b/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderFullscreen.vue
@@ -0,0 +1,35 @@
+<template>
+  <EditorHeaderButton v-if="PROJECT.name !== env.projectEmpty()">
+    <template #icon>
+      <div
+        v-if="PROJECT.name !== env.projectEmpty()"
+        @click.prevent.stop="editor.fullScreen"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+          />
+        </svg>
+      </div>
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useEditor } from '@/use/editor'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+
+  const PROJECT = useProjectStore()
+
+  const editor = useEditor()
+  const env = useEnv()
+</script>
diff --git a/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderLogin.vue b/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderLogin.vue
@@ -2,7 +2,7 @@
   <div>
     <button
       v-if="!AUTH.account.user"
-      class="flex px-3 py-1 font-poppins mr-2 bg-black-opacity border-theme-border-1 wb-text rounded-full cursor-pointer"
+      class="flex font-poppins mr-2 bg-black-opacity border-theme-border-1 wb-text rounded-full cursor-pointer"
       @click.prevent.stop="onOpen"
     >
       <svg
@@ -77,32 +77,13 @@
           {{ AUTH.account.user.email }}
         </p>
       </button>
-      <HeroIcon
-        clas="wb-icon cursor-pointer"
-        @click.prevent.stop="supabase.out"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          aria-hidden="true"
-          role="img"
-          preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 40 40"
-        >
-          <path
-            d="M21.499 19.994L32.755 8.727a1.064 1.064 0 0 0-.001-1.502c-.398-.396-1.099-.398-1.501.002L20 18.494L8.743 7.224c-.4-.395-1.101-.393-1.499.002a1.05 1.05 0 0 0-.309.751c0 .284.11.55.309.747L18.5 19.993L7.245 31.263a1.064 1.064 0 0 0 .003 1.503c.193.191.466.301.748.301h.006c.283-.001.556-.112.745-.305L20 21.495l11.257 11.27c.199.198.465.308.747.308a1.058 1.058 0 0 0 1.061-1.061c0-.283-.11-.55-.31-.747L21.499 19.994z"
-            fill="currentColor"
-          ></path>
-        </svg>
-      </HeroIcon>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import { useAbsoluteStore } from '@/store/absolute'
   import { useAuthStore } from '@/store/auth'
-  import { useSupabase } from '@/use/storage/supabase'
   import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
   import { useI18n } from 'vue-i18n'
   import { useRouter } from 'vue-router'
@@ -111,7 +92,6 @@
   const AUTH = useAuthStore()
 
   const { t } = useI18n()
-  const supabase = useSupabase()
   const router = useRouter()
 
   const breakpoints = useBreakpoints(breakpointsTailwind)

diff --git a/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderProject.vue b/packages/better-write-app/src/components/editor/header/items/EditorBaseHeaderProject.vue
@@ -47,7 +47,84 @@
         :text="t('editor.bar.supabase.save')"
         @action="onSaveProjectSupabase"
       />
+      <EditorHeaderItemDiv />
+      <EditorHeaderItem
+        :text="t('editor.bar.dropbox.connect')"
+        @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')"
+        @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')"
+        @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>
       <EditorHeaderItemDiv v-if="PROJECT.name !== env.projectEmpty()" />
+      <EditorHeaderItem
+        v-if="PROJECT.name !== env.projectEmpty()"
+        :text="t('editor.bar.assistants.actions')"
+        @action="ABSOLUTE.logger = true"
+      />
       <EditorHeaderItem
         v-if="PROJECT.name !== env.projectEmpty()"
         :text="t('editor.bar.project.statistics')"
@@ -88,6 +165,7 @@
   import { useAuthStore } from '@/store/auth'
   import { useRouter } from 'vue-router'
   import { useDashboard } from '@/use/dashboard'
+  import { useDropbox } from '@/use/storage/dropbox'
 
   const ABSOLUTE = useAbsoluteStore()
   const PROJECT = useProjectStore()
@@ -100,6 +178,7 @@
   const { t } = useI18n()
   const router = useRouter()
   const dashboard = useDashboard()
+  const dropbox = useDropbox()
 
   const onSaveProject = () => {
     if (!confirm(t('editor.window.saveLocal'))) return

diff --git a/packages/better-write-app/src/components/editor/main/EditorBaseHeader.vue b/packages/better-write-app/src/components/editor/main/EditorBaseHeader.vue
@@ -6,52 +6,16 @@
     :delay="100"
     class="flex justify-between items-center w-full bg-theme-editor-header-background hover:bg-theme-editor-header-background-hover active:bg-theme-editor-header-background-active z-50 pt-0.5"
   >
-    <div class="flex justify-between">
+    <div class="flex items-center justify-between">
       <EditorBaseHeaderAside />
       <EditorBaseHeaderProject />
       <EditorBaseHeaderCreate />
-      <EditorBaseHeaderAddons />
       <EditorBaseHeaderChapters />
       <EditorBaseHeaderExternals />
     </div>
-    <div class="flex">
+    <div class="flex items-center">
       <EditorBaseHeaderLogin />
-      <div
-        v-if="
-          PROJECT.name !== env.projectEmpty() && !breakpoint.isMobile().value
-        "
-        class="wb-icon no-drag cursor-pointer"
-        @click.prevent.stop="editor.fullScreen"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="33"
-          height="33"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-          />
-        </svg>
-      </div>
+      <EditorBaseHeaderFullscreen />
     </div>
   </header>
 </template>
-
-<script setup lang="ts">
-  import { useEditor } from '@/use/editor'
-  import { useProjectStore } from '@/store/project'
-  import { useEnv } from '@/use/env'
-  import { useBreakpoint } from '@/use/breakpoint'
-
-  const PROJECT = useProjectStore()
-
-  const editor = useEditor()
-  const env = useEnv()
-  const breakpoint = useBreakpoint()
-</script>