|
|
|
@ -120,6 +120,7 @@
|
|
|
|
|
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
<MkRadios v-model="fontSize">
|
|
|
|
|
<template #label>{{ i18n.ts.fontSize }}</template>
|
|
|
|
|
<option value="1"><span style="font-size: 12px;">Aa</span></option>
|
|
|
|
@ -132,6 +133,57 @@
|
|
|
|
|
<option value="7"><span style="font-size: 19px;">Aa</span></option>
|
|
|
|
|
<option value="8"><span style="font-size: 20px;">Aa</span></option>
|
|
|
|
|
</MkRadios>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<div class="label">{{ i18n.ts.fontSize }}</div>
|
|
|
|
|
<div class="fontSize _panel">
|
|
|
|
|
<div v-if="fontSize === 1" style="font-size: 7px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 2" style="font-size: 8px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 3" style="font-size: 9px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 4" style="font-size: 10px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 5" style="font-size: 11px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 6" style="font-size: 12px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 7" style="font-size: 13px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 8" style="font-size: 14px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 9" style="font-size: 15px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 10" style="font-size: 16px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 11" style="font-size: 17px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 12" style="font-size: 18px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 13" style="font-size: 19px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 14" style="font-size: 20px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 15" style="font-size: 21px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 16" style="font-size: 22px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 17" style="font-size: 23px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 18" style="font-size: 24px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
<div v-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fontSize_slider">
|
|
|
|
|
<MkRange v-model="fontSize" :min="1" :max="19" :step="1" easing :textConverter="(v) =>
|
|
|
|
|
v === 1 ? '7px' :
|
|
|
|
|
v === 2 ? '8px' :
|
|
|
|
|
v === 3 ? '9px' :
|
|
|
|
|
v === 4 ? '10px' :
|
|
|
|
|
v === 5 ? '11px' :
|
|
|
|
|
v === 6 ? '12px' :
|
|
|
|
|
v === 7 ? '13px' :
|
|
|
|
|
v === 8 ? '14px' :
|
|
|
|
|
v === 9 ? '15px' :
|
|
|
|
|
v === 10 ? '16px' :
|
|
|
|
|
v === 11 ? '17px' :
|
|
|
|
|
v === 12 ? '18px' :
|
|
|
|
|
v === 13 ? '19px' :
|
|
|
|
|
v === 14 ? '20px' :
|
|
|
|
|
v === 15 ? '21px' :
|
|
|
|
|
v === 16 ? '22px' :
|
|
|
|
|
v === 17 ? '23px' :
|
|
|
|
|
v === 18 ? '24px' :
|
|
|
|
|
v === 19 ? '25px' : ''"
|
|
|
|
|
>
|
|
|
|
|
</MkRange>
|
|
|
|
|
</div>
|
|
|
|
|
<MkInfo v-if="fontSize != fontSizeBefore" style="margin-top: 15px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</FormSection>
|
|
|
|
|
|
|
|
|
@ -176,7 +228,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed, ref, watch } from 'vue';
|
|
|
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
|
|
|
import MkSwitch from '@/components/MkSwitch.vue';
|
|
|
|
|
import MkSelect from '@/components/MkSelect.vue';
|
|
|
|
|
import MkRadios from '@/components/MkRadios.vue';
|
|
|
|
@ -191,11 +243,14 @@ import { unisonReload } from '@/scripts/unison-reload';
|
|
|
|
|
import { i18n } from '@/i18n';
|
|
|
|
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
|
|
|
|
import { miLocalStorage } from '@/local-storage';
|
|
|
|
|
import MkInfo from "@/components/MkInfo.vue";
|
|
|
|
|
|
|
|
|
|
const lang = ref(miLocalStorage.getItem('lang'));
|
|
|
|
|
const fontSize = ref(miLocalStorage.getItem('fontSize'));
|
|
|
|
|
// const fontSize = ref(miLocalStorage.getItem('fontSize'));
|
|
|
|
|
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
|
|
|
|
|
|
|
|
|
|
const fontSizeBefore = ref(miLocalStorage.getItem('fontSize'));
|
|
|
|
|
|
|
|
|
|
async function reloadAsk() {
|
|
|
|
|
const { canceled } = await os.confirm({
|
|
|
|
|
type: 'info',
|
|
|
|
@ -240,6 +295,7 @@ const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimeline
|
|
|
|
|
const useEnterToSend = computed(defaultStore.makeGetterSetter('useEnterToSend'));
|
|
|
|
|
const postFormVisibilityHotkey = computed(defaultStore.makeGetterSetter('postFormVisibilityHotkey'));
|
|
|
|
|
const newNoteRecivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteRecivedNotificationBehavior'));
|
|
|
|
|
const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
|
|
|
|
|
|
|
|
|
|
watch(lang, () => {
|
|
|
|
|
miLocalStorage.setItem('lang', lang.value as string);
|
|
|
|
@ -250,7 +306,7 @@ watch(fontSize, () => {
|
|
|
|
|
if (fontSize.value == null) {
|
|
|
|
|
miLocalStorage.removeItem('fontSize');
|
|
|
|
|
} else {
|
|
|
|
|
miLocalStorage.setItem('fontSize', fontSize.value);
|
|
|
|
|
miLocalStorage.setItem('fontSize', fontSize.value as string);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
@ -266,7 +322,7 @@ watch([
|
|
|
|
|
lang,
|
|
|
|
|
animatedMfm,
|
|
|
|
|
useBlurEffect,
|
|
|
|
|
fontSize,
|
|
|
|
|
// fontSize,
|
|
|
|
|
useSystemFont,
|
|
|
|
|
enableInfiniteScroll,
|
|
|
|
|
squareAvatars,
|
|
|
|
@ -278,6 +334,12 @@ watch([
|
|
|
|
|
await reloadAsk();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
if (fontSizeBefore.value == null) {
|
|
|
|
|
fontSizeBefore.value = fontSize.value as string;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const headerActions = $computed(() => []);
|
|
|
|
|
|
|
|
|
|
const headerTabs = $computed(() => []);
|
|
|
|
@ -287,3 +349,22 @@ definePageMetadata({
|
|
|
|
|
icon: 'ti ti-adjustments',
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.label {
|
|
|
|
|
font-size: 0.85em;
|
|
|
|
|
padding: 0 0 8px 0;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fontSize {
|
|
|
|
|
padding: 20px 20px 28px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fontSize_slider {
|
|
|
|
|
margin-top: -8px;
|
|
|
|
|
border-top: solid .5px var(--divider);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|