usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: メインタイムラインのタブをカスタマイズ可能に(#8759)

This commit is contained in:
mattyatea 2024-06-11 16:24:32 +09:00
parent 9849aab402
commit 184890154f
8 changed files with 318 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
locales/index.d.ts vendored
View File

@ -2120,6 +2120,10 @@ export interface Locale extends ILocale {
* アカウント設定
*/
"accountSettings": string;
/**
* タイムラインのヘッダー
*/
"timelineHeader": string;
/**
* プロモーション
*/

1
locales/ja-JP.yml
View File

@ -526,6 +526,7 @@ dayOverDayChanges: "前日比"
appearance: "アピアランス"
clientSettings: "クライアント設定"
accountSettings: "アカウント設定"
timelineHeader: "タイムラインのヘッダー"
promotion: "プロモーション"
promote: "プロモート"
numberOfDays: "日数"

5
packages/frontend/src/pages/settings/index.vue
View File

@ -115,6 +115,11 @@ const menuDef = computed(() => [{
text: i18n.ts.navbar,
to: '/settings/navbar',
active: currentPage.value?.route.name === 'navbar',
}, {
icon: 'ti ti-layout-navbar',
text: i18n.ts.timelineHeader,
to: '/settings/timelineheader',
active: currentPage.value?.route.name === 'timelineHeader',
}, {
icon: 'ti ti-equal-double',
text: i18n.ts.statusbar,

149
packages/frontend/src/pages/settings/timelineHeader.vue Normal file
View File

@ -0,0 +1,149 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormSlot>
<template #label>{{ i18n.ts.timelineHeader }}</template>
<MkContainer :showHeader="false">
<Sortable
v-model="items"
itemKey="id"
:animation="150"
:handle="'.' + $style.itemHandle"
@start="e => e.item.classList.add('active')"
@end="e => e.item.classList.remove('active')"
>
<template #item="{element,index}">
<div
v-if="element.type === '-' || timelineHeaderItemDef[element.type]"
:class="$style.item"
>
<button class="_button" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
<i class="ti-fw" :class="[$style.itemIcon, timelineHeaderItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ timelineHeaderItemDef[element.type]?.title }}</span>
<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ti ti-x"></i></button>
</div>
</template>
</Sortable>
</MkContainer>
</FormSlot>
<div class="_buttons">
<MkButton @click="addItem"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton>
<MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
<MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import MkRadios from '@/components/MkRadios.vue';
import MkButton from '@/components/MkButton.vue';
import FormSlot from '@/components/form/slot.vue';
import MkContainer from '@/components/MkContainer.vue';
import * as os from '@/os.js';
import { navbarItemDef } from '@/navbar.js';
import { defaultStore } from '@/store.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { timelineHeaderItemDef } from '@/timelineHeader.js';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const items = ref(defaultStore.state.timelineTopBar.map(x => ({
id: Math.random().toString(),
type: x,
})));
async function reloadAsk() {
const { canceled } = await os.confirm({
type: 'info',
text: i18n.ts.reloadToApplySetting,
});
if (canceled) return;
unisonReload();
}
async function addItem() {
const menu = Object.keys(timelineHeaderItemDef).filter(k => !defaultStore.state.timelineTopBar.includes(k));
console.log(menu);
const { canceled, result: item } = await os.select({
title: i18n.ts.addItem,
items: [...menu.map(k => ({
value: k, text: timelineHeaderItemDef[k].title,
}))],
});
if (canceled) return;
items.value = [...items.value, {
id: Math.random().toString(),
type: item,
}];
}
function removeItem(index: number) {
items.value.splice(index, 1);
}
async function save() {
defaultStore.set('timelineTopBar', items.value.map(x => x.type));
await reloadAsk();
}
function reset() {
items.value = defaultStore.def.timelineTopBar.default.map(x => ({
id: Math.random().toString(),
type: x,
}));
}
definePageMetadata(() => ({
title: i18n.ts.navbar,
icon: 'ti ti-list',
}));
</script>
<style lang="scss" module>
.item {
position: relative;
display: block;
line-height: 2.85rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: var(--navFg);
}
.itemIcon {
position: relative;
width: 32px;
margin-right: 8px;
}
.itemText {
position: relative;
font-size: 0.9em;
}
.itemRemove {
position: absolute;
z-index: 10000;
width: 32px;
height: 32px;
color: #ff2a2a;
right: 8px;
opacity: 0.8;
}
.itemHandle {
cursor: move;
width: 32px;
height: 32px;
margin: 0 8px;
opacity: 0.5;
}
</style>

61
packages/frontend/src/pages/timeline.vue
View File

@ -53,6 +53,7 @@ import { deviceKind } from '@/scripts/device-kind.js';
import { deepMerge } from '@/scripts/merge.js';
import { MenuItem } from '@/types/menu.js';
import { miLocalStorage } from '@/local-storage.js';
import { timelineHeaderItemDef } from '@/timelineHeader.js';
provide('shouldOmitHeaderTitle', true);
@ -277,49 +278,23 @@ const headerActions = computed(() => {
}
return tmp;
});
const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserLists.value.map(l => ({
key: 'list:' + l.id,
title: l.name,
icon: 'ti ti-star',
iconOnly: true,
}))), {
key: 'home',
title: i18n.ts._timelines.home,
icon: 'ti ti-home',
iconOnly: true,
}, ...(isLocalTimelineAvailable ? [{
key: 'local',
title: i18n.ts._timelines.local,
icon: 'ti ti-planet',
iconOnly: true,
}, {
key: 'social',
title: i18n.ts._timelines.social,
icon: 'ti ti-universe',
iconOnly: true,
}] : []), ...(isGlobalTimelineAvailable ? [{
key: 'global',
title: i18n.ts._timelines.global,
icon: 'ti ti-whirl',
iconOnly: true,
}] : []), {
icon: 'ti ti-list',
title: i18n.ts.lists,
iconOnly: true,
onClick: chooseList,
}, {
icon: 'ti ti-antenna',
title: i18n.ts.antennas,
iconOnly: true,
onClick: chooseAntenna,
}, {
icon: 'ti ti-device-tv',
title: i18n.ts.channel,
iconOnly: true,
onClick: chooseChannel,
}] as Tab[]);
let headerTabs = computed(() => defaultStore.reactiveState.timelineTopBar.value.map(tab => ({
...(tab !== 'lists' && tab !== 'antennas' && tab !== 'channels' ? {
key: tab,
} : {}),
title: timelineHeaderItemDef[tab].title,
icon: timelineHeaderItemDef[tab].icon,
iconOnly: timelineHeaderItemDef[tab].iconOnly,
...(tab === 'lists' ? {
onClick: (ev) => chooseList(ev),
} : {}),
...(tab === 'antennas' ? {
onClick: (ev) => chooseAntenna(ev),
} : {}),
...(tab === 'channels' ? {
onClick: (ev) => chooseChannel(ev),
} : {}),
})) as Tab[]);
const headerTabsWhenNotLogin = computed(() => [
...(isLocalTimelineAvailable ? [{
key: 'local',

4
packages/frontend/src/router/definition.ts
View File

@ -112,6 +112,10 @@ const routes: RouteDef[] = [{
path: '/navbar',
name: 'navbar',
component: page(() => import('@/pages/settings/navbar.vue')),
}, {
path: '/timelineheader',
name: 'timelineHeader',
component: page(() => import('@/pages/settings/timelineHeader.vue')),
}, {
path: '/statusbar',
name: 'statusbar',

21
packages/frontend/src/store.ts
View File

@ -52,7 +52,8 @@ export type SoundStore = {
volume: number;
}
export const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
export const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable);
export const postFormActions: PostFormAction[] = [];
export const userActions: UserAction[] = [];
export const noteActions: NoteAction[] = [];
@ -148,6 +149,22 @@ export const defaultStore = markRaw(new Storage('base', {
'ui',
],
},
timelineTopBar: {
where: 'deviceAccount',
default: [
'home',
...(isLocalTimelineAvailable ? [
'local',
'social',
] : []),
...(isGlobalTimelineAvailable ? [
'global',
] : []),
'lists',
'antennas',
'channels',
],
},
visibility: {
where: 'deviceAccount',
default: 'public' as (typeof Misskey.noteVisibilities)[number],
@ -522,6 +539,8 @@ interface Watcher {
*/
import lightTheme from '@/themes/l-light.json5';
import darkTheme from '@/themes/d-green-lime.json5';
import { $i } from '@/account.js';
import { instance } from '@/instance.js';
export class ColdDeviceStorage {
public static default = {

117
packages/frontend/src/timelineHeader.ts Normal file
View File

@ -0,0 +1,117 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { reactive } from 'vue';
import { i18n } from '@/i18n.js';
import { antennasCache, favoritedChannelsCache, userListsCache } from '@/cache.js';
import { MenuItem } from '@/types/menu.js';
import * as os from '@/os.js';
import { miLocalStorage } from '@/local-storage.js';
import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/store.js';
export const timelineHeaderItemDef = reactive({
home: {
title: i18n.ts._timelines.home,
icon: 'ti ti-home',
iconOnly: false,
},
...(isLocalTimelineAvailable ? {
local: {
key: 'local',
title: i18n.ts._timelines.local,
icon: 'ti ti-planet',
iconOnly: true,
},
social: {
title: i18n.ts._timelines.social,
icon: 'ti ti-universe',
iconOnly: true,
} } : {}),
...(isGlobalTimelineAvailable ? { global: {
key: 'global',
title: i18n.ts._timelines.global,
icon: 'ti ti-whirl',
iconOnly: true,
} } : {}),
lists: {
icon: 'ti ti-list',
title: i18n.ts.lists,
iconOnly: true,
},
antennas: {
icon: 'ti ti-antenna',
title: i18n.ts.antennas,
iconOnly: true,
},
channels: {
icon: 'ti ti-device-tv',
title: i18n.ts.channel,
iconOnly: true,
},
});
async function chooseList(ev: MouseEvent): Promise<void> {
const lists = await userListsCache.fetch();
const items: MenuItem[] = [
...lists.map(list => ({
type: 'link' as const,
text: list.name,
to: `/timeline/list/${list.id}`,
})),
(lists.length === 0 ? undefined : { type: 'divider' }),
{
type: 'link' as const,
icon: 'ti ti-plus',
text: i18n.ts.createNew,
to: '/my/lists',
},
];
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
async function chooseAntenna(ev: MouseEvent): Promise<void> {
const antennas = await antennasCache.fetch();
const items: MenuItem[] = [
...antennas.map(antenna => ({
type: 'link' as const,
text: antenna.name,
indicate: antenna.hasUnreadNote,
to: `/timeline/antenna/${antenna.id}`,
})),
(antennas.length === 0 ? undefined : { type: 'divider' }),
{
type: 'link' as const,
icon: 'ti ti-plus',
text: i18n.ts.createNew,
to: '/my/antennas',
},
];
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
async function chooseChannel(ev: MouseEvent): Promise<void> {
const channels = await favoritedChannelsCache.fetch();
const items: MenuItem[] = [
...channels.map(channel => {
const lastReadedAt = miLocalStorage.getItemAsJson(`channelLastReadedAt:${channel.id}`) ?? null;
const hasUnreadNote = (lastReadedAt && channel.lastNotedAt) ? Date.parse(channel.lastNotedAt) > lastReadedAt : !!(!lastReadedAt && channel.lastNotedAt);
return {
type: 'link' as const,
text: channel.name,
indicate: hasUnreadNote,
to: `/channels/${channel.id}`,
};
}),
(channels.length === 0 ? undefined : { type: 'divider' }),
{
type: 'link' as const,
icon: 'ti ti-plus',
text: i18n.ts.createNew,
to: '/channels',
},
];
os.popupMenu(items, ev.currentTarget ?? ev.target);
}