style(editor): aside language select

Novout · Oct 19, 2021 · 768803a · 768803a
1 parent 94b5ac8
commit 768803a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/components/editor/aside/configuration/AsideBarConfiguration.vue b/src/components/editor/aside/configuration/AsideBarConfiguration.vue
@@ -26,26 +26,15 @@
         items-center
         w-full
         px-2
+        py-1
       "
     >
       <p>{{ t('editor.aside.configuration.lang') }}</p>
-      <select
+      <TextSelect
         v-model="lang"
-        class="
-          form-select
-          w-20
-          wb-text
-          bg-transparent bg-none
-          border-none
-          focus:border-none
-          active:border-none
-        "
-      >
-        <option class="dark:bg-gray-700" value="Português do Brasil">
-          Português do Brasil
-        </option>
-        <option class="dark:bg-gray-700" value="English">English</option>
-      </select>
+        :aside="true"
+        :arr="['Português do Brasil', 'English']"
+      />
     </div>
     <SwitchGroup>
       <div class="flex px-2 items-center w-full justify-between">

diff --git a/src/components/material/TextSelect.vue b/src/components/material/TextSelect.vue
@@ -22,7 +22,9 @@
           sm:text-sm
         "
       >
-        <span class="block truncate">{{ cmp }}</span>
+        <span :class="[aside ? 'w-12' : '']" class="block truncate">{{
+          cmp
+        }}</span>
       </ListboxButton>
 
       <transition
@@ -46,6 +48,7 @@
             focus:outline-none
             sm:text-sm
             z-max
+            truncate
           "
         >
           <ListboxOption
@@ -57,12 +60,14 @@
           >
             <li
               :class="[
+                aside ? 'w-24' : '',
                 'cursor-pointer hover:bg-gray-500 dark:hover:bg-gray-800 select-none relative py-2 pl-10 pr-4',
               ]"
             >
               <span
                 :class="[
                   selected ? 'font-bold' : 'font-normal',
+                  aside ? 'w-24' : '',
                   'block truncate',
                 ]"
                 :style="{ fontFamily: font ? it as string : '' }"
@@ -78,6 +83,8 @@
                   items-center
                   pl-3
                   text-amber-600
+                  truncate
+                  w-10
                 "
               >
                 <svg
@@ -118,6 +125,11 @@
       type: Boolean,
       default: false,
     },
+    aside: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   })
 
   const emit = defineEmits(['update:modelValue'])