add option for text outline

naeruru · Sep 6, 2024 · 55f52a3 · 55f52a3
1 parent b0d84f1
commit 55f52a3
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 0 deletions.
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -56,6 +56,9 @@ const interim_color = appearanceStore.text.interim_color
 const font_name = appearanceStore.text.font.name
 const font_subtype = appearanceStore.text.font.sub_type
 
+const outline_size = `${appearanceStore.text.outline ? appearanceStore.text.outline_size : 0}px`
+const outline_color = appearanceStore.text.outline_color
+
 const overlay_main = ref(false)
 const overlay_page = ref(0)
 
@@ -100,6 +103,8 @@ html {
   font-size: v-bind(font_size);
   overflow-y: auto;
   max-height: calc(100vh - v-bind(outer_size));
+  -webkit-text-stroke: v-bind(outline_size) v-bind(outline_color);
+  paint-order: stroke fill;
 }
 
 .log-list::-webkit-scrollbar {

diff --git a/src/pages/settings/Appearance.vue b/src/pages/settings/Appearance.vue
@@ -98,6 +98,33 @@
             hide-details
           />
         </v-col>
+        <v-divider />
+
+        <v-col :cols="12" :md="12" class="pb-0">
+          <v-card>
+            <v-list-item :title="$t('settings.appearance.text.outline.enabled')">
+              <template #append>
+                <v-switch
+                  v-model="text.outline"
+                  color="primary"
+                  hide-details
+                  inset
+                />
+              </template>
+            </v-list-item>
+          </v-card>
+        </v-col>
+        <v-col :cols="12" :md="12">
+          <v-text-field
+            v-model="text.outline_size"
+            :disabled="!text.outline"
+            :label="$t('settings.appearance.text.outline.size')"
+            type="number"
+            suffix="px"
+            hide-details
+          />
+        </v-col>
+
         <v-divider />
         <v-col :cols="12" :md="12" class="pb-0">
           <v-card>
@@ -167,6 +194,17 @@
           </v-btn>
         </v-col>
         <v-divider />
+        <v-col :cols="12" :md="12" class="d-flex flex-no-wrap justify-space-between mt-1">
+          <v-card-title class="text-subtitle-1" :opacity="text.outline ? 100 : 50">
+            {{ $t('settings.appearance.text.outline.color') }}
+          </v-card-title>
+          <v-btn :color="text.outline_color" width="20vw" class="ma-2" flat>
+            <v-menu activator="parent" :close-on-content-click="false">
+              <v-color-picker v-model="text.outline_color" :modes="['hexa']" flat class="pa-2" />
+            </v-menu>
+          </v-btn>
+        </v-col>
+        <v-divider />
       </v-row>
       <v-row>
         <v-col :cols="12">

diff --git a/src/plugins/localization/en.ts b/src/plugins/localization/en.ts
@@ -100,6 +100,11 @@ export default {
         font_family: 'Font family',
         font_type: 'Type',
         font_size: 'Font Size',
+        outline: {
+          enabled: 'Text outline',
+          size: 'Text outline size',
+          color: 'Text outline color'
+        },
         fade: 'Fade text',
         fade_after: 'Fade text after',
         seconds: 'seconds',

diff --git a/src/plugins/localization/ja.ts b/src/plugins/localization/ja.ts
@@ -100,6 +100,11 @@ export default {
         font_family: 'フォント',
         font_type: 'タイプ',
         font_size: '文字の大きさ',
+        outline: {
+          enabled: 'テキスト輪郭',
+          size: 'テキスト輪郭の大きさ',
+          color: 'テキスト輪郭色'
+        },
         fade: 'フェード',
         fade_after: '〇〇秒後にフェード',
         fade_for: '〇〇秒間のフェード',

diff --git a/src/stores/appearance.ts b/src/stores/appearance.ts
@@ -28,6 +28,9 @@ export const useAppearanceStore = defineStore('appearance', () => {
         { style: 'italic', weight: '900' },
       ],
     },
+    outline: true,
+    outline_size: 0,
+    outline_color: '#6d6d6d',
     font_size: 64,
     enable_fade: true,
     hide_after: 10, // seconds