diff --git a/CHANGELOG.md b/CHANGELOG.md index 92d0cc5da9..b53eaf93cf 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 a5ad1539d9..b1db6b257b 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 f119fb684f..6ebda9efeb 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -37,6 +37,13 @@ +
+
{{ $t('fontSize') }}
+ Aa + Aa + Aa + Aa +
@@ -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 b1c6c9b0b3..b3891314c0 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 7ca196a34c..94f5a8e0e2 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を有効にしてください