diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index ddc953a05..599a71fc7 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -156,6 +156,12 @@ common: line-width-thin: "細い" line-width-normal: "普通" line-width-thick: "太い" + font-size: "文字の大きさ" + font-size-x-small: "小さい" + font-size-small: "少し小さい" + font-size-medium: "普通" + font-size-large: "少し大きい" + font-size-x-large: "大きい" hide-password: "パスワードを隠す" show-password: "パスワードを表示する" diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue index 127fea12f..7018c20b9 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 + diff --git a/src/client/app/desktop/views/components/note.sub.vue b/src/client/app/desktop/views/components/note.sub.vue index bd2dd1bc0..bfecef3eb 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 bc9ac8f0b..90454dbad 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 4ec4916e3..da5489ec4 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -97,6 +97,14 @@ {{ $t('@.line-width-normal') }} {{ $t('@.line-width-thick') }} +
+
{{ $t('@.font-size') }}
+ {{ $t('@.font-size-x-small') }} + {{ $t('@.font-size-small') }} + {{ $t('@.font-size-medium') }} + {{ $t('@.font-size-large') }} + {{ $t('@.font-size-x-large') }} +
{{ $t('@.reduce-motion') }} {{ $t('@.contrasted-acct') }} {{ $t('@.show-full-acct') }} @@ -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 7edb5b8c1..d13861080 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 0f7363b2a..b951947f2 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 e1a7aeb93..1d056c126 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 aec06adee..6f5d0ec48 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -24,6 +24,14 @@ {{ $t('@.line-width-normal') }} {{ $t('@.line-width-thick') }} +
+
{{ $t('@.font-size') }}
+ {{ $t('@.font-size-x-small') }} + {{ $t('@.font-size-small') }} + {{ $t('@.font-size-medium') }} + {{ $t('@.font-size-large') }} + {{ $t('@.font-size-x-large') }} +
{{ $t('@.reduce-motion') }} {{ $t('@.contrasted-acct') }} {{ $t('@.show-full-acct') }} @@ -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 d25a577da..b79a32b3d 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,