Use a different font for TC and SC and handle localisation for the ne…

…w features
linkie · Feb 5, 2024 · 3534e9c · 3534e9c
1 parent db002c2
commit 3534e9c
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 16 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -14,7 +14,7 @@ import Alerts from "./components/Alerts.vue"
 import {useI18nStore} from "./app/i18n-store"
 import {isTauri, tauriInit} from "./app/tauri/tauri"
 import Tauri from "./components/tauri/Tauri.vue"
-import SourcesStatus from "./routes/SourcesStatus.vue";
+import SourcesStatus from "./routes/SourcesStatus.vue"
 
 const routes: { [route: string]: any; } = {
     "/": Home,
@@ -43,6 +43,16 @@ export default defineComponent({
         locale(): string {
             return this.$i18n.locale
         },
+        fontLink(): string | undefined {
+            switch (this.locale) {
+                case "zh_TW":
+                    return "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900"
+                case "zh_CN":
+                    return "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900"
+                default:
+                    return undefined
+            }
+        }
     },
     mounted() {
         this.$i18n.locale = this.$i18n.availableLocales.find((locale: string) => locale === useI18nStore().locale) ?? "en_US"
@@ -64,7 +74,7 @@ export default defineComponent({
             document.documentElement.classList.remove("dark")
             document.documentElement.style.setProperty("--color-scheme", "light")
         }
-        
+
         if (isTauri()) {
             tauriInit()
         }
@@ -74,6 +84,7 @@ export default defineComponent({
 </script>
 
 <template>
+    <link rel="stylesheet" :href="fontLink" v-if="!!fontLink">
     <meta name="theme-color" :key="theme" :content="theme === 'cupcake' ? '#efeae6' : '#242933'">
     <div class="overflow-x-hidden text-base-content dark:text-base-dark-content" :key="locale">
         <Navbar class="top-0 fixed z-10" :class="`navbar-${current}`"/>
@@ -93,7 +104,7 @@ export default defineComponent({
 </template>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 body {

diff --git a/frontend/src/app/copy.ts b/frontend/src/app/copy.ts
@@ -1,9 +1,9 @@
 import copy from "copy-to-clipboard";
 import {useNotificationStore} from "./notification-store";
-import {VueI18n} from "vue-i18n"
+import {ExportedGlobalComposer, VueI18n} from "vue-i18n"
 
-export function copyAs(i18n: VueI18n, str: string | undefined) {
+export function copyAs(i18n: VueI18n | ExportedGlobalComposer, str: string | undefined) {
     if (str === undefined) return;
     copy(str);
-    useNotificationStore().addNotification({message: i18n.t("message.copy.clipboard")});
+    useNotificationStore().addNotification({message: (i18n as VueI18n).t("message.copy.clipboard")});
 }
diff --git a/frontend/src/components/Tooltip.vue b/frontend/src/components/Tooltip.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue"
+import {defineComponent, PropType} from "vue"
 
 export default defineComponent({
     name: "Tooltip",
     props: {
         placement: {
-            type: String,
+            type: Object as PropType<"left" | "right">,
             default: "right",
         },
     }

diff --git a/frontend/src/components/dependencies/Header.vue b/frontend/src/components/dependencies/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pb-2 text-base-content dark:text-base-dark-content font-extrabold text-3xl">
+    <div class="pb-2 text-base-content dark:text-base-dark-content font-bold text-3xl">
         <slot/>
     </div>
     <div class="divider mt-0 mb-0"/>

diff --git a/frontend/src/components/mappings/MappingsEntryBlock.vue b/frontend/src/components/mappings/MappingsEntryBlock.vue
@@ -24,7 +24,7 @@
                 </div>
                 <div class="cursor-pointer relative" v-if="namespace?.supportsSource" @click="requestSource()">
                     <IconCode class="peer"/>
-                    <Tooltip class="font-medium">View Sources</Tooltip>
+                    <Tooltip class="font-medium" placement="left">{{ $t("mappings.entry.view.sources") }}</Tooltip>
                 </div>
             </div>
         </SubHeader>

diff --git a/frontend/src/components/mappings/MappingsFilterBlock.vue b/frontend/src/components/mappings/MappingsFilterBlock.vue
@@ -64,7 +64,10 @@
                     v.hasTranslation ? 'transition-all bg-base-700 dark:hover:bg-base-dark-600 bg-opacity-0 hover:bg-opacity-60 rounded-md cursor-pointer' : 'cursor-not-allowed line-through decoration-base-content hover:decoration-base-content dark:decoration-base-dark-content dark:hover:decoration-base-dark-content',
                     'px-2 py-1 underline underline-offset-2 decoration-2']"
                    @click="version = v.hasTranslation ? v.version : version">
-                    {{ !v.hasTranslation ? $t("mappings.version.no.translation", {version: v.version}) : v.version }}
+                    {{
+                        // noinspection TypeScriptValidateTypes
+                        !v.hasTranslation ? $t("mappings.version.no.translation", {version: v.version}) : v.version
+                    }}
                 </p>
             </div>
         </div>
@@ -80,19 +83,19 @@
                         class="selection-button py-2 px-3 flex-1 flex items-center gap-3 text-left rounded-lg bg-base-500 dark:bg-base-dark-200 bg-opacity-60 hover:bg-opacity-100
                 dark:hover:bg-base-dark-400 dark:focus:bg-base-dark-400 transition-all duration-150 border-none select-none">
                     <IconArrowBarToRight class="flex-shrink-0" :size="20"/>
-                    No Translation
+                    {{ $t("mappings.translation.none") }}
                 </button>
                 <button :aria-selected="(translateMode ?? 'none') === 'ns'" @click="translateMode = 'ns'; translateAs = undefined; translateAsVersion = undefined"
                         class="selection-button py-2 px-3 flex-1 flex items-center gap-3 text-left rounded-lg bg-base-500 dark:bg-base-dark-200 bg-opacity-60 hover:bg-opacity-100
                 dark:hover:bg-base-dark-400 dark:focus:bg-base-dark-400 transition-all duration-150 border-none select-none">
                     <IconArrowBounce class="flex-shrink-0" :size="20"/>
-                    Translate to another Namespace
+                    {{ $t("mappings.translation.another.namespace") }}
                 </button>
                 <button :aria-selected="(translateMode ?? 'none') === 'ver'" @click="translateMode = 'ver'; translateAs = undefined; translateAsVersion = undefined"
                         class="selection-button py-2 px-3 flex-1 flex items-center gap-3 text-left rounded-lg bg-base-500 dark:bg-base-dark-200 bg-opacity-60 hover:bg-opacity-100
                 dark:hover:bg-base-dark-400 dark:focus:bg-base-dark-400 transition-all duration-150 border-none select-none">
                     <IconArrowIteration class="flex-shrink-0" :size="20"/>
-                    Translate to another Version
+                    {{ $t("mappings.translation.another.version") }}
                 </button>
             </div>
             <div v-if="(translateMode ?? 'none') === 'ns'" class="pt-4">

diff --git a/frontend/src/locales/en_US.json b/frontend/src/locales/en_US.json
@@ -58,6 +58,8 @@
     "mappings.version.no.translation": "{version} (no translation)",
     "mappings.translation": "Translation",
     "mappings.translation.none": "No Translation",
+    "mappings.translation.another.namespace": "Translate to another Namespace",
+    "mappings.translation.another.version": "Translate to another Version",
     "mappings.translation.n/a": "N/a",
     "mappings.search.type": "Search Type:",
     "mappings.search.type.classes": "Classes",
@@ -75,6 +77,7 @@
     "mappings.entry.mixin.target": "Mixin Target:",
     "mappings.entry.at": "AT:",
     "mappings.entry.aw": "AW:",
+    "mappings.entry.view.sources": "View Sources",
     "namespace.yarn": "Yarn",
     "namespace.mojang_raw": "Mojang",
     "namespace.mojang": "Mojang (via Intermediary)",

diff --git a/frontend/src/locales/zh_CN.json b/frontend/src/locales/zh_CN.json
@@ -57,6 +57,8 @@
     "mappings.version.no.translation": "{version}（无映射转换）",
     "mappings.translation": "映射转换",
     "mappings.translation.none": "不转换",
+    "mappings.translation.another.namespace": "转换至另一命名空间",
+    "mappings.translation.another.version": "转换至另一版本",
     "mappings.translation.n/a": "N/a",
     "mappings.search.type": "搜索类型：",
     "mappings.search.type.classes": "类",

diff --git a/frontend/src/locales/zh_TW.json b/frontend/src/locales/zh_TW.json
@@ -49,6 +49,8 @@
     "mappings.version.snapshots": "啟用快照版:",
     "mappings.translation": "翻譯",
     "mappings.translation.none": "禁用翻譯",
+    "mappings.translation.another.namespace": "翻譯至另一方案",
+    "mappings.translation.another.version": "翻譯至另一版本",
     "mappings.translation.n/a": "N/a",
     "mappings.search.type": "搜尋類型:",
     "mappings.search.type.classes": "類型",

diff --git a/frontend/src/routes/Dependencies.vue b/frontend/src/routes/Dependencies.vue
@@ -18,7 +18,7 @@
         <PageContent class="flex flex-col gap-y-5">
             <Block v-for="[blockName, block] in dependencyBlocks"
                    :id="'dep-' + dependencyBlocks.findIndex(entry => entry[0] === blockName)">
-                <div class="text-2xl font-extrabold mb-2">{{ blockName }}</div>
+                <div class="text-2xl font-bold mb-2">{{ blockName }}</div>
                 <div v-if="block.mavens.length > 0" class="flex flex-col gap-1">
                     <div v-for="maven in block.mavens">
                         <div class="font-bold" v-if="block.mavens.indexOf(maven) === 0 && !maven.subtitle"> {{ $t("dependencies.maven.repo") }}</div>

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -8,7 +8,7 @@ module.exports = {
     theme: {
         extend: {},
         fontFamily: {
-            "sans": ["Inter"],
+            "sans": ["Inter", "Noto Sans TC", "Noto Sans SC"],
             "mono": ["Jetbrains Mono"],
         },
         colors: {