feat(client): アカウント初期設定ウィザードにフォントサイズ設定を追加

CHANGELOG_CHERRYPICK.md

@@ -27,6 +27,7 @@
 - 계정 초기 설정 마법사 개선
   - 뒤로 가기 버튼 추가
   - 나중에 버튼 추가
+  - 글자 크기 설정 추가
   - 흐림 효과 설정 추가
   - MFM 및 움직이는 이미지 설정 추가
   - 초기 설정을 완료하면 페이지를 새로 고치도록 (일부 옵션이 페이지를 새로 고쳐야만 반영되므로)

locales/en-US.yml

@@ -1085,6 +1085,7 @@ _initialAccountSetting:
   letsFillYourProfile: "First, let's set up your profile."
   profileSetting: "Profile settings"
   privacySetting: "Privacy settings"
+  fontSizeSetting: "Font size settings"
   blurEffectsSetting: "Blur effects settings"
   mfmAndAnimatedImagesSetting: "MFM and Animated images settings"
   theseSettingsCanEditLater: "You can always change these settings later."

locales/index.d.ts

@@ -1104,6 +1104,7 @@ export interface Locale {
         "letsFillYourProfile": string;
         "profileSetting": string;
         "privacySetting": string;
+        "fontSizeSetting": string;
         "blurEffectsSetting": string;
         "mfmAndAnimatedImagesSetting": string;
         "theseSettingsCanEditLater": string;

locales/ja-JP.yml

@@ -1102,6 +1102,7 @@ _initialAccountSetting:
   letsFillYourProfile: "まずはあなたのプロフィールを設定しましょう。"
   profileSetting: "プロフィール設定"
   privacySetting: "プライバシー設定"
+  fontSizeSetting: "フォントサイズ設定"
   blurEffectsSetting: "ぼかし効果設定"
   mfmAndAnimatedImagesSetting: "MFMとアニメーション画像設定"
   theseSettingsCanEditLater: "これらの設定は後から変更できます。"

locales/ko-KR.yml

@@ -1084,6 +1084,7 @@ _initialAccountSetting:
   letsFillYourProfile: "우선 나의 프로필을 설정해 보아요."
   profileSetting: "프로필 설정"
   privacySetting: "프라이버시 설정"
+  fontSizeSetting: "글자 크기 설정"
   blurEffectsSetting: "흐림 효과 설정"
   mfmAndAnimatedImagesSetting: "MFM 및 움직이는 이미지 설정"
   theseSettingsCanEditLater: "이 설정들은 나중에도 변경할 수 있어요."

packages/frontend/src/components/MkUserSetupDialog.FontSize.stories.impl.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import MkUserSetupDialog_FontSize from './MkUserSetupDialog.FontSize.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkUserSetupDialog_FontSize,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkUserSetupDialog_FontSize v-bind="props" />',
+		};
+	},
+	args: {
+		
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkUserSetupDialog_FontSize>;

packages/frontend/src/components/MkUserSetupDialog.FontSize.vue

@@ -0,0 +1,127 @@
+<template>
+<div class="_gaps">
+	<MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo>
+
+	<div>
+		<div :class="$style.fontSize" class="_panel">
+			<div v-if="fontSize === 1" style="font-size: 7px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 2" style="font-size: 8px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 3" style="font-size: 9px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 4" style="font-size: 10px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 5" style="font-size: 11px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 6" style="font-size: 12px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 7" style="font-size: 13px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 8" style="font-size: 14px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 9" style="font-size: 15px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 10" style="font-size: 16px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 11" style="font-size: 17px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 12" style="font-size: 18px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 13" style="font-size: 19px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 14" style="font-size: 20px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 15" style="font-size: 21px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 16" style="font-size: 22px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 17" style="font-size: 23px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 18" style="font-size: 24px;">{{ i18n.ts._mfm.dummy }}</div>
+			<div v-else-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div>
+		</div>
+		<div :class="$style.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: 10px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo>
+		<MkSwitch v-model="useBoldFont" style="margin-top: .75em;">{{ i18n.ts.useBoldFont }}</MkSwitch>
+	</div>
+
+	<MkInfo>{{ i18n.ts._initialAccountSetting.youCanEditMoreSettingsInSettingsPageLater }}</MkInfo>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkRange from "@/components/MkRange.vue";
+import * as os from '@/os';
+import { $i } from '@/account';
+import { defaultStore } from "@/store";
+import { miLocalStorage } from "@/local-storage";
+import {unisonReload} from "@/scripts/unison-reload";
+
+const fontSizeBefore = ref(miLocalStorage.getItem('fontSize'));
+const useBoldFont = ref(miLocalStorage.getItem('useBoldFont'));
+
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
+
+watch(fontSize, () => {
+	if (fontSize.value == null) {
+		miLocalStorage.removeItem('fontSize');
+	} else {
+		miLocalStorage.setItem('fontSize', fontSize.value as string);
+	}
+});
+
+watch(useBoldFont, () => {
+	if (useBoldFont.value) {
+		miLocalStorage.setItem('useBoldFont', useBoldFont.value);
+	} else {
+		miLocalStorage.removeItem('useBoldFont');
+	}
+});
+
+watch([
+	useBoldFont,
+], async () => {
+	await reloadAsk();
+});
+
+onMounted(() => {
+	if (fontSizeBefore.value == null) {
+		fontSizeBefore.value = fontSize.value as string;
+	}
+});
+</script>
+
+<style lang="scss" module>
+.fontSize {
+	padding: 20px;
+	border-radius: 6px;
+	text-align: center;
+	background: var(--bg);
+}
+
+.fontSize_slider {
+	margin-top: 8px;
+}
+</style>

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -9,16 +9,17 @@
 >
 	<template v-if="page === 1" #header><i class="ti ti-user-edit"></i> {{ i18n.ts._initialAccountSetting.profileSetting }}</template>
 	<template v-else-if="page === 2" #header><i class="ti ti-lock"></i> {{ i18n.ts._initialAccountSetting.privacySetting }}</template>
-	<template v-else-if="page === 3" #header><i class="ti ti-blur"></i> {{ i18n.ts._initialAccountSetting.blurEffectsSetting }}</template>
-	<template v-else-if="page === 4" #header><i class="ti ti-mood-happy"></i> {{ i18n.ts._initialAccountSetting.mfmAndAnimatedImagesSetting }}</template>
-	<template v-else-if="page === 5" #header><i class="ti ti-user-plus"></i> {{ i18n.ts.follow }}</template>
-	<template v-else-if="page === 6" #header><i class="ti ti-bell-plus"></i> {{ i18n.ts.pushNotification }}</template>
-	<template v-else-if="page === 7" #header>{{ i18n.ts.done }}</template>
+	<template v-else-if="page === 3" #header><i class="ti ti-text-size"></i> {{ i18n.ts._initialAccountSetting.fontSizeSetting }}</template>
+	<template v-else-if="page === 4" #header><i class="ti ti-blur"></i> {{ i18n.ts._initialAccountSetting.blurEffectsSetting }}</template>
+	<template v-else-if="page === 5" #header><i class="ti ti-mood-happy"></i> {{ i18n.ts._initialAccountSetting.mfmAndAnimatedImagesSetting }}</template>
+	<template v-else-if="page === 6" #header><i class="ti ti-user-plus"></i> {{ i18n.ts.follow }}</template>
+	<template v-else-if="page === 7" #header><i class="ti ti-bell-plus"></i> {{ i18n.ts.pushNotification }}</template>
+	<template v-else-if="page === 8" #header>{{ i18n.ts.done }}</template>
 	<template v-else #header>{{ i18n.ts.initialAccountSetting }}</template>
 
 	<div style="overflow-x: clip;">
 		<div :class="$style.progressBar">
-			<div :class="$style.progressBarValue" :style="{ width: `${(page / 7) * 100}%` }"></div>
+			<div :class="$style.progressBarValue" :style="{ width: `${(page / 8) * 100}%` }"></div>
 		</div>
 		<Transition
 			mode="out-in"
@@ -66,7 +67,7 @@
 			<template v-else-if="page === 3">
 				<div style="height: 100cqh; overflow: auto;">
 					<MkSpacer :marginMin="20" :marginMax="28">
-						<XBlur/>
+						<XFontSize/>
 						<div class="_buttonsCenter" style="margin-top: 16px;">
 							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
 							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
@@ -77,7 +78,7 @@
 			<template v-else-if="page === 4">
 				<div style="height: 100cqh; overflow: auto;">
 					<MkSpacer :marginMin="20" :marginMax="28">
-						<XMfm/>
+						<XBlur/>
 						<div class="_buttonsCenter" style="margin-top: 16px;">
 							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
 							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
@@ -86,6 +87,17 @@
 				</div>
 			</template>
 			<template v-else-if="page === 5">
+				<div style="height: 100cqh; overflow: auto;">
+					<MkSpacer :marginMin="20" :marginMax="28">
+						<XMfm/>
+						<div class="_buttonsCenter" style="margin-top: 16px;">
+							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 6">
 				<div style="height: 100cqh; overflow: auto;">
 					<MkSpacer :marginMin="20" :marginMax="28">
 						<XFollow/>
@@ -98,7 +110,7 @@
 					</div>
 				</div>
 			</template>
-			<template v-else-if="page === 6">
+			<template v-else-if="page === 7">
 				<div :class="$style.centerPage">
 					<MkSpacer :marginMin="20" :marginMax="28">
 						<div class="_gaps" style="text-align: center;">
@@ -114,7 +126,7 @@
 					</MkSpacer>
 				</div>
 			</template>
-			<template v-else-if="page === 7">
+			<template v-else-if="page === 8">
 				<div :class="$style.centerPage">
 					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
 					<MkSpacer :marginMin="20" :marginMax="28">
@@ -148,6 +160,7 @@ import MkButton from '@/components/MkButton.vue';
 import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
 import XFollow from '@/components/MkUserSetupDialog.Follow.vue';
 import XPrivacy from '@/components/MkUserSetupDialog.Privacy.vue';
+import XFontSize from '@/components/MkUserSetupDialog.FontSize.vue';
 import XBlur from '@/components/MkUserSetupDialog.Blur.vue';
 import XMfm from '@/components/MkUserSetupDialog.MisskeyFlavoredMarkdown.vue';
 import MkAnimBg from '@/components/MkAnimBg.vue';