文字サイズを設定できるように

locales/ja-JP.yml

@@ -156,6 +156,12 @@ common:
   line-width-thin: "細い"
   line-width-normal: "普通"
   line-width-thick: "太い"
+  font-size: "文字の大きさ"
+  font-size-x-small: "小さい"
+  font-size-small: "少し小さい"
+  font-size-medium: "普通"
+  font-size-large: "少し大きい"
+  font-size-x-large: "大きい"
   hide-password: "パスワードを隠す"
   show-password: "パスワードを表示する"
 

src/client/app/common/views/components/ui/card.vue

@@ -58,4 +58,8 @@ export default Vue.extend({
 			margin-bottom 16px
 			font-weight bold
 			color var(--faceText)
+
+		> section
+			margin 16px 0
+
 </style>

src/client/app/desktop/views/components/note.sub.vue

@@ -97,6 +97,7 @@ export default Vue.extend({
 					margin 0
 					padding 0
 					color var(--subNoteText)
+					font-size calc(1em + var(--fontSize))
 
 					pre
 						max-height 120px

src/client/app/desktop/views/components/note.vue

@@ -238,6 +238,7 @@ export default Vue.extend({
 						padding 0
 						overflow-wrap break-word
 						color var(--noteText)
+						font-size calc(1em + var(--fontSize))
 
 						> .reply
 							margin-right 8px

src/client/app/desktop/views/components/settings.vue

@@ -97,6 +97,14 @@
 					<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio>
 					<ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
 				</section>
+				<section>
+					<header>{{ $t('@.font-size') }}</header>
+					<ui-radio v-model="fontSize" :value="-2">{{ $t('@.font-size-x-small') }}</ui-radio>
+					<ui-radio v-model="fontSize" :value="-1">{{ $t('@.font-size-small') }}</ui-radio>
+					<ui-radio v-model="fontSize" :value="0">{{ $t('@.font-size-medium') }}</ui-radio>
+					<ui-radio v-model="fontSize" :value="1">{{ $t('@.font-size-large') }}</ui-radio>
+					<ui-radio v-model="fontSize" :value="2">{{ $t('@.font-size-x-large') }}</ui-radio>
+				</section>
 				<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
 				<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
 				<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
@@ -401,6 +409,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
 		},
 
+		fontSize: {
+			get() { return this.$store.state.device.fontSize; },
+			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
+		},
+
 		fetchOnScroll: {
 			get() { return this.$store.state.settings.fetchOnScroll; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }

src/client/app/init.ts

@@ -410,6 +410,15 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 			});
 			//#endregion
 
+			//#region fontSize
+			document.documentElement.style.setProperty('--fontSize', `${os.store.state.device.fontSize}px`);
+			os.store.watch(s => {
+				return s.device.fontSize;
+			}, v => {
+				document.documentElement.style.setProperty('--fontSize', `${os.store.state.device.fontSize}px`);
+			});
+			//#endregion
+
 			document.addEventListener('visibilitychange', () => {
 				if (!document.hidden) {
 					os.store.commit('clearBehindNotes');

src/client/app/mobile/views/components/note.sub.vue

@@ -115,6 +115,7 @@ export default Vue.extend({
 					margin 0
 					padding 0
 					color var(--subNoteText)
+					font-size calc(1em + var(--fontSize))
 
 					pre
 						max-height 120px

src/client/app/mobile/views/components/note.vue

@@ -192,6 +192,7 @@ export default Vue.extend({
 						padding 0
 						overflow-wrap break-word
 						color var(--noteText)
+						font-size calc(1em + var(--fontSize))
 
 						> .reply
 							margin-right 8px

src/client/app/mobile/views/pages/settings.vue

@@ -24,6 +24,14 @@
 						<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio>
 						<ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
 					</section>
+					<section>
+						<header>{{ $t('@.font-size') }}</header>
+						<ui-radio v-model="fontSize" :value="-2">{{ $t('@.font-size-x-small') }}</ui-radio>
+						<ui-radio v-model="fontSize" :value="-1">{{ $t('@.font-size-small') }}</ui-radio>
+						<ui-radio v-model="fontSize" :value="0">{{ $t('@.font-size-medium') }}</ui-radio>
+						<ui-radio v-model="fontSize" :value="1">{{ $t('@.font-size-large') }}</ui-radio>
+						<ui-radio v-model="fontSize" :value="2">{{ $t('@.font-size-x-large') }}</ui-radio>
+					</section>
 					<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
 					<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
 					<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
@@ -319,6 +327,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
 		},
 
+		fontSize: {
+			get() { return this.$store.state.device.fontSize; },
+			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
+		},
+
 		contrastedAcct: {
 			get() { return this.$store.state.settings.contrastedAcct; },
 			set(value) {

src/client/app/store.ts

@@ -54,6 +54,7 @@ const defaultDeviceSettings = {
 	darkTheme: 'dark',
 	lightTheme: 'light',
 	lineWidth: 1,
+	fontSize: 0,
 	themes: [],
 	enableSounds: true,
 	soundVolume: 0.5,