curse/Curse
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-03-21 11:40:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-02-23 10:16:17 +09:00
parent ea5d53172b
commit 5f8aee8c02
4 changed files with 49 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -209,7 +209,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span>{{ i18n.ts.none }}</span>
</span>
<div :class="$style.guard" :style="{ clipPath: `polygon(${guardStartX * 100}% ${guardStartY * 100}%, 100% ${guardEndY1 * 100}%, 100% ${guardEndY2 * 100}%)` }"></div>
<div :class="[$style.guard, { [$style.showGuard]: debugShowPredictionCone }]" :style="{ clipPath: `polygon(${guardStartX * 100}% ${guardStartY * 100}%, 100% ${guardEndY1 * 100}%, 100% ${guardEndY2 * 100}%)` }"></div>
</div>
<div v-if="childMenu">
@@ -242,6 +242,8 @@ const props = defineProps<{
align?: 'center' | string;
width?: number;
maxHeight?: number;
debugDisablePredictionCone?: boolean;
debugShowPredictionCone?: boolean;
}>();
const emit = defineEmits<{
@@ -485,6 +487,7 @@ const guardEndY1 = ref(0);
const guardEndY2 = ref(0);
function parentMouseMove(item: MenuParent, ev: MouseEvent) {
if (props.debugDisablePredictionCone) return;
if (child.value == null || child.value.rootElement == null) return;
const itemBounding = (ev.currentTarget as HTMLElement).getBoundingClientRect();
@@ -794,6 +797,9 @@ function onMouseLeave() {
width: 100%;
height: 100%;
cursor: pointer;
//background: #f004;
&.showGuard {
background: #f004;
}
}
</style>

29
packages/frontend/src/components/MkPopupMenu.vue
View File

@@ -4,8 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :anchorElement="anchorElement" :transparentBg="true" :returnFocusTo="returnFocusTo" @click="click" @close="onModalClose" @closed="onModalClosed">
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :returnFocusTo="returnFocusTo" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
:manualShowing="manualShowing"
:zPriority="'high'"
:anchorElement="anchorElement"
:transparentBg="true"
:returnFocusTo="returnFocusTo"
@click="click"
@close="onModalClose"
@closed="onModalClosed"
>
<MkMenu
:items="items"
:align="align"
:width="width"
:max-height="maxHeight"
:asDrawer="type === 'drawer'"
:returnFocusTo="returnFocusTo"
:debugDisablePredictionCone="debugDisablePredictionCone"
:debugShowPredictionCone="debugShowPredictionCone"
:class="{ [$style.drawer]: type === 'drawer' }"
@close="onMenuClose"
@hide="hide"
/>
</MkModal>
</template>
@@ -21,6 +44,8 @@ defineProps<{
width?: number;
anchorElement?: HTMLElement | null;
returnFocusTo?: HTMLElement | null;
debugDisablePredictionCone?: boolean;
debugShowPredictionCone?: boolean;
}>();
const emit = defineEmits<{

4
packages/frontend/src/os.ts
View File

@@ -640,6 +640,8 @@ export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElemen
width?: number;
onClosing?: () => void;
onClosed?: () => void;
debugDisablePredictionCone?: boolean;
debugShowPredictionCone?: boolean;
}): Promise<void> {
if (!(anchorElement instanceof HTMLElement)) {
anchorElement = null;
@@ -653,6 +655,8 @@ export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElemen
width: options?.width,
align: options?.align,
returnFocusTo,
debugDisablePredictionCone: options?.debugDisablePredictionCone,
debugShowPredictionCone: options?.debugShowPredictionCone,
}, {
closed: () => {
resolve();

13
packages/frontend/src/pages/debug.vue
View File

@@ -32,7 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="os.alert({ type: 'question', title: 'Question', text: 'question' })">Question</MkButton>
</div>
<MkButton @click="select">select</MkButton>
<div class="_buttons">
<MkButton @click="select($event, false, false)">select without guard</MkButton>
<MkButton @click="select($event, true, false)">select with guard</MkButton>
<MkButton @click="select($event, true, true)">select with guard (visualize)</MkButton>
</div>
</div>
</div>
</PageWithHeader>
@@ -76,7 +80,7 @@ const {
initialValue: 'info',
});
function select(ev: PointerEvent) {
function select(ev: PointerEvent, enablePredictionCone: boolean, showPredictionCone: boolean) {
os.popupMenu([
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
{ text: 'Option', action: () => {} },
@@ -109,7 +113,10 @@ function select(ev: PointerEvent) {
{ text: 'Option', action: () => {} },
{ text: 'Option', action: () => {} },
] },
], ev.target).then((value) => {
], ev.currentTarget ?? ev.target, {
debugDisablePredictionCone: !enablePredictionCone,
debugShowPredictionCone: showPredictionCone,
}).then((value) => {
console.log('Selected:', value);
});
}