OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2025-01-05 23:36:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: ドロワーなどのOptionが当たらない問題を修正

Browse source
This commit is contained in:
kakkokari-gtyih 2024-10-21 23:23:57 +09:00
parent 4f5d58cea1
commit f722dddd75
1 changed files with 142 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
packages/frontend/src/components/MkMenu.item.vue
View file

@ -3,15 +3,16 @@ SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }"> <template>
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div> <div :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]"> <div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
<span style="opacity: 0.7;">{{ item.text }}</span> <span style="opacity: 0.7;">{{ item.text }}</span>
</span> </span>
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]"> <span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span> <span><MkEllipsis/></span>
</span> </span>
<MkA <MkA
v-else-if="item.type === 'link'" v-else-if="item.type === 'link'"
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
@ -20,15 +21,15 @@ SPDX-License-Identifier: AGPL-3.0-only
@click.passive="close(true)" @click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter" @mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave" @mouseleave.passive="onItemMouseLeave"
> >
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span> <span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div> </div>
</MkA> </MkA>
<a <a
v-else-if="item.type === 'a'" v-else-if="item.type === 'a'"
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
@ -40,14 +41,14 @@ SPDX-License-Identifier: AGPL-3.0-only
@click.passive="close(true)" @click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter" @mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave" @mouseleave.passive="onItemMouseLeave"
> >
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span> <span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div> </div>
</a> </a>
<button <button
v-else-if="item.type === 'user'" v-else-if="item.type === 'user'"
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
@ -55,13 +56,13 @@ SPDX-License-Identifier: AGPL-3.0-only
@click.prevent="item.active ? close(false) : clicked(item.action, $event)" @click.prevent="item.active ? close(false) : clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter" @mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave" @mouseleave.passive="onItemMouseLeave"
> >
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> <MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
<div v-if="item.indicate" :class="$style.item_content"> <div v-if="item.indicate" :class="$style.item_content">
<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span> <span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div> </div>
</button> </button>
<button <button
v-else-if="item.type === 'switch'" v-else-if="item.type === 'switch'"
role="menuitemcheckbox" role="menuitemcheckbox"
tabindex="0" tabindex="0"
@ -70,15 +71,15 @@ SPDX-License-Identifier: AGPL-3.0-only
@click.prevent="switchItem(item)" @click.prevent="switchItem(item)"
@mouseenter.passive="onItemMouseEnter" @mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave" @mouseleave.passive="onItemMouseLeave"
> >
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> <MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span> <span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> <MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
</div> </div>
</button> </button>
<button <button
v-else-if="item.type === 'radio'" v-else-if="item.type === 'radio'"
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
@ -87,14 +88,14 @@ SPDX-License-Identifier: AGPL-3.0-only
@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)" @mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)" @keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
@click.prevent="!preferClick ? null : showRadioOptions(item, $event)" @click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
> >
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span> <span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span> <span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
</div> </div>
</button> </button>
<button <button
v-else-if="item.type === 'radioOption'" v-else-if="item.type === 'radioOption'"
role="menuitemradio" role="menuitemradio"
tabindex="0" tabindex="0"
@ -102,15 +103,15 @@ SPDX-License-Identifier: AGPL-3.0-only
@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)" @click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
@mouseenter.passive="onItemMouseEnter" @mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave" @mouseleave.passive="onItemMouseLeave"
> >
<div :class="$style.icon"> <div :class="$style.icon">
<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span> <span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
</div> </div>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span> <span :class="$style.item_content_text">{{ item.text }}</span>
</div> </div>
</button> </button>
<button <button
v-else-if="item.type === 'parent'" v-else-if="item.type === 'parent'"
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
@ -118,28 +119,29 @@ SPDX-License-Identifier: AGPL-3.0-only
@mouseenter.prevent="preferClick ? null : showChildren(item, $event)" @mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)" @keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
@click.prevent="!preferClick ? null : showChildren(item, $event)" @click.prevent="!preferClick ? null : showChildren(item, $event)"
> >
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span> <span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span> <span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
</div> </div>
</button> </button>
<button <button
v-else role="menuitem" v-else role="menuitem"
tabindex="0" tabindex="0"
:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]" :class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)" @click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter" @mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave" @mouseleave.passive="onItemMouseLeave"
> >
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<div :class="$style.item_content"> <div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span> <span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div> </div>
</button> </button>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -210,14 +212,14 @@ function onItemMouseLeave(ev: MouseEvent) {
text-align: center; text-align: center;
} }
.big:not(.asDrawer).item { .big:not(.asDrawer) .item {
padding: 6px 20px; padding: 6px 20px;
font-size: 0.95em; font-size: 0.95em;
line-height: 24px; line-height: 24px;
} }
.asDrawer { .asDrawer {
&.item { > .item {
font-size: 1em; font-size: 1em;
padding: 12px 24px; padding: 12px 24px;
@ -232,7 +234,7 @@ function onItemMouseLeave(ev: MouseEvent) {
} }
} }
&.divider { > .divider {
margin: 12px 0; margin: 12px 0;
} }
} }