mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-20 23:25:28 +02:00
enhance(frontend): improve nested popup menu ux (#17187)
* wip
* Update MkMenu.vue
* wip
* wip
* Update MkMenu.vue
* wip
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
* 💢
* Update MkMenu.vue
* Update MkMenu.vue
* Update MkMenu.vue
This commit is contained in:
syuilo
GitHub
@@ -7,30 +7,46 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<PageWithHeader>
|
||||
<div class="_spacer" style="--MI_SPACER-w: 600px;">
|
||||
<div class="_gaps_m">
|
||||
<MkResult v-if="resultType === 'empty'" type="empty"/>
|
||||
<MkResult v-if="resultType === 'notFound'" type="notFound"/>
|
||||
<MkResult v-if="resultType === 'error'" type="error"/>
|
||||
<MkSelect
|
||||
v-model="resultType" :items="resultTypeDef"
|
||||
></MkSelect>
|
||||
<MkFolder>
|
||||
<template #label>Icons</template>
|
||||
|
||||
<MkSystemIcon v-if="iconType === 'info'" type="info" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'question'" type="question" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'success'" type="success" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'warn'" type="warn" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'error'" type="error" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'waiting'" type="waiting" style="width: 150px;"/>
|
||||
<MkSelect
|
||||
v-model="iconType" :items="iconTypeDef"
|
||||
></MkSelect>
|
||||
<div class="_gaps_m">
|
||||
<MkResult v-if="resultType === 'empty'" type="empty"/>
|
||||
<MkResult v-if="resultType === 'notFound'" type="notFound"/>
|
||||
<MkResult v-if="resultType === 'error'" type="error"/>
|
||||
<MkSelect
|
||||
v-model="resultType" :items="resultTypeDef"
|
||||
></MkSelect>
|
||||
|
||||
<div class="_buttons">
|
||||
<MkButton @click="os.alert({ type: 'error', title: 'Error', text: 'error' })">Error</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'warning', title: 'Warning', text: 'warning' })">Warning</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'info', title: 'Info', text: 'info' })">Info</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'success', title: 'Success', text: 'success' })">Success</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'question', title: 'Question', text: 'question' })">Question</MkButton>
|
||||
</div>
|
||||
<MkSystemIcon v-if="iconType === 'info'" type="info" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'question'" type="question" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'success'" type="success" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'warn'" type="warn" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'error'" type="error" style="width: 150px;"/>
|
||||
<MkSystemIcon v-if="iconType === 'waiting'" type="waiting" style="width: 150px;"/>
|
||||
<MkSelect
|
||||
v-model="iconType" :items="iconTypeDef"
|
||||
></MkSelect>
|
||||
|
||||
<div class="_buttons">
|
||||
<MkButton @click="os.alert({ type: 'error', title: 'Error', text: 'error' })">Error</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'warning', title: 'Warning', text: 'warning' })">Warning</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'info', title: 'Info', text: 'info' })">Info</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'success', title: 'Success', text: 'success' })">Success</MkButton>
|
||||
<MkButton @click="os.alert({ type: 'question', title: 'Question', text: 'question' })">Question</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
<MkFolder>
|
||||
<template #label>Nested menu guard (a.k.a "prediction cone")</template>
|
||||
|
||||
<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>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</div>
|
||||
</PageWithHeader>
|
||||
@@ -47,6 +63,7 @@ import MkSelect from '@/components/MkSelect.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { useMkSelect } from '@/composables/use-mkselect.js';
|
||||
import * as os from '@/os.js';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
|
||||
const {
|
||||
model: resultType,
|
||||
@@ -74,6 +91,64 @@ const {
|
||||
initialValue: 'info',
|
||||
});
|
||||
|
||||
function select(ev: PointerEvent, enablePredictionCone: boolean, showPredictionCone: boolean) {
|
||||
os.popupMenu([
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', action: () => {} },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ text: 'Option', action: () => {} },
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
|
||||
{ text: 'Option', action: () => {} },
|
||||
] },
|
||||
], ev.currentTarget ?? ev.target, {
|
||||
debugDisablePredictionCone: !enablePredictionCone,
|
||||
debugShowPredictionCone: showPredictionCone,
|
||||
}).then((value) => {
|
||||
console.log('Selected:', value);
|
||||
});
|
||||
}
|
||||
|
||||
definePage(() => ({
|
||||
title: 'DEBUG ROOM',
|
||||
icon: 'ti ti-help-circle',
|
||||
|
||||
Reference in New Issue
Block a user