文字サイズを設定できるように
This commit is contained in:
syuilo
parent
9a9fb37a78
commit
d83efecc94
10 changed files with 50 additions and 0 deletions
|
|
@ -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: "パスワードを表示する"
|
||||
|
||||
|
|
|
|||
|
|
@ -58,4 +58,8 @@ export default Vue.extend({
|
|||
margin-bottom 16px
|
||||
font-weight bold
|
||||
color var(--faceText)
|
||||
|
||||
> section
|
||||
margin 16px 0
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -97,6 +97,14 @@
|
|||
<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>
|
||||
</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="contrastedAcct">{{ $t('@.contrasted-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 }); }
|
||||
},
|
||||
|
||||
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 }); }
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -24,6 +24,14 @@
|
|||
<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>
|
||||
</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="contrastedAcct">{{ $t('@.contrasted-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 }); }
|
||||
},
|
||||
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ const defaultDeviceSettings = {
|
|||
darkTheme: 'dark',
|
||||
lightTheme: 'light',
|
||||
lineWidth: 1,
|
||||
fontSize: 0,
|
||||
themes: [],
|
||||
enableSounds: true,
|
||||
soundVolume: 0.5,
|
||||
|
|
|
|||
Loading…
Reference in a new issue