refactor(frontend): menuのdividerをnullで表現するのをやめる
This commit is contained in:
parent
ebdb443180
commit
b691126bff
|
@ -616,7 +616,7 @@ function getMenu() {
|
|||
type: 'switch',
|
||||
text: i18n.ts.keepOriginalUploading,
|
||||
ref: keepOriginal,
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
text: i18n.ts.addFile,
|
||||
type: 'label',
|
||||
}, {
|
||||
|
@ -627,7 +627,7 @@ function getMenu() {
|
|||
text: i18n.ts.fromUrl,
|
||||
icon: 'ti ti-link',
|
||||
action: () => { urlUpload(); },
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
text: folder.value ? folder.value.name : i18n.ts.drive,
|
||||
type: 'label',
|
||||
}, folder.value ? {
|
||||
|
|
|
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@contextmenu.self="e => e.preventDefault()"
|
||||
>
|
||||
<template v-for="(item, i) in items2">
|
||||
<div v-if="item === null" role="separator" :class="$style.divider"></div>
|
||||
<div v-if="item.type === 'divider'" role="separator" :class="$style.divider"></div>
|
||||
<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item]">
|
||||
<span>{{ item.text }}</span>
|
||||
</span>
|
||||
|
|
|
@ -464,7 +464,7 @@ function showRenoteMenu(viaKeyboard = false): void {
|
|||
pleaseLogin();
|
||||
os.popupMenu([
|
||||
getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
|
||||
null,
|
||||
{ type: 'divider' },
|
||||
getUnrenote(),
|
||||
], renoteTime.value, {
|
||||
viaKeyboard: viaKeyboard,
|
||||
|
@ -472,7 +472,7 @@ function showRenoteMenu(viaKeyboard = false): void {
|
|||
} else {
|
||||
os.popupMenu([
|
||||
getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
|
||||
null,
|
||||
{ type: 'divider' },
|
||||
getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote),
|
||||
$i.isModerator || $i.isAdmin ? getUnrenote() : undefined,
|
||||
], renoteTime.value, {
|
||||
|
|
|
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { ref, shallowRef } from 'vue';
|
||||
import MkModal from './MkModal.vue';
|
||||
import MkMenu from './MkMenu.vue';
|
||||
import { MenuItem } from '@/types/menu';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
|
||||
defineProps<{
|
||||
items: MenuItem[];
|
||||
|
|
|
@ -103,7 +103,7 @@ function showMenu(ev) {
|
|||
action: () => {
|
||||
os.pageWindow('/about-misskey');
|
||||
},
|
||||
}, null, (instance.impressumUrl) ? {
|
||||
}, { type: 'divider' }, (instance.impressumUrl) ? {
|
||||
text: i18n.ts.impressum,
|
||||
icon: 'ti ti-file-invoice',
|
||||
action: () => {
|
||||
|
@ -121,7 +121,7 @@ function showMenu(ev) {
|
|||
action: () => {
|
||||
window.open(instance.privacyPolicyUrl, '_blank', 'noopener');
|
||||
},
|
||||
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : null, {
|
||||
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
|
||||
text: i18n.ts.help,
|
||||
icon: 'ti ti-help-circle',
|
||||
action: () => {
|
||||
|
|
|
@ -546,7 +546,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
|
|||
});
|
||||
}
|
||||
|
||||
export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement, options?: {
|
||||
export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement | null, options?: {
|
||||
align?: string;
|
||||
width?: number;
|
||||
viaKeyboard?: boolean;
|
||||
|
|
|
@ -60,7 +60,7 @@ function setFilter(ev) {
|
|||
action: () => {
|
||||
includeTypes.value = null;
|
||||
},
|
||||
}, null, ...typeItems] : typeItems;
|
||||
}, { type: 'divider' }, ...typeItems] : typeItems;
|
||||
os.popupMenu(items, ev.currentTarget ?? ev.target);
|
||||
}
|
||||
|
||||
|
|
|
@ -406,7 +406,7 @@ function menu(ev: MouseEvent, profileId: string) {
|
|||
icon: 'ti ti-download',
|
||||
href: URL.createObjectURL(new Blob([JSON.stringify(profiles.value[profileId], null, 2)], { type: 'application/json' })),
|
||||
download: `${profiles.value[profileId].name}.json`,
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
text: ts.rename,
|
||||
icon: 'ti ti-forms',
|
||||
action: () => rename(profileId),
|
||||
|
@ -414,7 +414,7 @@ function menu(ev: MouseEvent, profileId: string) {
|
|||
text: ts._preferencesBackups.save,
|
||||
icon: 'ti ti-device-floppy',
|
||||
action: () => save(profileId),
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
text: ts.delete,
|
||||
icon: 'ti ti-trash',
|
||||
action: () => deleteProfile(profileId),
|
||||
|
|
|
@ -232,7 +232,7 @@ const age = computed(() => {
|
|||
return calcAge(props.user.birthday);
|
||||
});
|
||||
|
||||
function menu(ev) {
|
||||
function menu(ev: MouseEvent) {
|
||||
const { menu, cleanup } = getUserMenu(user.value, router);
|
||||
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
|
||||
}
|
||||
|
|
|
@ -82,7 +82,7 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
|
|||
to: `/my/drive/file/${file.id}`,
|
||||
text: i18n.ts._fileViewer.title,
|
||||
icon: 'ti ti-info-circle',
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
text: i18n.ts.rename,
|
||||
icon: 'ti ti-forms',
|
||||
action: () => rename(file),
|
||||
|
@ -101,7 +101,7 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
|
|||
aspectRatio: NaN,
|
||||
uploadFolder: folder ? folder.id : folder,
|
||||
}),
|
||||
}] : [], null, {
|
||||
}] : [], { type: 'divider' }, {
|
||||
text: i18n.ts.createNoteFromTheFile,
|
||||
icon: 'ti ti-pencil',
|
||||
action: () => os.post({
|
||||
|
@ -118,7 +118,7 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
|
|||
text: i18n.ts.download,
|
||||
icon: 'ti ti-download',
|
||||
download: file.name,
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
text: i18n.ts.delete,
|
||||
icon: 'ti ti-trash',
|
||||
danger: true,
|
||||
|
@ -126,7 +126,7 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
|
|||
}];
|
||||
|
||||
if (defaultStore.state.devMode) {
|
||||
menu = menu.concat([null, {
|
||||
menu = menu.concat([{ type: 'divider' }, {
|
||||
icon: 'ti ti-id',
|
||||
text: i18n.ts.copyFileId,
|
||||
action: () => {
|
||||
|
|
|
@ -61,7 +61,7 @@ export async function getNoteClipMenu(props: {
|
|||
},
|
||||
);
|
||||
},
|
||||
})), null, {
|
||||
})), { type: 'divider' }, {
|
||||
icon: 'ti ti-plus',
|
||||
text: i18n.ts.createNew,
|
||||
action: async () => {
|
||||
|
@ -94,7 +94,7 @@ export async function getNoteClipMenu(props: {
|
|||
}];
|
||||
}
|
||||
|
||||
export function getAbuseNoteMenu(note: misskey.entities.Note, text: string): MenuItem {
|
||||
export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): MenuItem {
|
||||
return {
|
||||
icon: 'ti ti-exclamation-circle',
|
||||
text,
|
||||
|
@ -108,7 +108,7 @@ export function getAbuseNoteMenu(note: misskey.entities.Note, text: string): Men
|
|||
};
|
||||
}
|
||||
|
||||
export function getCopyNoteLinkMenu(note: misskey.entities.Note, text: string): MenuItem {
|
||||
export function getCopyNoteLinkMenu(note: Misskey.entities.Note, text: string): MenuItem {
|
||||
return {
|
||||
icon: 'ti ti-link',
|
||||
text,
|
||||
|
@ -264,7 +264,7 @@ export function getNoteMenu(props: {
|
|||
text: i18n.ts.unclip,
|
||||
danger: true,
|
||||
action: unclip,
|
||||
}, null] : []
|
||||
}, { type: 'divider' }] : []
|
||||
), {
|
||||
icon: 'ti ti-info-circle',
|
||||
text: i18n.ts.details,
|
||||
|
@ -291,7 +291,7 @@ export function getNoteMenu(props: {
|
|||
text: i18n.ts.translate,
|
||||
action: translate,
|
||||
} : undefined,
|
||||
null,
|
||||
{ type: 'divider' },
|
||||
statePromise.then(state => state.isFavorited ? {
|
||||
icon: 'ti ti-star-off',
|
||||
text: i18n.ts.unfavorite,
|
||||
|
@ -338,7 +338,7 @@ export function getNoteMenu(props: {
|
|||
},
|
||||
/*
|
||||
...($i.isModerator || $i.isAdmin ? [
|
||||
null,
|
||||
{ type: 'divider' },
|
||||
{
|
||||
icon: 'ti ti-speakerphone',
|
||||
text: i18n.ts.promote,
|
||||
|
@ -347,13 +347,13 @@ export function getNoteMenu(props: {
|
|||
: []
|
||||
),*/
|
||||
...(appearNote.userId !== $i.id ? [
|
||||
null,
|
||||
{ type: 'divider' },
|
||||
appearNote.userId !== $i.id ? getAbuseNoteMenu(appearNote, i18n.ts.reportAbuse) : undefined,
|
||||
]
|
||||
: []
|
||||
),
|
||||
...(appearNote.userId === $i.id || $i.isModerator || $i.isAdmin ? [
|
||||
null,
|
||||
{ type: 'divider' },
|
||||
appearNote.userId === $i.id ? {
|
||||
icon: 'ti ti-edit',
|
||||
text: i18n.ts.deleteAndEdit,
|
||||
|
@ -528,10 +528,9 @@ export function getRenoteMenu(props: {
|
|||
}]);
|
||||
}
|
||||
|
||||
// nullを挟むことで区切り線を出せる
|
||||
const renoteItems = [
|
||||
...normalRenoteItems,
|
||||
...(channelRenoteItems.length > 0 && normalRenoteItems.length > 0) ? [null] : [],
|
||||
...(channelRenoteItems.length > 0 && normalRenoteItems.length > 0) ? [{ type: 'divider' }] : [],
|
||||
...channelRenoteItems,
|
||||
];
|
||||
|
||||
|
|
|
@ -183,7 +183,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${user.host}`;
|
||||
os.post({ specified: user, initialText: `${canonical} ` });
|
||||
},
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
icon: 'ti ti-pencil',
|
||||
text: i18n.ts.editMemo,
|
||||
action: () => {
|
||||
|
@ -307,7 +307,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
}]);
|
||||
//}
|
||||
|
||||
menu = menu.concat([null, {
|
||||
menu = menu.concat([{ type: 'divider' }, {
|
||||
icon: user.isMuted ? 'ti ti-eye' : 'ti ti-eye-off',
|
||||
text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
|
||||
action: toggleMute,
|
||||
|
@ -329,7 +329,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
}]);
|
||||
}
|
||||
|
||||
menu = menu.concat([null, {
|
||||
menu = menu.concat([{ type: 'divider' }, {
|
||||
icon: 'ti ti-exclamation-circle',
|
||||
text: i18n.ts.reportAbuse,
|
||||
action: reportAbuse,
|
||||
|
@ -337,7 +337,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
}
|
||||
|
||||
if (user.host !== null) {
|
||||
menu = menu.concat([null, {
|
||||
menu = menu.concat([{ type: 'divider' }, {
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.updateRemoteUser,
|
||||
action: userInfoUpdate,
|
||||
|
@ -345,7 +345,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
}
|
||||
|
||||
if (defaultStore.state.devMode) {
|
||||
menu = menu.concat([null, {
|
||||
menu = menu.concat([{ type: 'divider' }, {
|
||||
icon: 'ti ti-id',
|
||||
text: i18n.ts.copyUserId,
|
||||
action: () => {
|
||||
|
@ -355,7 +355,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
}
|
||||
|
||||
if ($i && meId === user.id) {
|
||||
menu = menu.concat([null, {
|
||||
menu = menu.concat([{ type: 'divider' }, {
|
||||
icon: 'ti ti-pencil',
|
||||
text: i18n.ts.editProfile,
|
||||
action: () => {
|
||||
|
@ -365,7 +365,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
|
|||
}
|
||||
|
||||
if (userActions.length > 0) {
|
||||
menu = menu.concat([null, ...userActions.map(action => ({
|
||||
menu = menu.concat([{ type: 'divider' }, ...userActions.map(action => ({
|
||||
icon: 'ti ti-plug',
|
||||
text: action.title,
|
||||
action: () => {
|
||||
|
|
|
@ -8,7 +8,7 @@ import { Ref } from 'vue';
|
|||
|
||||
export type MenuAction = (ev: MouseEvent) => void;
|
||||
|
||||
export type MenuDivider = null;
|
||||
export type MenuDivider = { type: 'divider' };
|
||||
export type MenuNull = undefined;
|
||||
export type MenuLabel = { type: 'label', text: string };
|
||||
export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar?: Misskey.entities.User };
|
||||
|
|
|
@ -64,7 +64,7 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
text: i18n.ts.charts,
|
||||
icon: 'ti ti-chart-line',
|
||||
to: '/about#charts',
|
||||
}, null, {
|
||||
}, { type: 'divider' }, {
|
||||
type: 'link',
|
||||
text: i18n.ts.ads,
|
||||
icon: 'ti ti-ad',
|
||||
|
@ -79,7 +79,7 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
text: i18n.ts.tools,
|
||||
icon: 'ti ti-tool',
|
||||
children: toolsMenuItems(),
|
||||
}, null, (instance.impressumUrl) ? {
|
||||
}, { type: 'divider' }, (instance.impressumUrl) ? {
|
||||
text: i18n.ts.impressum,
|
||||
icon: 'ti ti-file-invoice',
|
||||
action: () => {
|
||||
|
@ -97,7 +97,7 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
action: () => {
|
||||
window.open(instance.privacyPolicyUrl, '_blank', 'noopener');
|
||||
},
|
||||
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : null, {
|
||||
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
|
||||
text: i18n.ts.help,
|
||||
icon: 'ti ti-help-circle',
|
||||
action: () => {
|
||||
|
|
|
@ -236,7 +236,7 @@ function changeProfile(ev: MouseEvent) {
|
|||
deckStore.set('profile', k);
|
||||
unisonReload();
|
||||
},
|
||||
}))), null, {
|
||||
}))), { type: 'divider' }, {
|
||||
text: i18n.ts._deck.newProfile,
|
||||
icon: 'ti ti-plus',
|
||||
action: async () => {
|
||||
|
|
|
@ -104,7 +104,7 @@ function toggleActive() {
|
|||
}
|
||||
|
||||
function getMenu() {
|
||||
let items = [{
|
||||
let items: MenuItem[] = [{
|
||||
icon: 'ti ti-settings',
|
||||
text: i18n.ts._deck.configureColumn,
|
||||
action: async () => {
|
||||
|
@ -170,7 +170,7 @@ function getMenu() {
|
|||
action: () => {
|
||||
popRightColumn(props.column.id);
|
||||
},
|
||||
} : undefined, null, {
|
||||
} : undefined, { type: 'divider' }, {
|
||||
icon: 'ti ti-trash',
|
||||
text: i18n.ts.remove,
|
||||
danger: true,
|
||||
|
@ -180,7 +180,7 @@ function getMenu() {
|
|||
}];
|
||||
|
||||
if (props.menu) {
|
||||
items.unshift(null);
|
||||
items.unshift({ type: 'divider' });
|
||||
items = props.menu.concat(items);
|
||||
}
|
||||
|
||||
|
|
|
@ -130,7 +130,7 @@ const choose = async (ev) => {
|
|||
text: i18n.ts._timelines.global,
|
||||
icon: 'ti ti-whirl',
|
||||
action: () => { setSrc('global'); },
|
||||
}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
|
||||
}, antennaItems.length > 0 ? { type: 'divider' } : undefined, ...antennaItems, listItems.length > 0 ? { type: 'divider' } : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
|
||||
menuOpened.value = false;
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue