refactor(editor): support other languages

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

Hide file tree

Showing 4 changed files with 62 additions and 53 deletions.
diff --git a/src/components/editor/aside/configuration/AsideBarConfiguration.vue b/src/components/editor/aside/configuration/AsideBarConfiguration.vue
@@ -16,6 +16,37 @@
         </svg>
       </HeroIcon>
     </template>
+    <div
+      class="
+        flex
+        font-bold
+        text-xs text-black
+        dark:text-gray-300
+        justify-between
+        items-center
+        w-full
+        px-2
+      "
+    >
+      <p>{{ t('editor.aside.configuration.lang') }}</p>
+      <select
+        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>
+    </div>
     <SwitchGroup>
       <div class="flex px-2 items-center w-full justify-between">
         <SwitchLabel
@@ -57,46 +88,6 @@
           />
         </Switch>
       </div>
-      <div class="flex px-2 items-center w-full justify-between pt-3">
-        <SwitchLabel
-          class="
-            mr-4
-            text-black
-            dark:text-gray-300
-            transition
-            font-bold
-            text-xs
-          "
-          >{{ t('editor.aside.configuration.lang') }}</SwitchLabel
-        >
-        <Switch
-          v-model="lang"
-          :class="lang ? 'bg-gray-900' : 'bg-gray-500'"
-          class="
-            relative
-            inline-flex
-            items-center
-            h-6
-            transition-colors
-            rounded-full
-            w-11
-            focus:outline-none
-          "
-        >
-          <span
-            :class="lang ? 'translate-x-6' : 'translate-x-1'"
-            class="
-              inline-block
-              w-4
-              h-4
-              transition-transform
-              transform
-              bg-white
-              rounded-full
-            "
-          />
-        </Switch>
-      </div>
     </SwitchGroup>
   </AsideBarItem>
 </template>
@@ -119,14 +110,33 @@
     _dark ? (localStorage.theme = 'dark') : localStorage.removeItem('theme')
   })
 
-  const lang = ref(locale.value === 'en' ? true : false)
-  watch(lang, (_lang: boolean) => {
-    localStorage.setItem('lang', _lang ? 'en' : 'br')
+  const convert = (iso: string) => {
+    return (
+      {
+        br: 'Português do Brasil',
+        en: 'English',
+      }[iso] || 'en'
+    )
+  }
+
+  const lang = ref(convert(localStorage.getItem('lang') || 'en'))
+
+  watch(lang, (_lang: string) => {
+    const set =
+      {
+        'Português do Brasil': 'br',
+        English: 'en',
+      }[_lang] || 'en'
+
+    localStorage.setItem('lang', set)
+    locale.value = set
 
-    _lang ? (locale.value = 'en') : (locale.value = 'br')
+    const iso =
+      {
+        en: 'en-US',
+        br: 'pt-BR',
+      }[set] || 'en-US'
 
-    _lang
-      ? ((document.querySelector('html') as HTMLElement).lang = 'en-US')
-      : ((document.querySelector('html') as HTMLElement).lang = 'pt-BR')
+    ;(document.querySelector('html') as HTMLElement).lang = iso
   })
 </script>
diff --git a/src/lang/br/editor.ts b/src/lang/br/editor.ts
@@ -77,7 +77,7 @@ export default {
     configuration: {
       title: 'Configuração',
       dark: 'Modo Escuro',
-      lang: 'PT-BR / EN-US',
+      lang: 'Linguagem',
       draggable: 'Arrastável',
     },
     entity: {

diff --git a/src/lang/en/editor.ts b/src/lang/en/editor.ts
@@ -77,7 +77,7 @@ export default {
     configuration: {
       title: 'Settings',
       dark: 'Dark Mode',
-      lang: 'PT-BR / EN-US',
+      lang: 'Language',
       draggable: 'Draggable',
     },
     entity: {

diff --git a/src/use/start.ts b/src/use/start.ts
@@ -110,11 +110,10 @@ export const useStart: Callback<void> = () => {
     const { locale } = useI18n()
     const lang = localStorage.getItem('lang')
 
-    lang === 'br' ? (locale.value = 'br') : (locale.value = 'en')
+    if (!lang) return
 
-    lang === 'br'
-      ? ((document.querySelector('html') as HTMLElement).lang = 'pt-BR')
-      : ((document.querySelector('html') as HTMLElement).lang = 'en-US')
+    locale.value = lang
+    ;(document.querySelector('html') as HTMLElement).lang = lang
   }
 
   const initial = () => {