fix(editor): absolute overflow in modal container

Novout · Nov 8, 2021 · 14fcafa · 14fcafa
1 parent 1bb760f
commit 14fcafa
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 143 deletions.
diff --git a/src/components/editor/absolute/shortcuts/EditorShortcutsFinder.vue b/src/components/editor/absolute/shortcuts/EditorShortcutsFinder.vue
@@ -1,76 +1,80 @@
 <template>
-  <div
-    ref="finder"
-    class="fixed w-60 bg-white dark:bg-gray-800 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">
-          <div class="wb-text font-poppins">
-            {{ entity.fstate.actuallyLetterCounter }} /
-            {{ entity.fstate.maxLetterCounter }}
-          </div>
-          <HeroIcon
-            class="text-2xs ml-2 wb-icon"
-            @click.prevent="entity.finder().onUp"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </HeroIcon>
-          <HeroIcon
-            class="text-2xs wb-icon"
-            @click.prevent="entity.finder().onDown"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+  <div class="fixed left-0 top-0 w-full h-screen bg-modal z-max">
+    <div
+      ref="finder"
+      class="fixed w-60 bg-white dark:bg-gray-800 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">
+            <div class="wb-text font-poppins">
+              {{ entity.fstate.actuallyLetterCounter }} /
+              {{ entity.fstate.maxLetterCounter }}
+            </div>
+            <HeroIcon
+              class="text-2xs ml-2 wb-icon"
+              @click.prevent="entity.finder().onUp"
             >
-              <path
-                fill-rule="evenodd"
-                d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </HeroIcon>
-        </div>
-        <div>
-          <HeroIcon class="text-2xs wb-icon" @click.prevent="onClose">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+            <HeroIcon
+              class="text-2xs wb-icon"
+              @click.prevent="entity.finder().onDown"
             >
-              <path
-                fill-rule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </HeroIcon>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+          </div>
+          <div>
+            <HeroIcon class="text-2xs wb-icon" @click.prevent="onClose">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+          </div>
         </div>
+        <input
+          ref="search"
+          v-model="entity.fstate.entry"
+          class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
+          :placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
+          @input="entity.finder().onFinder"
+          @keypress.enter.prevent="entity.finder().onUp"
+        />
       </div>
-      <input
-        ref="search"
-        v-model="entity.fstate.entry"
-        class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
-        :placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
-        @input="entity.finder().onFinder"
-        @keypress.enter.prevent="entity.finder().onUp"
-      />
     </div>
   </div>
 </template>

diff --git a/src/components/editor/absolute/shortcuts/EditorShortcutsSwitcher.vue b/src/components/editor/absolute/shortcuts/EditorShortcutsSwitcher.vue
@@ -1,84 +1,88 @@
 <template>
-  <div
-    ref="switcher"
-    class="fixed w-60 bg-white dark:bg-gray-800 p-2 rounded shadow-2xl"
-    :style="style"
-  >
+  <div class="fixed left-0 top-0 w-full h-screen bg-modal z-max">
     <div
-      class="flex flex-col w-full"
-      @keypress.enter.prevent="entity.swapper().onSwitcherAll"
+      ref="switcher"
+      class="fixed w-60 bg-white dark:bg-gray-800 p-2 rounded shadow-2xl"
+      :style="style"
     >
-      <div class="flex items-center justify-between w-full mb-1 cursor-pointer">
-        <div>
-          <HeroIcon
-            :class="[
-              entity.sstate.equal
-                ? 'border border-black dark:border-white'
-                : '',
-            ]"
-            class="text-2xs wb-icon"
-            @click.prevent="entity.sstate.equal = !entity.sstate.equal"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+      <div
+        class="flex flex-col w-full"
+        @keypress.enter.prevent="entity.swapper().onSwitcherAll"
+      >
+        <div
+          class="flex items-center justify-between w-full mb-1 cursor-pointer"
+        >
+          <div>
+            <HeroIcon
+              :class="[
+                entity.sstate.equal
+                  ? 'border border-black dark:border-white'
+                  : '',
+              ]"
+              class="text-2xs wb-icon"
+              @click.prevent="entity.sstate.equal = !entity.sstate.equal"
             >
-              <path
-                d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
-              />
-              <path
-                d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
-              />
-            </svg>
-          </HeroIcon>
-          <HeroIcon
-            class="text-2xs wb-icon mx-1"
-            @click.prevent="entity.swapper().onSwitcherAll"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
+                />
+                <path
+                  d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
+                />
+              </svg>
+            </HeroIcon>
+            <HeroIcon
+              class="text-2xs wb-icon mx-1"
+              @click.prevent="entity.swapper().onSwitcherAll"
             >
-              <path
-                fill-rule="evenodd"
-                d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </HeroIcon>
-        </div>
-        <div>
-          <HeroIcon class="text-2xs wb-icon" @click.prevent="onClose">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </HeroIcon>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+          </div>
+          <div>
+            <HeroIcon class="text-2xs wb-icon" @click.prevent="onClose">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+          </div>
         </div>
+        <input
+          ref="entry"
+          v-model="entity.sstate.entry"
+          class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
+          :placeholder="t('editor.text.placeholder.shortcuts.switcherEntry')"
+        />
+        <input
+          v-model="entity.sstate.output"
+          class="bg-transparent border border-gray-900 px-1 wb-text"
+          :placeholder="t('editor.text.placeholder.shortcuts.switcherOutput')"
+        />
       </div>
-      <input
-        ref="entry"
-        v-model="entity.sstate.entry"
-        class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
-        :placeholder="t('editor.text.placeholder.shortcuts.switcherEntry')"
-      />
-      <input
-        v-model="entity.sstate.output"
-        class="bg-transparent border border-gray-900 px-1 wb-text"
-        :placeholder="t('editor.text.placeholder.shortcuts.switcherOutput')"
-      />
     </div>
   </div>
 </template>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -50,7 +50,7 @@ module.exports = {
       backgroundColor: theme => ({
         "black-opacity": 'rgba(0,0,0, 0.15)',
         "white-opacity": 'rgba(255,255,255, 0.1)',
-        "modal": 'rgba(0,0,0, 0.6)'
+        "modal": 'rgba(0,0,0, 0.4)'
       }),
       boxShadow: theme => ({
         "binset": `rgba(50, 50, 93, 0.4) 0px 2px 5px -1px, rgba(0, 0, 0, 0.65) 0px 1px 3px -1px;`,