chore(app): support providers

Novout · Sep 27, 2022 · 02424da · 02424da
1 parent b713683
commit 02424da
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 80 deletions.
diff --git a/...ite-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultContainer.vue b/...ite-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultContainer.vue
@@ -103,7 +103,7 @@
     const motion = useMotion(container, variants)
 
     useIntersectionObserver(container, ([{ isIntersecting }]) => {
-      if(!EDITOR.configuration.transition) return
+      if (!EDITOR.configuration.transition) return
 
       isIntersecting
         ? (motion.variant.value = 'enter')

diff --git a/packages/better-write-app/src/components/page/editor/project/drafts/EditorPagesDrafts.vue b/packages/better-write-app/src/components/page/editor/project/drafts/EditorPagesDrafts.vue
@@ -1,12 +1,5 @@
 <template>
-  <div
-    id="pdf-absolute"
-    v-motion
-    :initial="{ opacity: 0, y: 10 }"
-    :enter="{ opacity: 1, y: 0 }"
-    :delay="100"
-    class="overflow-y-auto bg-rgba-blur font-raleway wb-scroll wb-text p-4 fixed top-0 left-0 h-screen w-full bg-theme-editor-creative-drafts-background text-theme-editor-creative-drafts-container-list-text z-max"
-  >
+  <FullModal @close="onClose">
     <EditorAbsoluteHeader
       :title="t('editor.bar.chapter.drafts')"
       @close="onClose"
@@ -90,7 +83,7 @@
         />
       </div>
     </div>
-  </div>
+  </FullModal>
 </template>
 
 <script setup lang="ts">

diff --git a/...es/better-write-app/src/components/page/editor/provider/support/ProviderSupportArrows.vue b/...es/better-write-app/src/components/page/editor/provider/support/ProviderSupportArrows.vue
@@ -0,0 +1,28 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+  import { useMagicKeys } from '@vueuse/core'
+  import { watch } from 'vue'
+
+  const { arrowleft, arrowright, arrowup, arrowdown } = useMagicKeys()
+
+  const emit = defineEmits(['left', 'right', 'up', 'down'])
+
+  watch(arrowleft, (v) => {
+    if (v) emit('left')
+  })
+
+  watch(arrowright, (v) => {
+    if (v) emit('right')
+  })
+
+  watch(arrowup, (v) => {
+    if (v) emit('up')
+  })
+
+  watch(arrowdown, (v) => {
+    if (v) emit('down')
+  })
+</script>
diff --git a/...ges/better-write-app/src/components/page/editor/provider/support/ProviderSupportClose.vue b/...ges/better-write-app/src/components/page/editor/provider/support/ProviderSupportClose.vue
@@ -0,0 +1,16 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+  import { useMagicKeys } from '@vueuse/core'
+  import { watch } from 'vue'
+
+  const { escape } = useMagicKeys()
+
+  const emit = defineEmits(['close'])
+
+  watch(escape, (v) => {
+    if (v) emit('close')
+  })
+</script>
diff --git a/packages/better-write-app/src/components/page/editor/tools/EditorToolsFinder.vue b/packages/better-write-app/src/components/page/editor/tools/EditorToolsFinder.vue
@@ -1,36 +1,48 @@
 <template>
-  <div
-    ref="f"
-    class="fixed bg-rgba-blur z-50 w-60 text-theme-editor-extras-finder-text hover:text-theme-editor-extras-finder-text-hover active:text-theme-editor-extras-finder-text-active bg-theme-editor-extras-finder-background hover:bg-theme-editor-extras-finder-background-hover active:bg-theme-editor-extras-finder-background-active p-2 rounded shadow-2xl"
-    :style="style"
-  >
-    <div class="flex flex-col w-full">
-      <div class="flex items-center justify-between w-full mb-1 cursor-pointer">
-        <div class="flex items-center">
-          <div class="font-poppins">
-            {{ finder.state.actuallyLetterCounter }} /
-            {{ finder.state.maxLetterCounter }}
+  <ProviderSupportClose @close="onClose">
+    <ProviderSupportArrows @up="finder.onUp" @down="finder.onDown">
+      <div
+        ref="f"
+        class="fixed bg-rgba-blur z-50 w-60 text-theme-editor-extras-finder-text hover:text-theme-editor-extras-finder-text-hover active:text-theme-editor-extras-finder-text-active bg-theme-editor-extras-finder-background hover:bg-theme-editor-extras-finder-background-hover active:bg-theme-editor-extras-finder-background-active p-2 rounded shadow-2xl"
+        :style="style"
+      >
+        <div class="flex flex-col w-full">
+          <div
+            class="flex items-center justify-between w-full mb-1 cursor-pointer"
+          >
+            <div class="flex items-center">
+              <div class="font-poppins">
+                {{ finder.state.actuallyLetterCounter }} /
+                {{ finder.state.maxLetterCounter }}
+              </div>
+              <IconUp
+                class="text-2xs ml-2 wb-icon h-5 w-5"
+                @click="finder.onUp"
+              />
+              <IconDown
+                class="text-2xs wb-icon h-5 w-5"
+                @click="finder.onDown"
+              />
+            </div>
+            <div>
+              <IconClose
+                class="text-2xs wb-icon h-5 w-5"
+                @click.prevent="onClose"
+              />
+            </div>
           </div>
-          <IconUp class="text-2xs ml-2 wb-icon h-5 w-5" @click="finder.onUp" />
-          <IconDown class="text-2xs wb-icon h-5 w-5" @click="finder.onDown" />
-        </div>
-        <div>
-          <IconClose
-            class="text-2xs wb-icon h-5 w-5"
-            @click.prevent="onClose"
+          <input
+            ref="search"
+            v-model="finder.state.entry"
+            class="bg-transparent border border-theme-editor-extras-finder-border px-1 mb-1 placeholder-theme-editor-extras-finder-text"
+            :placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
+            @input="finder.onFinder"
+            @keypress.enter.prevent="finder.onUp"
           />
         </div>
       </div>
-      <input
-        ref="search"
-        v-model="finder.state.entry"
-        class="bg-transparent border border-theme-editor-extras-finder-border px-1 mb-1 placeholder-theme-editor-extras-finder-text"
-        :placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
-        @input="finder.onFinder"
-        @keypress.enter.prevent="finder.onUp"
-      />
-    </div>
-  </div>
+    </ProviderSupportArrows>
+  </ProviderSupportClose>
 </template>
 
 <script setup lang="ts">

diff --git a/packages/better-write-app/src/components/page/editor/tools/EditorToolsSwitcher.vue b/packages/better-write-app/src/components/page/editor/tools/EditorToolsSwitcher.vue
@@ -1,47 +1,54 @@
 <template>
-  <div
-    ref="sw"
-    class="fixed bg-rgba-blur z-50 w-60 text-theme-editor-extras-switcher-text hover:text-theme-editor-extras-switcher-text-hover active:text-theme-editor-extras-switcher-text-active bg-theme-editor-extras-switcher-background hover:bg-theme-editor-extras-switcher-background-hover active:bg-theme-editor-extras-switcher-background-active p-2 rounded shadow-2xl"
-    :style="style"
-  >
+  <ProviderSupportClose @close="onClose">
     <div
-      class="flex flex-col w-full"
-      @keypress.enter.prevent="switcher.onSwitcherAll"
+      ref="sw"
+      class="fixed bg-rgba-blur z-50 w-60 text-theme-editor-extras-switcher-text hover:text-theme-editor-extras-switcher-text-hover active:text-theme-editor-extras-switcher-text-active bg-theme-editor-extras-switcher-background hover:bg-theme-editor-extras-switcher-background-hover active:bg-theme-editor-extras-switcher-background-active p-2 rounded shadow-2xl"
+      :style="style"
     >
-      <div class="flex items-center justify-between w-full mb-1 cursor-pointer">
-        <div class="flex items-center">
-          <div class="font-poppins">
-            {{ switcher.state.actuallyLetterCounter }} /
-            {{ switcher.state.maxLetterCounter }}
+      <div
+        class="flex flex-col w-full"
+        @keypress.enter.prevent="switcher.onSwitcherAll"
+      >
+        <div
+          class="flex items-center justify-between w-full mb-1 cursor-pointer"
+        >
+          <div class="flex items-center">
+            <div class="font-poppins">
+              {{ switcher.state.actuallyLetterCounter }} /
+              {{ switcher.state.maxLetterCounter }}
+            </div>
+            <IconUp
+              class="text-2xs ml-2 wb-icon h-5 w-5"
+              @click="switcher.onUp"
+            />
+            <IconDown
+              class="text-2xs wb-icon h-5 w-5"
+              @click="switcher.onDown"
+            />
+          </div>
+          <div>
+            <IconClose
+              class="text-2xs wb-icon h-5 w-5"
+              @click.prevent="onClose"
+            />
           </div>
-          <IconUp
-            class="text-2xs ml-2 wb-icon h-5 w-5"
-            @click="switcher.onUp"
-          />
-          <IconDown class="text-2xs wb-icon h-5 w-5" @click="switcher.onDown" />
-        </div>
-        <div>
-          <IconClose
-            class="text-2xs wb-icon h-5 w-5"
-            @click.prevent="onClose"
-          />
         </div>
+        <input
+          ref="entry"
+          v-model="switcher.state.entry"
+          class="bg-transparent border border-theme-editor-extras-switcher-border px-1 mb-1 placeholder-theme-editor-extras-switcher-text"
+          :placeholder="t('editor.text.placeholder.shortcuts.switcherEntry')"
+          @input="switcher.onSwitcher"
+          @keypress.enter.prevent="switcher.onUp"
+        />
+        <input
+          v-model="switcher.state.output"
+          class="bg-transparent border border-theme-editor-extras-switcher-border px-1 placeholder-theme-editor-extras-switcher-text"
+          :placeholder="t('editor.text.placeholder.shortcuts.switcherOutput')"
+        />
       </div>
-      <input
-        ref="entry"
-        v-model="switcher.state.entry"
-        class="bg-transparent border border-theme-editor-extras-switcher-border px-1 mb-1 placeholder-theme-editor-extras-switcher-text"
-        :placeholder="t('editor.text.placeholder.shortcuts.switcherEntry')"
-        @input="switcher.onSwitcher"
-        @keypress.enter.prevent="switcher.onUp"
-      />
-      <input
-        v-model="switcher.state.output"
-        class="bg-transparent border border-theme-editor-extras-switcher-border px-1 placeholder-theme-editor-extras-switcher-text"
-        :placeholder="t('editor.text.placeholder.shortcuts.switcherOutput')"
-      />
     </div>
-  </div>
+  </ProviderSupportClose>
 </template>
 
 <script setup lang="ts">
@@ -51,6 +58,7 @@
   import { onClickOutside, useDraggable } from '@vueuse/core'
   import { useExternalsStore } from '@/store/externals'
   import { useSwitcher } from '@/use/tools/switcher'
+  import ProviderSupportClose from '../provider/support/ProviderSupportClose.vue'
 
   const ABSOLUTE = useAbsoluteStore()
   const EXTERNALS = useExternalsStore()

diff --git a/packages/better-write-plugin-theme/css/themes/betterwrite-custom.css b/packages/better-write-plugin-theme/css/themes/betterwrite-custom.css
@@ -169,9 +169,9 @@
   --theme-editor-creative-drafts-container-list-text: #e5e7eb;
   --theme-editor-creative-drafts-container-list-text-hover: #e5e7eb;
   --theme-editor-creative-drafts-container-list-text-active: #e5e7eb;
-  --theme-editor-creative-drafts-container-item-background: none;
-  --theme-editor-creative-drafts-container-item-background-hover: none;
-  --theme-editor-creative-drafts-container-item-background-active: none;
+  --theme-editor-creative-drafts-container-item-background: rgba(0, 0, 0, 0.2);
+  --theme-editor-creative-drafts-container-item-background-hover: rgba(0, 0, 0, 0.2);
+  --theme-editor-creative-drafts-container-item-background-active: rgba(0, 0, 0, 0.2);
   --theme-editor-creative-drafts-container-item-text: #e5e7eb;
   --theme-editor-dashboard-background-main: rgba(0, 0, 0, 0.5);
   --theme-editor-dashboard-background-item: rgba(0, 0, 0, 0.5);
@@ -206,6 +206,6 @@
   --scr-track: #222;
   --scr-thumb: #262626;
   --scr-thumb-hover: #333333;
-  --wb-selection: black;
-  --wb-text-selection: rgba(255, 255, 255, 0.5);;
+  --wb-selection: rgba(0, 0, 0, 0.5);
+  --wb-text-selection: rgba(255, 255, 255, 0.75);
 }