organize settings

This commit is contained in:
Freeplay 2023-05-14 22:10:52 -04:00
parent 61295c8fbb
commit 75dfd21918
7 changed files with 82 additions and 71 deletions

View file

@ -526,6 +526,7 @@ total: "Total"
weekOverWeekChanges: "Changes to last week"
dayOverDayChanges: "Changes to yesterday"
appearance: "Appearance"
accessibility: "Accessibility"
clientSettings: "Client Settings"
accountSettings: "Account Settings"
promotion: "Promoted"

View file

@ -81,7 +81,7 @@ export default defineComponent({
> .title {
opacity: 0.7;
margin: 0 0 8px 0;
margin: 0 12px 8px;
font-size: 0.9em;
}

View file

@ -43,10 +43,6 @@
</option>
</FormRadios>
<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
i18n.ts.showFixedPostForm
}}</FormSwitch>
<FormSection>
<template #label>{{ i18n.ts.behavior }}</template>
<FormSwitch v-model="imageNewTab" class="_formBlock">{{
@ -69,6 +65,13 @@
<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
i18n.ts.disablePagesScript
}}</FormSwitch>
<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock"
>{{ i18n.ts.flagShowTimelineReplies
}}<template #caption
>{{ i18n.ts.flagShowTimelineRepliesDescription }}
{{ i18n.ts.reflectMayTakeTime }}</template
></FormSwitch
>
<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@ -88,10 +91,7 @@
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.appearance }}</template>
<FormSwitch v-model="showAds" class="_formBlock">{{
i18n.ts.showAds
}}</FormSwitch>
<template #label>{{ i18n.ts.accessibility }}</template>
<FormSwitch v-model="autoplayMfm" class="_formBlock">
{{ i18n.ts._mfm.alwaysPlay }}
<template #caption>
@ -105,6 +105,33 @@
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
i18n.ts.reduceUiAnimation
}}</FormSwitch>
<FormSwitch
v-model="disableShowingAnimatedImages"
class="_formBlock"
>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
>
<FormRadios v-model="fontSize" class="_formBlock">
<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>
</FormRadios>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.appearance }}</template>
<FormSwitch v-model="showAds" class="_formBlock">{{
i18n.ts.showAds
}}</FormSwitch>
<FormSwitch v-model="useBlurEffect" class="_formBlock">{{
i18n.ts.useBlurEffect
}}</FormSwitch>
@ -119,11 +146,6 @@
<FormSwitch v-model="loadRawImages" class="_formBlock">{{
i18n.ts.loadRawImages
}}</FormSwitch>
<FormSwitch
v-model="disableShowingAnimatedImages"
class="_formBlock"
>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
>
<FormSwitch v-model="squareAvatars" class="_formBlock">{{
i18n.ts.squareAvatars
}}</FormSwitch>
@ -145,44 +167,30 @@
<FormSwitch v-model="showUpdates" class="_formBlock">{{
i18n.ts.showUpdates
}}</FormSwitch>
<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
i18n.ts.showFixedPostForm
}}</FormSwitch>
<FormSwitch
v-if="$i?.isAdmin"
v-model="showAdminUpdates"
class="_formBlock"
>{{ i18n.ts.showAdminUpdates }}</FormSwitch
>
<FormSelect v-model="instanceTicker" class="_formBlock">
<template #label>{{ i18n.ts.instanceTicker }}</template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
</FormSelect>
<FormRadios v-model="fontSize" class="_formBlock">
<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>
</FormRadios>
<FormSelect v-model="nsfw" class="_formBlock">
<template #label>{{ i18n.ts.nsfw }}</template>
<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
<option value="force">{{ i18n.ts._nsfw.force }}</option>
</FormSelect>
</FormSection>
<FormSelect v-model="instanceTicker" class="_formBlock">
<template #label>{{ i18n.ts.instanceTicker }}</template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
</FormSelect>
<FormSelect v-model="nsfw" class="_formBlock">
<template #label>{{ i18n.ts.nsfw }}</template>
<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
<option value="force">{{ i18n.ts._nsfw.force }}</option>
</FormSelect>
<FormRange
v-model="numberOfPageCache"
:min="1"
@ -201,11 +209,6 @@
i18n.ts.deck
}}</FormLink>
<FormLink to="/settings/custom-css" class="_formBlock"
><template #icon><i class="ph-code ph-bold ph-lg"></i></template
>{{ i18n.ts.customCss }}</FormLink
>
<FormLink to="/settings/custom-katex-macro" class="_formBlock"
><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
>{{ i18n.ts.customKaTeXMacro }}</FormLink
@ -214,7 +217,7 @@
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { reactive, computed, ref, watch } from "vue";
import { $i } from "@/account";
import FormSwitch from "@/components/form/switch.vue";
import FormSelect from "@/components/form/select.vue";
@ -234,6 +237,10 @@ const lang = ref(localStorage.getItem("lang"));
const fontSize = ref(localStorage.getItem("fontSize"));
const useSystemFont = ref(localStorage.getItem("useSystemFont") != null);
const profile = reactive({
showTimelineReplies: $i?.showTimelineReplies,
});
async function reloadAsk() {
const { canceled } = await os.confirm({
type: "info",

View file

@ -145,13 +145,6 @@
i18n.ts.flagSpeakAsCatDescription
}}</template></FormSwitch
>
<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock"
>{{ i18n.ts.flagShowTimelineReplies
}}<template #caption
>{{ i18n.ts.flagShowTimelineRepliesDescription }}
{{ i18n.ts.reflectMayTakeTime }}</template
></FormSwitch
>
<FormSwitch v-model="profile.isBot" class="_formBlock"
>{{ i18n.ts.flagAsBot
}}<template #caption>{{
@ -190,7 +183,6 @@ const profile = reactive({
isBot: $i?.isBot,
isCat: $i?.isCat,
speakAsCat: $i?.speakAsCat,
showTimelineReplies: $i?.showTimelineReplies,
});
const props = withDefaults(

View file

@ -13,20 +13,21 @@
<FormSection>
<template #label>{{ i18n.ts.sounds }}</template>
<FormButton
v-for="type in Object.keys(sounds)"
:key="type"
style="margin-bottom: 8px"
@click="edit(type)"
>
{{ i18n.t("_sfx." + type) }}
<template #suffix>{{
sounds[type].type || i18n.ts.none
}}</template>
<template #suffixIcon
><i class="ph-caret-down ph-bold ph-lg"></i
></template>
</FormButton>
<div class="_formLinksGrid">
<FormButton
v-for="type in Object.keys(sounds)"
:key="type"
@click="edit(type)"
>
{{ i18n.t("_sfx." + type) }}
<template #suffix>{{
sounds[type].type || i18n.ts.none
}}</template>
<template #suffixIcon
><i class="ph-caret-down ph-bold ph-lg"></i
></template>
</FormButton>
</div>
</FormSection>
<FormButton danger class="_formBlock" @click="reset()"

View file

@ -135,6 +135,12 @@
>
</div>
</FormSection>
<FormSection>
<FormLink to="/settings/custom-css" class="_formBlock"
><template #icon><i class="ph-code ph-bold ph-lg"></i></template
>{{ i18n.ts.customCss }}</FormLink
>
</FormSection>
<FormButton
v-if="wallpaper == null"

View file

@ -433,6 +433,9 @@ hr {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 12px;
> button {
width: 100% !important;
}
}
._formLinks {
@ -653,6 +656,7 @@ hr {
font-size: 1.3333em;
line-height: 0.75em;
vertical-align: -0.0667em;
justify-content: center;
}
.ph-xl {