yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-01-18 05:38:40 -06:00
Code Issues Projects Releases Packages Wiki Activity

ux: make 16px default and change max font size

Browse source
This commit is contained in:
Lhc_fl 2024-09-26 19:18:56 +08:00 committed by fly_mc
parent e73e22202e
commit 66d0958db9
4 changed files with 70 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/backend/src/server/web/boot.js
View file

@ -117,7 +117,7 @@
}
//#endregion
const fontSize = localStorage.getItem('fontSize');
const fontSize = localStorage.getItem('fontSize') || 2;
if (fontSize) {
document.documentElement.classList.add('f-' + fontSize);
}

2
packages/frontend/src/_dev_boot_.ts
View file

@ -62,7 +62,7 @@ async function main() {
}
//#endregion
const fontSize = localStorage.getItem('fontSize');
const fontSize = localStorage.getItem('fontSize') || 2;
if (fontSize) {
document.documentElement.classList.add('f-' + fontSize);
}

55
packages/frontend/src/pages/settings/general.vue
View file

@ -147,12 +147,24 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
<MkRadios v-model="fontSize">
<MkRange v-model="fontSizeNumber" :min="0" :max="10" :step="1" continuousUpdate>
<template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
<option value="1"><span style="font-size: 15px;">Aa</span></option>
<option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option>
<template #caption>
<div :style="`font-size: ${fontSizePx}px;`">
<span>
A quick brown fox jumps over the lazy dog<br>
一只敏捷的棕色狐狸跳过那只懒狗<br>
機敏な茶色のキツネが怠惰な犬を飛び越える<br>
</span>
<MkButton v-if="fontSizeNumber !== fontSizeNumberOld" @click.stop="saveFontSize">{{ i18n.ts.save }}</MkButton>
</div>
</template>
</MkRange>
<MkRadios v-model="cornerRadius">
<template #label>{{ i18n.ts.cornerRadius }}</template>
<option :value="null"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
</MkRadios>
</div>
</FormSection>
@ -273,10 +285,31 @@ import { globalEvents } from '@/events.js';
import { claimAchievement } from '@/scripts/achievements.js';
const lang = ref(miLocalStorage.getItem('lang'));
const fontSize = ref(miLocalStorage.getItem('fontSize'));
const fontSizeNumber = ref(Number(miLocalStorage.getItem('fontSize') || 2));
const fontSizeNumberOld = ref(fontSizeNumber.value);
const cornerRadius = ref(miLocalStorage.getItem('cornerRadius'));
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
const dataSaver = ref(defaultStore.state.dataSaver);
const fontSizePx = computed(() => fontSizeNumber.value + 14);
function saveFontSize() {
miLocalStorage.setItem('fontSize', fontSizeNumber.value.toString());
window.document.documentElement.classList.remove('f-' + fontSizeNumberOld.value);
window.document.documentElement.classList.add('f-' + fontSizeNumber.value);
fontSizeNumberOld.value = fontSizeNumber.value;
}
async function reloadAsk() {
const { canceled } = await os.confirm({
type: 'info',
text: i18n.ts.reloadToApplySetting,
});
if (canceled) return;
unisonReload();
}
const hemisphere = computed(defaultStore.makeGetterSetter('hemisphere'));
const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
@ -328,11 +361,11 @@ watch(lang, () => {
miLocalStorage.removeItem('localeVersion');
});
watch(fontSize, () => {
if (fontSize.value == null) {
miLocalStorage.removeItem('fontSize');
watch(cornerRadius, () => {
if (cornerRadius.value == null) {
miLocalStorage.removeItem('cornerRadius');
} else {
miLocalStorage.setItem('fontSize', fontSize.value);
miLocalStorage.setItem('cornerRadius', cornerRadius.value);
}
});
@ -347,7 +380,7 @@ watch(useSystemFont, () => {
watch([
hemisphere,
lang,
fontSize,
cornerRadius,
useSystemFont,
enableInfiniteScroll,
squareAvatars,

26
packages/frontend/src/style.scss
View file

@ -74,17 +74,39 @@ html {
}
}
&.f-0 {
font-size: 14px;
}
&.f-1 {
font-size: 15px;
}
&.f-2 {
font-size: 16px;
}
&.f-3 {
font-size: 17px;
}
&.f-4 {
font-size: 18px;
}
&.f-5 {
font-size: 19px;
}
&.f-6 {
font-size: 20px;
}
&.f-7 {
font-size: 21px;
}
&.f-8 {
font-size: 22px;
}
&.f-9 {
font-size: 23px;
}
&.f-10 {
font-size: 24px;
}
&.useSystemFont {
font-family: system-ui;