feat(client): フォントサイズをより簡単に変更できるよう

CHANGELOG_CHERRYPICK.md

@@ -34,6 +34,7 @@
 - 리액션 버튼 디자인 개선
 - 새 글꼴 크기 추가
 - 위젯 편집 시 버튼의 디자인 개선
+- 글꼴 크기를 보다 쉽게 변경할 수 있도록
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제
 - Fix: 위젯 편집 종료 버튼이 여러 개 있는 문제

locales/en-US.yml

@@ -744,6 +744,7 @@ center: "Center"
 wide: "Wide"
 narrow: "Narrow"
 reloadToApplySetting: "This setting will only apply after a page reload. Reload now?"
+reloadToApplySetting2: "This setting will only apply after a page reload."
 needReloadToApply: "A reload is required for this to be reflected."
 showTitlebar: "Show title bar"
 clearCache: "Clear cache"

locales/index.d.ts

@@ -749,6 +749,7 @@ export interface Locale {
     "wide": string;
     "narrow": string;
     "reloadToApplySetting": string;
+    "reloadToApplySetting2": string;
     "needReloadToApply": string;
     "showTitlebar": string;
     "clearCache": string;

locales/ja-JP.yml

@@ -746,6 +746,7 @@ center: "中央"
 wide: "広い"
 narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されます。今すぐリロードしますか？"
+reloadToApplySetting2: "設定はページリロード後に反映されます。"
 needReloadToApply: "反映には再起動が必要です。"
 showTitlebar: "タイトルバーを表示する"
 clearCache: "キャッシュをクリア"

locales/ko-KR.yml

@@ -745,6 +745,7 @@ center: "가운데"
 wide: "넓게"
 narrow: "좁게"
 reloadToApplySetting: "이 설정을 적용하려면 페이지를 다시 불러와야 해요. 지금 페이지를 새로 고칠까요?"
+reloadToApplySetting2: "이 설정을 적용하려면 페이지를 다시 불러와야 해요."
 needReloadToApply: "변경 사항은 페이지를 다시 불러오면 적용돼요."
 showTitlebar: "타이틀 바를 표시하기"
 clearCache: "캐시 비우기"

packages/frontend/src/pages/settings/general.vue

@@ -120,6 +120,7 @@
 				<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
 			</div>
 
+			<!--
 			<MkRadios v-model="fontSize">
 				<template #label>{{ i18n.ts.fontSize }}</template>
 				<option value="1"><span style="font-size: 12px;">Aa</span></option>
@@ -132,6 +133,57 @@
 				<option value="7"><span style="font-size: 19px;">Aa</span></option>
 				<option value="8"><span style="font-size: 20px;">Aa</span></option>
 			</MkRadios>
+			-->
+
+			<div>
+				<div class="label">{{ i18n.ts.fontSize }}</div>
+				<div class="fontSize _panel">
+					<div v-if="fontSize === 1" style="font-size: 7px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 2" style="font-size: 8px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 3" style="font-size: 9px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 4" style="font-size: 10px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 5" style="font-size: 11px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 6" style="font-size: 12px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 7" style="font-size: 13px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 8" style="font-size: 14px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 9" style="font-size: 15px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 10" style="font-size: 16px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 11" style="font-size: 17px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 12" style="font-size: 18px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 13" style="font-size: 19px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 14" style="font-size: 20px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 15" style="font-size: 21px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 16" style="font-size: 22px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 17" style="font-size: 23px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 18" style="font-size: 24px;">{{ i18n.ts._mfm.dummy }}</div>
+					<div v-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div>
+				</div>
+				<div class="fontSize_slider">
+					<MkRange v-model="fontSize" :min="1" :max="19" :step="1" easing :textConverter="(v) =>
+						v === 1 ? '7px' :
+						v === 2 ? '8px' :
+						v === 3 ? '9px' :
+						v === 4 ? '10px' :
+						v === 5 ? '11px' :
+						v === 6 ? '12px' :
+						v === 7 ? '13px' :
+						v === 8 ? '14px' :
+						v === 9 ? '15px' :
+						v === 10 ? '16px' :
+						v === 11 ? '17px' :
+						v === 12 ? '18px' :
+						v === 13 ? '19px' :
+						v === 14 ? '20px' :
+						v === 15 ? '21px' :
+						v === 16 ? '22px' :
+						v === 17 ? '23px' :
+						v === 18 ? '24px' :
+						v === 19 ? '25px' : ''"
+					>
+					</MkRange>
+				</div>
+				<MkInfo v-if="fontSize != fontSizeBefore" style="margin-top: 15px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo>
+			</div>
 		</div>
 	</FormSection>
 
@@ -176,7 +228,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
@@ -191,11 +243,14 @@ import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { miLocalStorage } from '@/local-storage';
+import MkInfo from "@/components/MkInfo.vue";
 
 const lang = ref(miLocalStorage.getItem('lang'));
-const fontSize = ref(miLocalStorage.getItem('fontSize'));
+// const fontSize = ref(miLocalStorage.getItem('fontSize'));
 const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
 
+const fontSizeBefore = ref(miLocalStorage.getItem('fontSize'));
+
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
 		type: 'info',
@@ -240,6 +295,7 @@ const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimeline
 const useEnterToSend = computed(defaultStore.makeGetterSetter('useEnterToSend'));
 const postFormVisibilityHotkey = computed(defaultStore.makeGetterSetter('postFormVisibilityHotkey'));
 const newNoteRecivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteRecivedNotificationBehavior'));
+const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -250,7 +306,7 @@ watch(fontSize, () => {
 	if (fontSize.value == null) {
 		miLocalStorage.removeItem('fontSize');
 	} else {
-		miLocalStorage.setItem('fontSize', fontSize.value);
+		miLocalStorage.setItem('fontSize', fontSize.value as string);
 	}
 });
 
@@ -266,7 +322,7 @@ watch([
 	lang,
 	animatedMfm,
 	useBlurEffect,
-	fontSize,
+	// fontSize,
 	useSystemFont,
 	enableInfiniteScroll,
 	squareAvatars,
@@ -278,6 +334,12 @@ watch([
 	await reloadAsk();
 });
 
+onMounted(() => {
+	if (fontSizeBefore.value == null) {
+		fontSizeBefore.value = fontSize.value as string;
+	}
+});
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
@@ -287,3 +349,22 @@ definePageMetadata({
 	icon: 'ti ti-adjustments',
 });
 </script>
+
+<style lang="scss" scoped>
+.label {
+	font-size: 0.85em;
+	padding: 0 0 8px 0;
+	user-select: none;
+}
+
+.fontSize {
+	padding: 20px 20px 28px;
+	border-radius: 6px;
+	text-align: center;
+}
+
+.fontSize_slider {
+	margin-top: -8px;
+	border-top: solid .5px var(--divider);
+}
+</style>

packages/frontend/src/store.ts

@@ -351,6 +351,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'count' as 'default' | 'count' | 'none',
 	},
+	fontSize: {
+		where: 'device',
+		default: 8,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期