tweak: Pari Plus! add default font settings

paricafe · Oct 25, 2024 · 0a8f68e · 0a8f68e
1 parent b49277f
commit 0a8f68e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 45 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -1285,6 +1285,7 @@ timeTravel: "Time Travel"
 timeTravelDescription: "Show posts before this date."
 pariPlusNoteSettings: "Pari Plus! note settings"
 pariPlusAppearanceSettings: "Pari Plus! appearance settings"
+pariPlusFontPicker: "Default fonts"
 autoTranslateButton: "Display translation function on notes in different languages"
 showDetailTimeWhenHover: "Hover the timestamp of the note to expand the detailed time"
 noteClickToOpen: "Click to open note details"

diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
@@ -1294,6 +1294,7 @@ timeTravel: "时光机"
 timeTravelDescription: "显示该日期以前的帖子"
 pariPlusNoteSettings: "Pari Plus! 帖文设置"
 pariPlusAppearanceSettings: "Pari Plus! 外观设置"
+pariPlusFontPicker: "默认字体"
 autoTranslateButton: "在不同语言的帖文上显示翻译功能"
 showDetailTimeWhenHover: "悬浮/长按帖文时间戳时，展开详细时间"
 noteClickToOpen: "点击展开帖文详情"

diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
@@ -1294,6 +1294,7 @@ timeTravel: "時光機"
 timeTravelDescription: "回到指定的日期"
 pariPlusNoteSettings: "Pari Plus! 貼文設定"
 pariPlusAppearanceSettings: "Pari Plus! 外觀設定"
+pariPlusFontPicker: "預設字體"
 autoTranslateButton: "在不同語言的貼文上顯示翻譯功能"
 showDetailTimeWhenHover: "長按貼文時間戳記時展開詳細時間"
 noteClickToOpen: "點擊展開貼文詳情"

diff --git a/packages/frontend/src/pages/settings/pari.vue b/packages/frontend/src/pages/settings/pari.vue
@@ -4,52 +4,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-	<div class="_gaps_m">
+	<FormSection>
 		<div class="label">{{ i18n.ts.pariPlusAppearanceSettings }}</div>
-		<div class="_gaps_s">
-			<MkSelect v-model="defaultFont.fontFace">
-				<template #label>Font face</template>
-				<template #caption>
-					Default font
-				</template>
-				<option
-					v-for="item in defaultFont.fontList"
-					:key="item.id"
-					:value="item.id"
-				>
-					{{ item.name }}
-				</option>
+		<div class="_gaps_m">
+			<div class="_gaps_s">
+				<MkSelect v-model="defaultFont.fontFace">
+					<template #label>{{ i18n.ts.pariPlusFontPicker }}</template>
+					<template #caption>
+						Testing feature, may cause slow loading.
+					</template>
+					<option
+						v-for="item in defaultFont.fontList"
+						:key="item.id"
+						:value="item.id"
+					>
+						{{ item.name }}
+					</option>
+				</MkSelect>
+				<MkRadios v-if="defaultFont.availableTypes.length > 0" v-model="defaultFont.fontFaceType">
+					<template #label>{{ i18n.ts.appearance }}</template>
+					<option
+						v-for="item in defaultFont.availableTypes"
+						:key="item.id"
+						:value="item.id"
+					>
+						{{ item.name }}
+					</option>
+				</MkRadios>
+			</div>
+		</div>
+	</FormSection>
+
+	<FormSection>
+		<div class="_gaps_m">
+			<div class="label">{{ i18n.ts.pariPlusNoteSettings }}</div>
+			<MkSwitch v-model="autoTranslateButton">{{ i18n.ts.autoTranslateButton }}</MkSwitch>
+			<MkSwitch v-model="showDetailTimeWhenHover">{{ i18n.ts.showDetailTimeWhenHover }}</MkSwitch>
+			<MkSwitch v-model="noteClickToOpen">{{ i18n.ts.noteClickToOpen }}</MkSwitch>
+			<MkSwitch v-model="enableFallbackReactButton">{{ i18n.ts.enableFallbackReactButton }}</MkSwitch>
+			<MkSwitch v-model="enableMFMCheatsheet">{{ i18n.ts.enableMFMCheatsheet }}</MkSwitch>
+			<MkSelect v-model="autoSpacingBehaviour">
+				<template #label>{{ i18n.ts.autoSpacing }}</template>
+				<option :value="null">{{ i18n.ts.disabled }}</option>
+				<option value="special">Auto</option>
+				<option value="all">{{ i18n.ts.all }}</option>
+				<template #caption>{{ i18n.ts.autoSpacingDescription }}</template>
 			</MkSelect>
-			<MkRadios v-if="defaultFont.availableTypes.length > 0" v-model="defaultFont.fontFaceType">
-				<template #label>Testing feature, may cause slow loading.</template>
-				<template #caption>
-					Properties
-				</template>
-				<option
-					v-for="item in defaultFont.availableTypes"
-					:key="item.id"
-					:value="item.id"
-				>
-					{{ item.name }}
-				</option>
-			</MkRadios>
-        </div>
-    </div>
-	<div class="_gaps_m">
-		<div class="label">{{ i18n.ts.pariPlusNoteSettings }}</div>
-		<MkSwitch v-model="autoTranslateButton">{{ i18n.ts.autoTranslateButton }}</MkSwitch>
-		<MkSwitch v-model="showDetailTimeWhenHover">{{ i18n.ts.showDetailTimeWhenHover }}</MkSwitch>
-		<MkSwitch v-model="noteClickToOpen">{{ i18n.ts.noteClickToOpen }}</MkSwitch>
-		<MkSwitch v-model="enableFallbackReactButton">{{ i18n.ts.enableFallbackReactButton }}</MkSwitch>
-		<MkSwitch v-model="enableMFMCheatsheet">{{ i18n.ts.enableMFMCheatsheet }}</MkSwitch>
-		<MkSelect v-model="autoSpacingBehaviour">
-			<template #label>{{ i18n.ts.autoSpacing }}</template>
-			<option :value="null">{{ i18n.ts.disabled }}</option>
-			<option value="special">Auto</option>
-			<option value="all">{{ i18n.ts.all }}</option>
-			<template #caption>{{ i18n.ts.autoSpacingDescription }}</template>
-		</MkSelect>
-    </div>
+		</div>
+	</FormSection>
 </template>
 
 <script lang="ts" setup>

diff --git a/packages/frontend/src/scripts/font-settings.ts b/packages/frontend/src/scripts/font-settings.ts
@@ -54,7 +54,7 @@ function getFontId(name: string, option: string) {
 
 export function getDefaultFontSettings() {
 	const def_arr = miLocalStorage.getItem('defaultFontFace')?.split('_');
-	const fontFace = ref(def_arr?.[0] ?? 'maokentangyuan');
+	const fontFace = ref(def_arr?.[0] ?? 'system-ui');
 	const fontFaceType = ref(def_arr?.[1] ?? '');
 	const availableTypes = computed(() => getFontOptionsList(fontFace.value));