From d21d38509c757951c16b1d62cf78b8924c411cfb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 15 Feb 2020 03:44:40 +0900
Subject: [PATCH] Font size setting

---
 CHANGELOG.md                          |  1 +
 locales/ja-JP.yml                     |  1 +
 src/client/pages/settings/general.vue | 19 +++++++++++++++++++
 src/client/style.scss                 | 12 ++++++++++++
 src/server/web/views/base.pug         |  5 +++++
 5 files changed, 38 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92d0cc5da..b53eaf93c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ unreleased
 * アンテナの受信ソースにグループを指定できるように
 * 時計ウィジェットを追加
 * ログアウトせずに新しいアカウントを追加できるように
+* フォントサイズを設定できるように
 * APIキー設定を実装
 
 ### 🐛Fixes
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a5ad1539d..b1db6b257 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -400,6 +400,7 @@ docSource: "このドキュメントのソース"
 createAccount: "アカウントを作成"
 existingAcount: "既存のアカウント"
 regenerate: "再生成"
+fontSize: "フォントサイズ"
 
 _ago:
   unknown: "謎"
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index f119fb684..6ebda9efe 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -37,6 +37,13 @@
 			<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
 		</mk-select>
 	</div>
+	<div class="_content">
+		<div>{{ $t('fontSize') }}</div>
+		<mk-radio v-model="fontSize" value="small"><span style="font-size: 14px;">Aa</span></mk-radio>
+		<mk-radio v-model="fontSize" :value="null"><span style="font-size: 16px;">Aa</span></mk-radio>
+		<mk-radio v-model="fontSize" value="large"><span style="font-size: 18px;">Aa</span></mk-radio>
+		<mk-radio v-model="fontSize" value="veryLarge"><span style="font-size: 20px;">Aa</span></mk-radio>
+	</div>
 </section>
 </template>
 
@@ -47,6 +54,7 @@ import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import MkSelect from '../../components/ui/select.vue';
+import MkRadio from '../../components/ui/radio.vue';
 import i18n from '../../i18n';
 import { apiUrl, langs } from '../../config';
 
@@ -58,12 +66,14 @@ export default Vue.extend({
 		MkButton,
 		MkSwitch,
 		MkSelect,
+		MkRadio,
 	},
 	
 	data() {
 		return {
 			langs,
 			lang: localStorage.getItem('lang'),
+			fontSize: localStorage.getItem('fontSize'),
 			wallpaperUploading: false,
 			faImage, faCog
 		}
@@ -101,6 +111,15 @@ export default Vue.extend({
 			localStorage.setItem('lang', this.lang);
 			localStorage.removeItem('locale');
 			location.reload();
+		},
+
+		fontSize() {
+			if (this.fontSize == null) {
+				localStorage.removeItem('fontSize');
+			} else {
+				localStorage.setItem('fontSize', this.fontSize);
+			}
+			location.reload();
 		}
 	},
 
diff --git a/src/client/style.scss b/src/client/style.scss
index b1c6c9b0b..b3891314c 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -58,6 +58,18 @@ html {
 			}
 		}
 	}
+
+	&.f-small {
+		font-size: 0.9em;
+	}
+
+	&.f-large {
+		font-size: 1.1em;
+	}
+
+	&.f-veryLarge {
+		font-size: 1.2em;
+	}
 }
 
 html.changing-theme {
diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 7ca196a34..94f5a8e0e 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -48,6 +48,11 @@ html
 				}
 			}
 
+			const fontSize = localStorage.getItem('fontSize');
+			if (fontSize) {
+				document.documentElement.classList.add('f-' + fontSize);
+			}
+
 	body
 		noscript: p
 			| JavaScriptを有効にしてください