Font size setting

This commit is contained in:
syuilo 2020-02-15 03:44:40 +09:00
parent a59e1c0345
commit d21d38509c
5 changed files with 38 additions and 0 deletions

View File

@ -7,6 +7,7 @@ unreleased
* アンテナの受信ソースにグループを指定できるように * アンテナの受信ソースにグループを指定できるように
* 時計ウィジェットを追加 * 時計ウィジェットを追加
* ログアウトせずに新しいアカウントを追加できるように * ログアウトせずに新しいアカウントを追加できるように
* フォントサイズを設定できるように
* APIキー設定を実装 * APIキー設定を実装
### 🐛Fixes ### 🐛Fixes

View File

@ -400,6 +400,7 @@ docSource: "このドキュメントのソース"
createAccount: "アカウントを作成" createAccount: "アカウントを作成"
existingAcount: "既存のアカウント" existingAcount: "既存のアカウント"
regenerate: "再生成" regenerate: "再生成"
fontSize: "フォントサイズ"
_ago: _ago:
unknown: "謎" unknown: "謎"

View File

@ -37,6 +37,13 @@
<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</mk-select> </mk-select>
</div> </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> </section>
</template> </template>
@ -47,6 +54,7 @@ import MkInput from '../../components/ui/input.vue';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue'; import MkSwitch from '../../components/ui/switch.vue';
import MkSelect from '../../components/ui/select.vue'; import MkSelect from '../../components/ui/select.vue';
import MkRadio from '../../components/ui/radio.vue';
import i18n from '../../i18n'; import i18n from '../../i18n';
import { apiUrl, langs } from '../../config'; import { apiUrl, langs } from '../../config';
@ -58,12 +66,14 @@ export default Vue.extend({
MkButton, MkButton,
MkSwitch, MkSwitch,
MkSelect, MkSelect,
MkRadio,
}, },
data() { data() {
return { return {
langs, langs,
lang: localStorage.getItem('lang'), lang: localStorage.getItem('lang'),
fontSize: localStorage.getItem('fontSize'),
wallpaperUploading: false, wallpaperUploading: false,
faImage, faCog faImage, faCog
} }
@ -101,6 +111,15 @@ export default Vue.extend({
localStorage.setItem('lang', this.lang); localStorage.setItem('lang', this.lang);
localStorage.removeItem('locale'); localStorage.removeItem('locale');
location.reload(); location.reload();
},
fontSize() {
if (this.fontSize == null) {
localStorage.removeItem('fontSize');
} else {
localStorage.setItem('fontSize', this.fontSize);
}
location.reload();
} }
}, },

View File

@ -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 { html.changing-theme {

View File

@ -48,6 +48,11 @@ html
} }
} }
const fontSize = localStorage.getItem('fontSize');
if (fontSize) {
document.documentElement.classList.add('f-' + fontSize);
}
body body
noscript: p noscript: p
| JavaScriptを有効にしてください | JavaScriptを有効にしてください