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

This commit is contained in:
syuilo 2019-03-01 08:08:08 +09:00
parent 9a9fb37a78
commit d83efecc94
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
10 changed files with 50 additions and 0 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -97,6 +97,14 @@
<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio> <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> <ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
</section> </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="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch> <ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
<ui-switch v-model="showFullAcct">{{ $t('@.show-full-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 }); } 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: { fetchOnScroll: {
get() { return this.$store.state.settings.fetchOnScroll; }, get() { return this.$store.state.settings.fetchOnScroll; },
set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); } set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }

View file

@ -410,6 +410,15 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
}); });
//#endregion //#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', () => { document.addEventListener('visibilitychange', () => {
if (!document.hidden) { if (!document.hidden) {
os.store.commit('clearBehindNotes'); os.store.commit('clearBehindNotes');

View file

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

View file

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

View file

@ -24,6 +24,14 @@
<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio> <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> <ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
</section> </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="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch> <ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
<ui-switch v-model="showFullAcct">{{ $t('@.show-full-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 }); } 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: { contrastedAcct: {
get() { return this.$store.state.settings.contrastedAcct; }, get() { return this.$store.state.settings.contrastedAcct; },
set(value) { set(value) {

View file

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