chore (client): move accessibility settings into a separate page
This commit is contained in:
naskya
parent
bcbdcfdb4a
commit
3af46024cf
4 changed files with 225 additions and 179 deletions
195
packages/client/src/pages/settings/accessibility.vue
Normal file
195
packages/client/src/pages/settings/accessibility.vue
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<FormSection>
|
||||
<FormSwitch v-model="showNoAltTextWarning" class="_formBlock">{{
|
||||
i18n.ts.showNoAltTextWarning
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-if="showNoAltTextWarning" v-model="showAddFileDescriptionAtFirstPost" class="_formBlock">{{
|
||||
i18n.ts.showAddFileDescriptionAtFirstPost
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="addAlt4MeTag" class="_formBlock">{{
|
||||
i18n.ts.addAlt4MeTag
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
|
||||
>{{ i18n.ts.expandOnNoteClick
|
||||
}}<template #caption>{{
|
||||
i18n.ts.expandOnNoteClickDesc
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="turnOffCatLanguage" @update:modelValue="save()" class="_formBlock"
|
||||
>{{ i18n.ts.turnOffCatLanguage }}<template #caption>{{
|
||||
i18n.ts.reflectMayTakeTime
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="advancedMfm" class="_formBlock">
|
||||
{{ i18n.ts._mfm.advanced
|
||||
}}<template #caption>{{
|
||||
i18n.ts._mfm.advancedDescription
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="autoplayMfm" class="_formBlock">
|
||||
{{ i18n.ts._mfm.alwaysPlay }}
|
||||
<template #caption>
|
||||
<i
|
||||
:class="icon('ph-warning')"
|
||||
style="color: var(--warn)"
|
||||
></i>
|
||||
{{ i18n.ts._mfm.warn }}
|
||||
</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
|
||||
i18n.ts.reduceUiAnimation
|
||||
}}</FormSwitch>
|
||||
<FormSwitch
|
||||
v-model="disableShowingAnimatedImages"
|
||||
class="_formBlock"
|
||||
>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
|
||||
>
|
||||
<FormSwitch v-model="useSystemFont" class="_formBlock">{{
|
||||
i18n.ts.useSystemFont
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
|
||||
{{ i18n.ts.useOsNativeEmojis }}
|
||||
<div>
|
||||
<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
|
||||
</div>
|
||||
</FormSwitch>
|
||||
<FormSwitch
|
||||
v-model="vibrate"
|
||||
class="_formBlock"
|
||||
@click="demoVibrate"
|
||||
>{{ i18n.ts.vibrate }}
|
||||
</FormSwitch>
|
||||
<FormRadios v-model="fontSize" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.fontSize }}</template>
|
||||
<option :value="null">
|
||||
<span style="font-size: 14px">14</span>
|
||||
</option>
|
||||
<option value="15">
|
||||
<span style="font-size: 15px">15</span>
|
||||
</option>
|
||||
<option value="16">
|
||||
<span style="font-size: 16px">16</span>
|
||||
</option>
|
||||
<option value="17">
|
||||
<span style="font-size: 17px">17</span>
|
||||
</option>
|
||||
<option value="18">
|
||||
<span style="font-size: 18px">18</span>
|
||||
</option>
|
||||
</FormRadios>
|
||||
|
||||
<!-- <FormRange
|
||||
v-model="fontSize"
|
||||
:min="12"
|
||||
:max="18"
|
||||
:step="1"
|
||||
:value="fontSize ? fontSize : 14"
|
||||
easing
|
||||
:showTicks="true"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label>{{ i18n.ts.fontSize }}</template>
|
||||
</FormRange> -->
|
||||
</FormSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { me } from "@/me";
|
||||
import FormSwitch from "@/components/form/switch.vue";
|
||||
import FormRadios from "@/components/form/radios.vue";
|
||||
import FormSection from "@/components/form/section.vue";
|
||||
import { ColdDeviceStorage, defaultStore } from "@/store";
|
||||
import * as os from "@/os";
|
||||
import { unisonReload } from "@/scripts/unison-reload";
|
||||
import { i18n } from "@/i18n";
|
||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||
import icon from "@/scripts/icon";
|
||||
|
||||
const fontSize = ref(localStorage.getItem("fontSize"));
|
||||
const useSystemFont = ref(localStorage.getItem("useSystemFont") !== "f");
|
||||
const turnOffCatLanguage = ref(!me?.readCatLanguage);
|
||||
|
||||
function save() {
|
||||
os.api("i/update", {
|
||||
readCatLanguage: !turnOffCatLanguage.value,
|
||||
});
|
||||
}
|
||||
|
||||
async function reloadAsk() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: "info",
|
||||
text: i18n.ts.reloadToApplySetting,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
unisonReload();
|
||||
}
|
||||
|
||||
function demoVibrate() {
|
||||
window.navigator.vibrate(100);
|
||||
}
|
||||
|
||||
const reduceAnimation = computed(
|
||||
defaultStore.makeGetterSetter(
|
||||
"animation",
|
||||
(v) => !v,
|
||||
(v) => !v,
|
||||
),
|
||||
);
|
||||
const advancedMfm = computed(defaultStore.makeGetterSetter("advancedMfm"));
|
||||
const autoplayMfm = computed(
|
||||
defaultStore.makeGetterSetter(
|
||||
"animatedMfm",
|
||||
(v) => !v,
|
||||
(v) => !v,
|
||||
),
|
||||
);
|
||||
const useOsNativeEmojis = computed(
|
||||
defaultStore.makeGetterSetter("useOsNativeEmojis"),
|
||||
);
|
||||
const disableShowingAnimatedImages = computed(
|
||||
defaultStore.makeGetterSetter("disableShowingAnimatedImages"),
|
||||
);
|
||||
const vibrate = computed(ColdDeviceStorage.makeGetterSetter("vibrate"));
|
||||
const expandOnNoteClick = computed(
|
||||
defaultStore.makeGetterSetter("expandOnNoteClick"),
|
||||
);
|
||||
const showNoAltTextWarning = computed(
|
||||
defaultStore.makeGetterSetter("showNoAltTextWarning"),
|
||||
);
|
||||
const showAddFileDescriptionAtFirstPost = computed(
|
||||
defaultStore.makeGetterSetter("showAddFileDescriptionAtFirstPost"),
|
||||
);
|
||||
const addAlt4MeTag = computed(defaultStore.makeGetterSetter("addAlt4MeTag"));
|
||||
|
||||
watch(fontSize, () => {
|
||||
if (fontSize.value == null) {
|
||||
localStorage.removeItem("fontSize");
|
||||
} else {
|
||||
localStorage.setItem("fontSize", fontSize.value);
|
||||
}
|
||||
});
|
||||
|
||||
watch(useSystemFont, () => {
|
||||
if (useSystemFont.value) {
|
||||
localStorage.setItem("useSystemFont", "t");
|
||||
} else {
|
||||
localStorage.setItem("useSystemFont", "f");
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
[fontSize, useSystemFont, advancedMfm, autoplayMfm, expandOnNoteClick],
|
||||
async () => {
|
||||
await reloadAsk();
|
||||
},
|
||||
);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.accessibility,
|
||||
icon: `${icon("ph-person-arms-spread")}`,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -183,91 +183,6 @@
|
|||
</FormSelect>
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.accessibility }}</template>
|
||||
<FormSwitch v-model="showNoAltTextWarning" class="_formBlock">{{
|
||||
i18n.ts.showNoAltTextWarning
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-if="showNoAltTextWarning" v-model="showAddFileDescriptionAtFirstPost" class="_formBlock">{{
|
||||
i18n.ts.showAddFileDescriptionAtFirstPost
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="addAlt4MeTag" class="_formBlock">{{
|
||||
i18n.ts.addAlt4MeTag
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
|
||||
>{{ i18n.ts.expandOnNoteClick
|
||||
}}<template #caption>{{
|
||||
i18n.ts.expandOnNoteClickDesc
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="turnOffCatLanguage" @update:modelValue="save()" class="_formBlock"
|
||||
>{{ i18n.ts.turnOffCatLanguage }}<template #caption>{{
|
||||
i18n.ts.reflectMayTakeTime
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="advancedMfm" class="_formBlock">
|
||||
{{ i18n.ts._mfm.advanced
|
||||
}}<template #caption>{{
|
||||
i18n.ts._mfm.advancedDescription
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="autoplayMfm" class="_formBlock">
|
||||
{{ i18n.ts._mfm.alwaysPlay }}
|
||||
<template #caption>
|
||||
<i
|
||||
:class="icon('ph-warning')"
|
||||
style="color: var(--warn)"
|
||||
></i>
|
||||
{{ i18n.ts._mfm.warn }}
|
||||
</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
|
||||
i18n.ts.reduceUiAnimation
|
||||
}}</FormSwitch>
|
||||
<FormSwitch
|
||||
v-model="disableShowingAnimatedImages"
|
||||
class="_formBlock"
|
||||
>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
|
||||
>
|
||||
<FormSwitch
|
||||
v-model="vibrate"
|
||||
class="_formBlock"
|
||||
@click="demoVibrate"
|
||||
>{{ i18n.ts.vibrate }}
|
||||
</FormSwitch>
|
||||
<FormRadios v-model="fontSize" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.fontSize }}</template>
|
||||
<option :value="null">
|
||||
<span style="font-size: 14px">14</span>
|
||||
</option>
|
||||
<option value="15">
|
||||
<span style="font-size: 15px">15</span>
|
||||
</option>
|
||||
<option value="16">
|
||||
<span style="font-size: 16px">16</span>
|
||||
</option>
|
||||
<option value="17">
|
||||
<span style="font-size: 17px">17</span>
|
||||
</option>
|
||||
<option value="18">
|
||||
<span style="font-size: 18px">18</span>
|
||||
</option>
|
||||
</FormRadios>
|
||||
|
||||
<!-- <FormRange
|
||||
v-model="fontSize"
|
||||
:min="12"
|
||||
:max="18"
|
||||
:step="1"
|
||||
:value="fontSize ? fontSize : 14"
|
||||
easing
|
||||
:showTicks="true"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label>{{ i18n.ts.fontSize }}</template>
|
||||
</FormRange> -->
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.appearance }}</template>
|
||||
<FormSwitch v-model="showAds" class="_formBlock">{{
|
||||
|
|
@ -299,15 +214,6 @@
|
|||
<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
|
||||
i18n.ts.seperateRenoteQuote
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="useSystemFont" class="_formBlock">{{
|
||||
i18n.ts.useSystemFont
|
||||
}}</FormSwitch>
|
||||
<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
|
||||
{{ i18n.ts.useOsNativeEmojis }}
|
||||
<div>
|
||||
<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
|
||||
</div>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="disableDrawer" class="_formBlock">{{
|
||||
i18n.ts.disableDrawer
|
||||
}}</FormSwitch>
|
||||
|
|
@ -415,7 +321,7 @@ import FormSection from "@/components/form/section.vue";
|
|||
import FormLink from "@/components/form/link.vue";
|
||||
import MkLink from "@/components/MkLink.vue";
|
||||
import { langs } from "@/config";
|
||||
import { ColdDeviceStorage, defaultStore } from "@/store";
|
||||
import { defaultStore } from "@/store";
|
||||
import * as os from "@/os";
|
||||
import { unisonReload } from "@/scripts/unison-reload";
|
||||
import { i18n } from "@/i18n";
|
||||
|
|
@ -426,15 +332,6 @@ import icon from "@/scripts/icon";
|
|||
const lang = ref(localStorage.getItem("lang"));
|
||||
const serverLang = ref(me?.lang);
|
||||
const translateLang = ref(localStorage.getItem("translateLang"));
|
||||
const fontSize = ref(localStorage.getItem("fontSize"));
|
||||
const useSystemFont = ref(localStorage.getItem("useSystemFont") !== "f");
|
||||
const turnOffCatLanguage = ref(!me?.readCatLanguage);
|
||||
|
||||
function save() {
|
||||
os.api("i/update", {
|
||||
readCatLanguage: !turnOffCatLanguage.value,
|
||||
});
|
||||
}
|
||||
|
||||
async function reloadAsk() {
|
||||
const { canceled } = await os.confirm({
|
||||
|
|
@ -446,23 +343,12 @@ async function reloadAsk() {
|
|||
unisonReload();
|
||||
}
|
||||
|
||||
function demoVibrate() {
|
||||
window.navigator.vibrate(100);
|
||||
}
|
||||
|
||||
const overridedDeviceKind = computed(
|
||||
defaultStore.makeGetterSetter("overridedDeviceKind"),
|
||||
);
|
||||
const serverDisconnectedBehavior = computed(
|
||||
defaultStore.makeGetterSetter("serverDisconnectedBehavior"),
|
||||
);
|
||||
const reduceAnimation = computed(
|
||||
defaultStore.makeGetterSetter(
|
||||
"animation",
|
||||
(v) => !v,
|
||||
(v) => !v,
|
||||
),
|
||||
);
|
||||
const useBlurEffectForModal = computed(
|
||||
defaultStore.makeGetterSetter("useBlurEffectForModal"),
|
||||
);
|
||||
|
|
@ -471,31 +357,13 @@ const showGapBetweenNotesInTimeline = computed(
|
|||
defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline"),
|
||||
);
|
||||
const showAds = computed(defaultStore.makeGetterSetter("showAds"));
|
||||
const advancedMfm = computed(defaultStore.makeGetterSetter("advancedMfm"));
|
||||
const autoplayMfm = computed(
|
||||
defaultStore.makeGetterSetter(
|
||||
"animatedMfm",
|
||||
(v) => !v,
|
||||
(v) => !v,
|
||||
),
|
||||
);
|
||||
const useOsNativeEmojis = computed(
|
||||
defaultStore.makeGetterSetter("useOsNativeEmojis"),
|
||||
);
|
||||
const disableDrawer = computed(defaultStore.makeGetterSetter("disableDrawer"));
|
||||
const disableShowingAnimatedImages = computed(
|
||||
defaultStore.makeGetterSetter("disableShowingAnimatedImages"),
|
||||
);
|
||||
const vibrate = computed(ColdDeviceStorage.makeGetterSetter("vibrate"));
|
||||
const loadRawImages = computed(defaultStore.makeGetterSetter("loadRawImages"));
|
||||
const imageNewTab = computed(defaultStore.makeGetterSetter("imageNewTab"));
|
||||
const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
|
||||
const disablePagesScript = computed(
|
||||
defaultStore.makeGetterSetter("disablePagesScript"),
|
||||
);
|
||||
const expandOnNoteClick = computed(
|
||||
defaultStore.makeGetterSetter("expandOnNoteClick"),
|
||||
);
|
||||
const showFixedPostForm = computed(
|
||||
defaultStore.makeGetterSetter("showFixedPostForm"),
|
||||
);
|
||||
|
|
@ -565,12 +433,6 @@ const enablePullToRefresh = computed(
|
|||
const pullToRefreshThreshold = computed(
|
||||
defaultStore.makeGetterSetter("pullToRefreshThreshold"),
|
||||
);
|
||||
const showNoAltTextWarning = computed(
|
||||
defaultStore.makeGetterSetter("showNoAltTextWarning"),
|
||||
);
|
||||
const showAddFileDescriptionAtFirstPost = computed(
|
||||
defaultStore.makeGetterSetter("showAddFileDescriptionAtFirstPost"),
|
||||
);
|
||||
const autocorrectNoteLanguage = computed(
|
||||
defaultStore.makeGetterSetter("autocorrectNoteLanguage"),
|
||||
);
|
||||
|
|
@ -583,7 +445,6 @@ const mergeThreadInTimeline = computed(
|
|||
const mergeRenotesInTimeline = computed(
|
||||
defaultStore.makeGetterSetter("mergeRenotesInTimeline"),
|
||||
);
|
||||
const addAlt4MeTag = computed(defaultStore.makeGetterSetter("addAlt4MeTag"));
|
||||
|
||||
// This feature (along with injectPromo) is currently disabled
|
||||
// function onChangeInjectFeaturedNote(v) {
|
||||
|
|
@ -619,28 +480,10 @@ watch(translateLang, () => {
|
|||
localStorage.setItem("translateLang", translateLang.value as string);
|
||||
});
|
||||
|
||||
watch(fontSize, () => {
|
||||
if (fontSize.value == null) {
|
||||
localStorage.removeItem("fontSize");
|
||||
} else {
|
||||
localStorage.setItem("fontSize", fontSize.value);
|
||||
}
|
||||
});
|
||||
|
||||
watch(useSystemFont, () => {
|
||||
if (useSystemFont.value) {
|
||||
localStorage.setItem("useSystemFont", "t");
|
||||
} else {
|
||||
localStorage.setItem("useSystemFont", "f");
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
[
|
||||
lang,
|
||||
translateLang,
|
||||
fontSize,
|
||||
useSystemFont,
|
||||
enableInfiniteScroll,
|
||||
squareAvatars,
|
||||
showGapBetweenNotesInTimeline,
|
||||
|
|
@ -652,9 +495,6 @@ watch(
|
|||
swipeOnDesktop,
|
||||
seperateRenoteQuote,
|
||||
showAdminUpdates,
|
||||
advancedMfm,
|
||||
autoplayMfm,
|
||||
expandOnNoteClick,
|
||||
iconSet,
|
||||
useEmojiCdn,
|
||||
enableTimelineStreaming,
|
||||
|
|
|
|||
|
|
@ -106,12 +106,6 @@ const menuDef = computed(() => [
|
|||
to: "/settings/drive",
|
||||
active: currentPage.value?.route.name === "drive",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-bell")}`,
|
||||
text: i18n.ts.notifications,
|
||||
to: "/settings/notifications",
|
||||
active: currentPage.value?.route.name === "notifications",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-envelope-simple-open")}`,
|
||||
text: i18n.ts.email,
|
||||
|
|
@ -141,6 +135,18 @@ const menuDef = computed(() => [
|
|||
to: "/settings/theme",
|
||||
active: currentPage.value?.route.name === "theme",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-person-arms-spread")}`,
|
||||
text: i18n.ts.accessibility,
|
||||
to: "/settings/accessibility",
|
||||
active: currentPage.value?.route.name === "accessibility",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-bell")}`,
|
||||
text: i18n.ts.notifications,
|
||||
to: "/settings/notifications",
|
||||
active: currentPage.value?.route.name === "notifications",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-list")}`,
|
||||
text: i18n.ts.navbar,
|
||||
|
|
@ -170,18 +176,6 @@ const menuDef = computed(() => [
|
|||
{
|
||||
title: i18n.ts.otherSettings,
|
||||
items: [
|
||||
{
|
||||
icon: `${icon("ph-airplane-takeoff")}`,
|
||||
text: i18n.ts.migration,
|
||||
to: "/settings/migration",
|
||||
active: currentPage.value?.route.name === "migration",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-package")}`,
|
||||
text: i18n.ts.importAndExport,
|
||||
to: "/settings/import-export",
|
||||
active: currentPage.value?.route.name === "import-export",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-speaker-none")}`,
|
||||
text: i18n.ts.instanceMute,
|
||||
|
|
@ -212,6 +206,18 @@ const menuDef = computed(() => [
|
|||
to: "/settings/webhook",
|
||||
active: currentPage.value?.route.name === "webhook",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-package")}`,
|
||||
text: i18n.ts.importAndExport,
|
||||
to: "/settings/import-export",
|
||||
active: currentPage.value?.route.name === "import-export",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-airplane-takeoff")}`,
|
||||
text: i18n.ts.migration,
|
||||
to: "/settings/migration",
|
||||
active: currentPage.value?.route.name === "migration",
|
||||
},
|
||||
{
|
||||
icon: `${icon("ph-dots-three-outline")}`,
|
||||
text: i18n.ts.other,
|
||||
|
|
|
|||
|
|
@ -91,6 +91,11 @@ export const routes: RouteDef[] = [
|
|||
name: "notifications",
|
||||
component: page(() => import("./pages/settings/notifications.vue")),
|
||||
},
|
||||
{
|
||||
path: "/accessibility",
|
||||
name: "accessibility",
|
||||
component: page(() => import("./pages/settings/accessibility.vue")),
|
||||
},
|
||||
{
|
||||
path: "/email",
|
||||
name: "email",
|
||||
|
|
|
|||
Loading…
Reference in a new issue