From 94cc3c8f86602aebf92ea93298ae04f95137cc7b Mon Sep 17 00:00:00 2001
From: CI010 <cijhn@hotmail.com>
Date: Sat, 30 Nov 2024 17:54:24 +0800
Subject: [PATCH] refactor: Allow theme to adjust the font size

---
 xmcl-keystone-ui/src/composables/theme.ts     | 21 +++++++
 .../src/views/SettingAppearance.vue           | 59 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/xmcl-keystone-ui/src/composables/theme.ts b/xmcl-keystone-ui/src/composables/theme.ts
index daa116d5e..4388759ae 100644
--- a/xmcl-keystone-ui/src/composables/theme.ts
+++ b/xmcl-keystone-ui/src/composables/theme.ts
@@ -56,6 +56,7 @@ export interface UIThemeData {
   backgroundVolume?: number
   backgroundImageFit: 'cover' | 'contain'
   font?: MediaData
+  fontSize?: number
   particleMode?: ParticleMode
   blur: number
   blurSidebar?: number
@@ -98,6 +99,7 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
     backgroundImageFit: 'cover',
     backgroundType: BackgroundType.NONE,
     font: undefined,
+    fontSize: 16,
     blur: 4,
     blurSidebar: 0,
     blurAppBar: 0,
@@ -480,6 +482,13 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
   }
 
   const font = computed(() => currentTheme.value.font)
+  const fontSize = computed({
+    get() { return currentTheme.value.fontSize ?? 16 },
+    set(v: number) {
+      currentTheme.value.fontSize = v
+      writeTheme(currentTheme.value.name, currentTheme.value)
+    },
+  })
 
   async function setFont(path: string) {
     const media = await addMedia(path)
@@ -497,6 +506,7 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
     if (theme.font) {
       await removeMedia(theme.font.url).catch(() => { })
       theme.font = undefined
+      theme.fontSize = 16
       writeTheme(theme.name, theme)
     }
   }
@@ -541,6 +551,9 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
     if (theme.backgroundColorOverlay) {
       settings.backgroundColorOverlay = theme.backgroundColorOverlay
     }
+    if (theme.fontSize) {
+      settings.fontSize = theme.fontSize
+    }
     settings.dark = isDark.value
     const serialized: ThemeData = {
       name: theme.name,
@@ -603,6 +616,9 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
     if (data.assets.font) {
       theme.font = data.assets.font as MediaData
     }
+    if (data.settings?.fontSize) {
+      theme.fontSize = data.settings.fontSize as number ?? 16
+    }
     if (data.settings?.dark) {
       darkTheme.value = data.settings.dark ? 'dark' : 'light'
     } else {
@@ -625,6 +641,10 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
     font-family: 'custom';
     src: url('${font.value?.url}');
   }
+
+  html {
+    font-size: ${fontSize.value}px;
+  }
   
   .v-application {
     font-family: 'custom', 'Roboto', sans-serif;
@@ -688,6 +708,7 @@ export function useTheme(framework: Framework, { addMedia, removeMedia, exportTh
 
     font,
     setFont,
+    fontSize,
     resetFont,
 
     removeMusic,
diff --git a/xmcl-keystone-ui/src/views/SettingAppearance.vue b/xmcl-keystone-ui/src/views/SettingAppearance.vue
index eb43846f4..9843555fe 100644
--- a/xmcl-keystone-ui/src/views/SettingAppearance.vue
+++ b/xmcl-keystone-ui/src/views/SettingAppearance.vue
@@ -370,6 +370,53 @@
           }}
         </v-list-item-subtitle>
       </v-list-item-content>
+      <div class="flex flex-grow-0 gap-1 mr-2">
+        <v-btn-toggle
+          v-model="fontDelta"
+          mandatory
+          solo
+          dense
+        >
+          <v-btn
+            solo
+            class="h-unset!"
+          >
+            1px
+          </v-btn>
+          <v-btn
+            solo
+            class="h-unset!"
+          >
+            0.1px
+          </v-btn>
+        </v-btn-toggle>
+        <v-btn
+          icon
+          @click="onFontSizeDecrease"
+        >
+          <v-icon>
+            text_decrease
+          </v-icon>
+        </v-btn>
+        <v-text-field
+          :value="`${Math.round(fontSize * 10) / 10}px`"
+          readonly
+          class="max-w-20"
+          solo
+          outlined
+          dense
+          hide-details
+        />
+        <v-btn
+          icon
+          @click="onFontSizeIncrease"
+        >
+          <v-icon>
+            text_increase
+          </v-icon>
+        </v-btn>
+      </div>
+
       <v-btn
         outlined
         text
@@ -435,7 +482,7 @@ import { ThemeServiceKey } from '@xmcl/runtime-api'
 
 const { showOpenDialog, showSaveDialog } = windowController
 const { t } = useI18n()
-const { blurSidebar, blurAppBar, backgroundColorOverlay, backgroundImage, setBackgroundImage, blur, particleMode, backgroundType, backgroundImageFit, volume, clearBackgroundImage, exportTheme, importTheme } = injection(kTheme)
+const { blurSidebar, blurAppBar, fontSize, backgroundColorOverlay, backgroundImage, setBackgroundImage, blur, particleMode, backgroundType, backgroundImageFit, volume, clearBackgroundImage, exportTheme, importTheme } = injection(kTheme)
 const { sideBarColor, appBarColor, primaryColor, warningColor, errorColor, cardColor, backgroundColor, resetToDefault, darkTheme, currentTheme, font, setFont, resetFont, backgroundMusic, removeMusic } = injection(kTheme)
 const { state } = injection(kSettingsState)
 const env = useEnvironment()
@@ -572,6 +619,16 @@ function onImportTheme() {
   })
 }
 
+const fontDelta = ref(0)
+function onFontSizeIncrease() {
+  const delta = fontDelta.value ? 0.1 : 1
+  fontSize.value += delta
+}
+function onFontSizeDecrease() {
+  const delta = fontDelta.value ? 0.1 : 1
+  fontSize.value -= delta
+}
+
 function onSelectFont() {
   showOpenDialog({
     title: t('setting.themeSelectFont'),