Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui:fix

Browse source
This commit is contained in:
mattyatea 2024-02-05 01:28:12 +09:00
parent fd54c299a5
commit 2ab6bb52c2
6 changed files with 122 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -38,16 +38,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
<MkFolder>
<template #label>{{ i18n.ts.pinnedList }}</template>
<div class="_margin" v-for="pinnedLists in defaultStore.reactiveState.pinnedUserLists.value">
<div v-for="pinnedLists in defaultStore.reactiveState.pinnedUserLists.value" class="_margin">
{{ pinnedLists.name }}
<MkButton danger @click="removePinnedList(pinnedLists.id,pinnedLists.name)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
<MkButton danger @click="removePinnedList(pinnedLists.id,pinnedLists.name)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</div>
<MkButton v-if="pinnedMax > defaultStore.reactiveState.pinnedUserLists.value.length " @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
<MkButton v-if="defaultStore.reactiveState.pinnedUserLists.value.length " danger @click="removePinnedList('all')"><i class="ti ti-trash"></i> {{i18n.ts.all}}{{ i18n.ts.remove }}</MkButton>
<MkButton v-if="defaultStore.reactiveState.pinnedUserLists.value.length " danger @click="removePinnedList('all')"><i class="ti ti-trash"></i> {{ i18n.ts.all }}{{ i18n.ts.remove }}</MkButton>
</MkFolder>
<MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline }}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
<MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch>
<MkSwitch v-model="showHomeTimeline">{{ i18n.ts.showHomeTimeline }}</MkSwitch>
<MkSwitch v-model="showSocialTimeline">{{ i18n.ts.showSocialTimeline }}</MkSwitch>
<MkSwitch v-model="showLocalTimeline">{{ i18n.ts.showLocalTimeline }}</MkSwitch>
<MkSwitch v-model="topBarNameShown">{{ i18n.ts.topBarNameShown }}</MkSwitch>
</div>
</FormSection>
<MkFoldableSection :expanded="false" class="item">
@ -350,7 +353,7 @@ import MkInfo from '@/components/MkInfo.vue';
import { langs } from '@/config.js';
import { defaultStore } from '@/store.js';
import * as os from '@/os.js';
import {signinRequired} from '@/account.js';
import { signinRequired } from '@/account.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
@ -422,6 +425,10 @@ const enableonlyAndWithSave = computed(defaultStore.makeGetterSetter('onlyAndWit
const enablehanntenn = computed(defaultStore.makeGetterSetter('enablehanntenn'));
const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
const showGlobalTimeline = computed(defaultStore.makeGetterSetter('showGlobalTimeline'));
const showLocalTimeline = computed(defaultStore.makeGetterSetter('showLocalTimeline'));
const showHomeTimeline = computed(defaultStore.makeGetterSetter('showHomeTimeline'));
const showSocialTimeline = computed(defaultStore.makeGetterSetter('showSocialTimeline'));
const topBarNameShown = computed(defaultStore.makeGetterSetter('topBarNameShown'));
const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'));
const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
@ -449,8 +456,8 @@ const remoteLocalTimelineEnable3 = computed(defaultStore.makeGetterSetter('remot
const remoteLocalTimelineEnable4 = computed(defaultStore.makeGetterSetter('remoteLocalTimelineEnable4'));
const remoteLocalTimelineEnable5 = computed(defaultStore.makeGetterSetter('remoteLocalTimelineEnable5'));
const $i = signinRequired();
const pinnedMax = $i.policies?.listPinnedLimit;
const maxLocalTimeline = $i.policies?.localTimelineAnyLimit;
const pinnedMax = $i.policies.listPinnedLimit;
const maxLocalTimeline = $i.policies.localTimelineAnyLimit;
watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string);
miLocalStorage.removeItem('locale');
@ -518,6 +525,10 @@ watch([
showVisibilityColor,
enableonlyAndWithSave,
showGlobalTimeline,
showSocialTimeline,
showLocalTimeline,
showHomeTimeline,
topBarNameShown,
disableStreamingTimeline,
enableSeasonalScreenEffect,
], async () => {
@ -611,26 +622,24 @@ async function setPinnedList() {
}
}
async function removePinnedList(id,name) {
async function removePinnedList(id, name) {
if (!id) return;
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.tsx.removeAreYouSure({ x: name ?? id }),
});
if (canceled) return;
if (!id) return;
const {canceled} = await os.confirm({
type: 'warning',
text: i18n.tsx.removeAreYouSure({x: name ?? id }),
});
if (canceled) return;
if (id === 'all') {
if (canceled) return;
if (id === 'all') {
defaultStore.set('pinnedUserLists', []);
return;
}
if (canceled) return;
defaultStore.set('pinnedUserLists', []);
return;
}
const pinnedLists = defaultStore.state.pinnedUserLists;
const newPinnedLists = pinnedLists.filter(pinnedList => pinnedList.id !== id);
defaultStore.set('pinnedUserLists', newPinnedLists);
const pinnedLists = defaultStore.state.pinnedUserLists;
const newPinnedLists = pinnedLists.filter(pinnedList => pinnedList.id !== id);
defaultStore.set('pinnedUserLists', newPinnedLists);
}
let smashCount = 0;

34
packages/frontend/src/pages/timeline.vue
View file

@ -55,7 +55,7 @@ import { miLocalStorage } from '@/local-storage.js';
provide('shouldOmitHeaderTitle', true);
const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable && defaultStore.state.showLocalTimeline) || ($i != null && $i.policies.ltlAvailable && defaultStore.state.showLocalTimeline);
const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable && defaultStore.state.showGlobalTimeline) || ($i != null && $i.policies.gtlAvailable && defaultStore.state.showGlobalTimeline);
const keymap = {
't': focus,
@ -110,6 +110,8 @@ const remoteLocalTimelineEnable2 = ref(defaultStore.state.remoteLocalTimelineEna
const remoteLocalTimelineEnable3 = ref(defaultStore.state.remoteLocalTimelineEnable3);
const remoteLocalTimelineEnable4 = ref(defaultStore.state.remoteLocalTimelineEnable4);
const remoteLocalTimelineEnable5 = ref(defaultStore.state.remoteLocalTimelineEnable5);
const showHomeTimeline = ref(defaultStore.state.showHomeTimeline);
const showSocialTimeline = ref(defaultStore.state.showSocialTimeline);
watch(src, () => {
queue.value = 0;
});
@ -282,57 +284,57 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
key: 'list:' + l.id,
title: l.name,
icon: 'ti ti-star',
iconOnly: false,
}))), {
iconOnly: defaultStore.state.topBarNameShown ?? false,
}))), ...(showHomeTimeline.value ? [{
key: 'home',
title: i18n.ts._timelines.home,
icon: 'ti ti-home',
iconOnly: false,
}, ...(isLocalTimelineAvailable ? [{
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(isLocalTimelineAvailable ? [{
key: 'local',
title: i18n.ts._timelines.local,
icon: 'ti ti-planet',
iconOnly: false,
}, ...(isShowMediaTimeline.value ? [{
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(isShowMediaTimeline.value ? [{
key: 'media',
title: i18n.ts._timelines.media,
icon: 'ti ti-photo',
iconOnly: false,
}] : []), {
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(showSocialTimeline.value ? [{
key: 'social',
title: i18n.ts._timelines.social,
icon: 'ti ti-universe',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(remoteLocalTimelineEnable1.value ? [{
key: 'custom-timeline-1',
title: defaultStore.state.remoteLocalTimelineName1,
icon: 'ti ti-plus',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(remoteLocalTimelineEnable2.value ? [{
key: 'custom-timeline-2',
title: defaultStore.state.remoteLocalTimelineName2,
icon: 'ti ti-plus',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(remoteLocalTimelineEnable3.value ? [{
key: 'custom-timeline-3',
title: defaultStore.state.remoteLocalTimelineName3,
icon: 'ti ti-plus',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(remoteLocalTimelineEnable4.value ? [{
key: 'custom-timeline-4',
title: defaultStore.state.remoteLocalTimelineName4,
icon: 'ti ti-plus',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(remoteLocalTimelineEnable5.value ? [{
key: 'custom-timeline-5',
title: defaultStore.state.remoteLocalTimelineName5,
icon: 'ti ti-plus',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), ...(isGlobalTimelineAvailable ? [{
key: 'global',
title: i18n.ts._timelines.global,
icon: 'ti ti-whirl',
iconOnly: false,
iconOnly: defaultStore.state.topBarNameShown ?? false,
}] : []), {
icon: 'ti ti-list',
title: i18n.ts.lists,

20
packages/frontend/src/store.ts
View file

@ -364,6 +364,22 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: false,
},
topBarNameShown: {
where: 'device',
default: false,
},
showHomeTimeline: {
where: 'device',
default: true,
},
showLocalTimeline: {
where: 'device',
default: true,
},
showSocialTimeline: {
where: 'device',
default: true,
},
showGapBetweenNotesInTimeline: {
where: 'device',
default: false,
@ -676,10 +692,10 @@ export const defaultStore = markRaw(new Storage('base', {
sfxVolume: 1,
},
},
hemisphere: {
hemisphere: {
where: 'device',
default: hemisphere as 'N' | 'S',
},
},
enableHorizontalSwipe: {
where: 'device',
default: true,