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

user list toggle!

This commit is contained in:
tamaina 2023-07-31 08:32:54 +00:00
parent 62249403cf
commit 26674c39e8
8 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/frontend/src/components/MkMenu.vue
View File

@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</button>
<button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } ]" @click="switchItem(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkSwitchButton :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" :class="$style.switchButton" />
<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
<span :class="$style.switchText">{{ item.text }}</span>
</button>
<button v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)">
@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { focusPrev, focusNext } from '@/scripts/focus';
import MkSwitchButton from '@/components/MkSwitch.button.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch } from '@/types/menu';
import { MenuItem, InnerMenuItem, OuterMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
import * as os from '@/os';
import { i18n } from '@/i18n';
@ -146,17 +146,17 @@ function onItemMouseLeave(item) {
if (childCloseTimer) window.clearTimeout(childCloseTimer);
}
let childrenCache = new WeakMap();
async function showChildren(item: MenuItem, ev: MouseEvent) {
const children = ref([]);
let childrenCache = new WeakMap<MenuParent, OuterMenuItem[]>();
async function showChildren(item: MenuParent, ev: MouseEvent) {
const children = ref<OuterMenuItem[]>([]);
if (childrenCache.has(item)) {
children.value = childrenCache.get(item);
children.value = childrenCache.get(item)!;
} else {
if (typeof item.children === 'function') {
children.value = [{
type: 'pending',
}];
item.children().then(x => {
Promise.resolve(item.children()).then(x => {
children.value = x;
childrenCache.set(item, x);
});
@ -192,7 +192,7 @@ function focusDown() {
focusNext(document.activeElement);
}
function switchItem(item: any) {
function switchItem(item: MenuSwitch & { ref: any }) {
if (item.disabled) return;
item.ref = !item.ref;
}

8
packages/frontend/src/components/MkNote.vue
View File

@ -408,14 +408,16 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault();
react();
} else {
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value }), ev).then(focus);
const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
os.contextMenu(menu, ev).then(focus).finally(cleanup);
}
}
function menu(viaKeyboard = false): void {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value }), menuButton.value, {
const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
os.popupMenu(menu, menuButton.value, {
viaKeyboard,
}).then(focus);
}).then(focus).finally(cleanup);
}
async function clip() {

8
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -385,14 +385,16 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault();
react();
} else {
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted });
os.contextMenu(menu, ev).then(focus).finally(cleanup);
}
}
function menu(viaKeyboard = false): void {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted });
os.popupMenu(menu, menuButton.value, {
viaKeyboard,
}).then(focus);
}).then(focus).finally(cleanup);
}
async function clip() {

3
packages/frontend/src/components/MkUserPopup.vue
View File

@ -86,7 +86,8 @@ let top = $ref(0);
let left = $ref(0);
function showMenu(ev: MouseEvent) {
os.popupMenu(getUserMenu(user), ev.currentTarget ?? ev.target);
const { menu, cleanup } = getUserMenu(user);
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
}
onMounted(() => {

3
packages/frontend/src/pages/user/home.vue
View File

@ -214,7 +214,8 @@ const age = $computed(() => {
});
function menu(ev) {
os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
const { menu, cleanup } = getUserMenu(props.user, router);
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
}
function parallaxLoop() {

29
packages/frontend/src/scripts/get-note-menu.ts
View File

@ -16,6 +16,7 @@ import { defaultStore, noteActions } from '@/store';
import { miLocalStorage } from '@/local-storage';
import { getUserMenu } from '@/scripts/get-user-menu';
import { clipsCache } from '@/cache';
import { MenuItem } from '@/types/menu';
export async function getNoteClipMenu(props: {
note: misskey.entities.Note;
@ -108,6 +109,8 @@ export function getNoteMenu(props: {
const appearNote = isRenote ? props.note.renote as misskey.entities.Note : props.note;
const cleanups = [] as (() => void)[];
function del(): void {
os.confirm({
type: 'warning',
@ -233,7 +236,7 @@ export function getNoteMenu(props: {
props.translation.value = res;
}
let menu;
let menu: MenuItem[];
if ($i) {
const statePromise = os.api('notes/state', {
noteId: appearNote.id,
@ -295,7 +298,7 @@ export function getNoteMenu(props: {
action: () => toggleFavorite(true),
}),
{
type: 'parent',
type: 'parent' as const,
icon: 'ti ti-paperclip',
text: i18n.ts.clip,
children: () => getNoteClipMenu(props),
@ -318,15 +321,17 @@ export function getNoteMenu(props: {
text: i18n.ts.pin,
action: () => togglePin(true),
} : undefined,
appearNote.userId !== $i.id ? {
type: 'parent',
{
type: 'parent' as const,
icon: 'ti ti-user',
text: i18n.ts.user,
children: async () => {
const user = await os.api('users/show', { userId: appearNote.userId });
return getUserMenu(user);
const user = appearNote.userId === $i?.id ? $i : await os.api('users/show', { userId: appearNote.userId });
const { menu, cleanup } = getUserMenu(user);
cleanups.push(cleanup);
return menu;
},
},
} : undefined,
/*
...($i.isModerator || $i.isAdmin ? [
null,
@ -411,5 +416,13 @@ export function getNoteMenu(props: {
}]);
}
return menu;
const cleanup = () => {
if (_DEV_) console.log('note menu cleanup', cleanups);
cleanups.forEach(cleanup => cleanup());
};
return {
menu,
cleanup,
};
}

43
packages/frontend/src/scripts/get-user-menu.ts
View File

@ -4,7 +4,7 @@
*/
import { toUnicode } from 'punycode';
import { defineAsyncComponent } from 'vue';
import { defineAsyncComponent, ref, watch } from 'vue';
import * as misskey from 'misskey-js';
import { i18n } from '@/i18n';
import copyToClipboard from '@/scripts/copy-to-clipboard';
@ -19,6 +19,8 @@ import { antennasCache, rolesCache, userListsCache } from '@/cache';
export function getUserMenu(user: misskey.entities.UserDetailed, router: Router = mainRouter) {
const meId = $i ? $i.id : null;
const cleanups = [] as (() => void)[];
async function toggleMute() {
if (user.isMuted) {
os.apiWithDialog('mute/delete', {
@ -168,17 +170,32 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
text: i18n.ts.addToList,
children: async () => {
const lists = await userListsCache.fetch(() => os.api('users/lists/list'));
return lists.map(list => ({
text: list.name,
action: async () => {
await os.apiWithDialog('users/lists/push', {
return lists.map(list => {
const isListed = ref(list.userIds.includes(user.id));
cleanups.push(watch(isListed, () => {
if (isListed.value) {
os.apiWithDialog('users/lists/push', {
listId: list.id,
userId: user.id,
}).then(() => {
list.userIds.push(user.id);
});
userListsCache.delete();
},
} else {
os.apiWithDialog('users/lists/pull', {
listId: list.id,
userId: user.id,
}).then(() => {
list.userIds.splice(list.userIds.indexOf(user.id), 1);
});
}
}));
return {
type: 'switch',
text: list.name,
ref: isListed,
};
});
},
}, {
type: 'parent',
@ -311,5 +328,13 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
}))]);
}
return menu;
const cleanup = () => {
if (_DEV_) console.log('user menu cleanup', cleanups);
cleanups.forEach(cleanup => cleanup());
};
return {
menu,
cleanup,
};
}

2
packages/frontend/src/types/menu.ts
View File

@ -16,7 +16,7 @@ export type MenuA = { type: 'a', href: string, target?: string, download?: strin
export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
export type MenuParent = { type: 'parent', text: string, icon?: string, children: OuterMenuItem[] };
export type MenuParent = { type: 'parent', text: string, icon?: string, children: OuterMenuItem[] | (() => Promise<OuterMenuItem[]> | OuterMenuItem[]) };
export type MenuPending = { type: 'pending' };