chore(editor): header componentization

Novout · Nov 12, 2021 · d0304e4 · d0304e4
1 parent 9534f09
commit d0304e4
Show file tree

Hide file tree

Showing 6 changed files with 336 additions and 0 deletions.
diff --git a/src/components/editor/header/items/EditorBaseHeaderChapters.vue b/src/components/editor/header/items/EditorBaseHeaderChapters.vue
@@ -0,0 +1,66 @@
+<template>
+  <!-- Chapters -->
+  <div
+    v-if="project.isCreativeProject() && PROJECT.name !== env.projectEmpty()"
+    class="px-4"
+  ></div>
+  <EditorHeaderButton
+    v-if="project.isCreativeProject() && PROJECT.name !== env.projectEmpty()"
+  >
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--ic"
+        width="24"
+        height="24"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15 1H4c-1.1 0-2 .9-2 2v13c0 .55.45 1 1 1s1-.45 1-1V4c0-.55.45-1 1-1h10c.55 0 1-.45 1-1s-.45-1-1-1zm.59 4.59l4.83 4.83c.37.37.58.88.58 1.41V21c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h6.17c.53 0 1.04.21 1.42.59zM15 12h4.5L14 6.5V11c0 .55.45 1 1 1z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.chapter.new')"
+        shortcut="CTRL + Q"
+        @action="page.onCreatePage"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.chapter.delete')"
+        shortcut="CTRL + Alt + D"
+        @action="page.onDeletePage"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.chapter.up')"
+        shortcut=""
+        @action="page.onUpPage"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.chapter.down')"
+        shortcut=""
+        @action="page.onDownPage"
+      />
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { usePage } from '@/use/page'
+  import { useProject } from '@/use/project'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { useI18n } from 'vue-i18n'
+
+  const PROJECT = useProjectStore()
+
+  const page = usePage()
+  const project = useProject()
+  const env = useEnv()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderConfigurations.vue b/src/components/editor/header/items/EditorBaseHeaderConfigurations.vue
@@ -0,0 +1,48 @@
+<template>
+  <!-- Configurations -->
+  <EditorHeaderButton v-if="PROJECT.name !== env.projectEmpty()">
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--eos-icons"
+        width="24"
+        height="24"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M10.507 14.142a1.35 1.35 0 1 0 1.35 1.35a1.348 1.348 0 0 0-1.35-1.35z"
+          fill="currentColor"
+        ></path>
+        <path
+          d="M14 2.01H6a1.997 1.997 0 0 0-1.99 2l-.01 16a1.997 1.997 0 0 0 1.99 2H18a2.006 2.006 0 0 0 2-2v-12zm.863 14.958l-.9 1.557a.236.236 0 0 1-.279.099l-1.125-.45a3.328 3.328 0 0 1-.756.44l-.17 1.189a.231.231 0 0 1-.226.189h-1.8a.224.224 0 0 1-.225-.19l-.17-1.187a3.079 3.079 0 0 1-.766-.441l-1.116.45a.228.228 0 0 1-.279-.1l-.9-1.556a.234.234 0 0 1 .054-.288l.954-.747a3.618 3.618 0 0 1 0-.882l-.954-.747a.223.223 0 0 1-.054-.288l.9-1.557a.236.236 0 0 1 .28-.1l1.115.45a3.593 3.593 0 0 1 .765-.44l.171-1.188a.231.231 0 0 1 .225-.19h1.8a.215.215 0 0 1 .216.19l.171 1.188a3.078 3.078 0 0 1 .765.44l1.116-.45a.228.228 0 0 1 .28.1l.9 1.557a.234.234 0 0 1-.055.288l-.954.747a2.368 2.368 0 0 1 .036.44a3.495 3.495 0 0 1-.036.442l.963.747a.234.234 0 0 1 .054.288zM13 9.01v-5.5l5.5 5.5z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        v-if="PROJECT.name !== env.projectEmpty()"
+        :text="t('editor.bar.project.preferences')"
+        shortcut=""
+        @action="ABSOLUTE.project.preferences = true"
+      />
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useAbsoluteStore } from '@/store/absolute'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { useI18n } from 'vue-i18n'
+
+  const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
+
+  const env = useEnv()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderDropbox.vue b/src/components/editor/header/items/EditorBaseHeaderDropbox.vue
@@ -0,0 +1,55 @@
+<template>
+  <!-- DROPBOX -->
+  <EditorHeaderButton v-if="!isElectron()">
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--grommet-icons"
+        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>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.dropbox.connect')"
+        shortcut=""
+        @action="dropbox.connect"
+      />
+      <EditorHeaderItem
+        v-if="AUTH.dropbox.accessToken"
+        :text="t('editor.bar.dropbox.load')"
+        shortcut=""
+        @action="dropbox.load"
+      />
+      <EditorHeaderItem
+        v-if="AUTH.dropbox.accessToken"
+        :text="t('editor.bar.dropbox.save')"
+        shortcut=""
+        @action="dropbox.save"
+      />
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { useDropbox } from '@/use/storage/dropbox'
+  import { useAuthStore } from '@/store/auth'
+  import isElectron from 'is-electron'
+
+  const AUTH = useAuthStore()
+
+  const dropbox = useDropbox()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderExternals.vue b/src/components/editor/header/items/EditorBaseHeaderExternals.vue
@@ -0,0 +1,53 @@
+<template>
+  <!-- Externals -->
+  <EditorHeaderButton v-if="PROJECT.name !== env.projectEmpty()">
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--mdi"
+        width="24"
+        height="24"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4l3 3l3-3h4a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m-5.12 10.88L12 17l-1.88-4.12L6 11l4.12-1.88L12 5l1.88 4.12L18 11"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.assistants.actions')"
+        shortcut="CTRL + L"
+        @action="ABSOLUTE.logger = true"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.assistants.finder')"
+        shortcut="CTRL + F"
+        @action="ABSOLUTE.shortcuts.finder = true"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.assistants.swapper')"
+        shortcut="CTRL + H"
+        @action="ABSOLUTE.shortcuts.switcher = true"
+      />
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useAbsoluteStore } from '@/store/absolute'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { useI18n } from 'vue-i18n'
+
+  const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
+
+  const env = useEnv()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderPDF.vue b/src/components/editor/header/items/EditorBaseHeaderPDF.vue
@@ -0,0 +1,55 @@
+<template>
+  <!-- PDF -->
+  <EditorHeaderButton v-if="PROJECT.name !== env.projectEmpty()">
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--ic"
+        width="24"
+        height="24"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.configuration')"
+        shortcut="CTRL + G"
+        @action="pdf.external().onConfigurationPDF()"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.preview')"
+        shortcut="CTRL + Shift + G"
+        @action="ABSOLUTE.pdf.preview = true"
+      />
+      <EditorHeaderItem
+        :text="t('editor.bar.pdf.generate')"
+        shortcut="CTRL + Alt + G"
+        @action="pdf.external().onGeneratePDF()"
+      />
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useAbsoluteStore } from '@/store/absolute'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { usePDF } from '@/use/pdf'
+  import { useI18n } from 'vue-i18n'
+
+  const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
+
+  const env = useEnv()
+  const pdf = usePDF()
+  const { t } = useI18n()
+</script>
diff --git a/src/components/editor/header/items/EditorBaseHeaderProject.vue b/src/components/editor/header/items/EditorBaseHeaderProject.vue
@@ -0,0 +1,59 @@
+<template>
+  <!-- Project -->
+  <EditorHeaderButton>
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--ri"
+        width="24"
+        height="24"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3 9h6a1 1 0 0 0 1-1V2h10.002c.551 0 .998.455.998.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V9zm0-2l5-4.997V7H3z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </template>
+    <template #bar>
+      <EditorHeaderItem
+        :text="t('editor.bar.project.new')"
+        shortcut="CTRL + Shift + Q"
+        @action="ABSOLUTE.project.new = true"
+      />
+      <EditorHeaderItem
+        :divider="true"
+        :text="t('editor.bar.project.load')"
+        shortcut="CTRL + P"
+        @action="project.onLoadProject"
+      />
+      <EditorHeaderItem
+        v-if="PROJECT.name !== env.projectEmpty()"
+        :text="t('editor.bar.project.save')"
+        shortcut="CTRL + S"
+        @action="local.onSaveProject"
+      />
+    </template>
+  </EditorHeaderButton>
+</template>
+
+<script setup lang="ts">
+  import { useProject } from '@/use/project'
+  import { useAbsoluteStore } from '@/store/absolute'
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { useI18n } from 'vue-i18n'
+  import { useLocalStorage } from '@/use/storage/local'
+
+  const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
+
+  const project = useProject()
+  const env = useEnv()
+  const local = useLocalStorage()
+  const { t } = useI18n()
+</script>