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

9 files changed, 44 insertions, 0 deletions

diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 127fea12f5..7018c20b9d 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/note.sub.vue b/src/client/app/desktop/views/components/note.sub.vue
index bd2dd1bc08..bfecef3eb2 100644
--- a/src/client/app/desktop/views/components/note.sub.vue
+++ b/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
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index bc9ac8f0b0..90454dbad9 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/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
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4ec4916e38..da5489ec4e 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/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 }); }
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 7edb5b8c16..d13861080c 100644
--- a/src/client/app/init.ts
+++ b/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');
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 0f7363b2aa..b951947f2a 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/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
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index e1a7aeb935..1d056c126d 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/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
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index aec06adee5..6f5d0ec486 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/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) {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index d25a577dab..b79a32b3da 100644
--- a/src/client/app/store.ts
+++ b/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,