natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

organize settings

This commit is contained in:
Freeplay 2023-05-14 22:10:52 -04:00
parent 21c5b3665c
commit 38a29ad2c5
7 changed files with 82 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en-US.yml
View File

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

2
packages/client/src/components/MkSuperMenu.vue
View File

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

103
packages/client/src/pages/settings/general.vue
View File

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

8
packages/client/src/pages/settings/profile.vue
View File

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

29
packages/client/src/pages/settings/sounds.vue
View File

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

6
packages/client/src/pages/settings/theme.vue
View File

@ -135,6 +135,12 @@
> >
</div> </div>
</FormSection> </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 <FormButton
v-if="wallpaper == null" v-if="wallpaper == null"

4
packages/client/src/style.scss
View File

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