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

MkMenuのitemを切り出して共通化

This commit is contained in:
kakkokari-gtyih 2024-10-20 17:46:33 +09:00
parent 61e7b20ad3
commit ce3679798c
7 changed files with 483 additions and 545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

420
packages/frontend/src/components/MkMenu.item.vue Normal file
View File

@ -0,0 +1,420 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
<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>
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span>
</span>
<MkA
v-else-if="item.type === 'link'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item]"
:to="item.to"
@click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<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"/>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</MkA>
<a
v-else-if="item.type === 'a'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item]"
:href="item.href"
:target="item.target"
:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
:download="item.download"
@click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</a>
<button
v-else-if="item.type === 'user'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item, { [$style.active]: item.active }]"
@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
<div v-if="item.indicate" :class="$style.item_content">
<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</button>
<button
v-else-if="item.type === 'switch'"
role="menuitemcheckbox"
tabindex="0"
:class="['_button', $style.item]"
:disabled="unref(item.disabled)"
@click.prevent="switchItem(item)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<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)"/>
<div :class="$style.item_content">
<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)"/>
</div>
</button>
<button
v-else-if="item.type === 'radio'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
:disabled="unref(item.disabled)"
@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
@keydown.enter.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>
<div :class="$style.item_content">
<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>
</div>
</button>
<button
v-else-if="item.type === 'radioOption'"
role="menuitemradio"
tabindex="0"
:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<div :class="$style.icon">
<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
</div>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
</div>
</button>
<button
v-else-if="item.type === 'parent'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
@keydown.enter.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>
<div :class="$style.item_content">
<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>
</div>
</button>
<button
v-else role="menuitem"
tabindex="0"
:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<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"/>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</button>
</template>
<script setup lang="ts">
import { unref } from 'vue';
import type { MenuItem, InnerMenuItem, MenuAction, MenuParent, MenuRadio, MenuSwitch } from '@/types/menu.js';
import MkSwitchButton from '@/components/MkSwitch.button.vue';
import { isTouchUsing } from '@/scripts/touch';
const props = withDefaults(defineProps<{
item: InnerMenuItem;
childShowingItem: MenuItem | null;
asDrawer?: boolean;
big?: boolean;
center?: boolean;
}>(), {
asDrawer: false,
big: false,
center: false,
});
let preferClick = isTouchUsing || props.asDrawer;
const emit = defineEmits<{
(ev: 'close', value: boolean): void;
(ev: 'showRadioOptions', item: MenuRadio, event: MouseEvent | KeyboardEvent): void;
(ev: 'showChildren', item: MenuParent, event: MouseEvent | KeyboardEvent): Promise<void>;
(ev: 'onItemMouseEnter', rawEv: MouseEvent): void;
(ev: 'onItemMouseLeave', rawEv: MouseEvent): void;
}>();
function close(value: boolean) {
emit('close', value);
}
function clicked(fn: MenuAction, ev: MouseEvent, doClose: boolean = true) {
fn(ev);
if (!doClose) return;
close(true);
}
function showRadioOptions(item: MenuRadio, ev: MouseEvent | KeyboardEvent) {
emit('showRadioOptions', item, ev);
}
function showChildren(item: MenuParent, ev: MouseEvent | KeyboardEvent) {
emit('showChildren', item, ev);
}
function switchItem(item: MenuSwitch & { ref: any }) {
if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
item.ref = !item.ref;
}
function onItemMouseEnter(ev: MouseEvent) {
emit('onItemMouseEnter', ev);
}
function onItemMouseLeave(ev: MouseEvent) {
emit('onItemMouseLeave', ev);
}
</script>
<style module lang="scss">
.center.item {
text-align: center;
}
.big:not(.asDrawer).item {
padding: 6px 20px;
font-size: 0.95em;
line-height: 24px;
}
.asDrawer {
&.item {
font-size: 1em;
padding: 12px 24px;
&::before {
width: calc(100% - 24px);
border-radius: 12px;
}
> .icon {
margin-right: 14px;
width: 24px;
}
}
&.divider {
margin: 12px 0;
}
}
.item {
display: flex;
align-items: center;
position: relative;
padding: 5px 16px;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none !important;
color: var(--menuFg, var(--MI_THEME-fg));
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 16px);
height: 100%;
border-radius: 6px;
}
&:focus-visible {
outline: none;
&:not(:hover):not(:active)::before {
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
}
}
&:not(:disabled) {
&:hover,
&:focus-visible:active,
&:focus-visible.active {
color: var(--menuHoverFg, var(--MI_THEME-accent));
&::before {
background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
}
}
&:not(:focus-visible):active,
&:not(:focus-visible).active {
color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
&::before {
background-color: var(--menuActiveBg, var(--MI_THEME-accent));
}
}
}
&:disabled {
cursor: not-allowed;
}
&.danger {
--menuFg: #ff2a2a;
--menuHoverFg: #fff;
--menuHoverBg: #ff4242;
--menuActiveFg: #fff;
--menuActiveBg: #d42e2e;
}
&.radio {
--menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.parent {
--menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.label {
pointer-events: none;
font-size: 0.7em;
padding-bottom: 4px;
}
&.pending {
pointer-events: none;
opacity: 0.7;
}
&.none {
pointer-events: none;
opacity: 0.7;
}
}
.item_content {
width: 100%;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
text-overflow: ellipsis;
}
.item_content_text {
max-width: calc(100vw - 4rem);
text-overflow: ellipsis;
overflow: hidden;
}
.switchButton {
margin-left: -2px;
--height: 1.35em;
}
.switchText {
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
margin-right: 8px;
line-height: 1;
}
.caret {
margin-left: auto;
}
.avatar {
margin-right: 5px;
width: 20px;
height: 20px;
}
.indicator {
display: flex;
align-items: center;
color: var(--MI_THEME-indicator);
font-size: 12px;
}
.divider {
margin: 8px 0;
border-top: solid 0.5px var(--MI_THEME-divider);
}
.radioIcon {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
vertical-align: -0.125em;
border-radius: 50%;
border: solid 2px var(--MI_THEME-divider);
background-color: var(--MI_THEME-panel);
&.radioChecked {
border-color: var(--MI_THEME-accent);
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--MI_THEME-accent);
}
}
}
</style>

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

@ -8,8 +8,6 @@ SPDX-License-Identifier: AGPL-3.0-only
role="menu"
:class="{
[$style.root]: true,
[$style.center]: align === 'center',
[$style.big]: big,
[$style.asDrawer]: asDrawer,
}"
@focusin.passive.stop="() => {}"
@ -27,144 +25,19 @@ SPDX-License-Identifier: AGPL-3.0-only
@keydown.stop="() => {}"
@contextmenu.self.prevent="() => {}"
>
<template v-for="item in (items2 ?? [])">
<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>
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span>
</span>
<MkA
v-else-if="item.type === 'link'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item]"
:to="item.to"
@click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<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"/>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</MkA>
<a
v-else-if="item.type === 'a'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item]"
:href="item.href"
:target="item.target"
:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
:download="item.download"
@click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</a>
<button
v-else-if="item.type === 'user'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item, { [$style.active]: item.active }]"
@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
<div v-if="item.indicate" :class="$style.item_content">
<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</button>
<button
v-else-if="item.type === 'switch'"
role="menuitemcheckbox"
tabindex="0"
:class="['_button', $style.item]"
:disabled="unref(item.disabled)"
@click.prevent="switchItem(item)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<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)"/>
<div :class="$style.item_content">
<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)"/>
</div>
</button>
<button
v-else-if="item.type === 'radio'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
:disabled="unref(item.disabled)"
@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
@keydown.enter.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>
<div :class="$style.item_content">
<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>
</div>
</button>
<button
v-else-if="item.type === 'radioOption'"
role="menuitemradio"
tabindex="0"
:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<div :class="$style.icon">
<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
</div>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
</div>
</button>
<button
v-else-if="item.type === 'parent'"
role="menuitem"
tabindex="0"
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
@keydown.enter.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>
<div :class="$style.item_content">
<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>
</div>
</button>
<button
v-else role="menuitem"
tabindex="0"
:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter"
@mouseleave.passive="onItemMouseLeave"
>
<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"/>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
</div>
</button>
</template>
<XItem
v-for="item in items2 ?? []"
:item="item"
:childShowingItem="childShowingItem"
:asDrawer="asDrawer"
:big="big"
:center="align === 'center'"
@close="close"
@showRadioOptions="showRadioOptions"
@showChildren="showChildren"
@onItemMouseEnter="onItemMouseEnter"
@onItemMouseLeave="onItemMouseLeave"
/>
<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
<span>{{ i18n.ts.none }}</span>
</span>
@ -176,9 +49,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts">
import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue';
import MkSwitchButton from '@/components/MkSwitch.button.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { isTouchUsing } from '@/scripts/touch.js';
@ -190,6 +62,8 @@ const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
</script>
<script lang="ts" setup>
import XItem from '@/components/MkMenu.item.vue';
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
const props = defineProps<{
@ -232,8 +106,6 @@ const keymap = {
const childShowingItem = ref<MenuItem | null>();
let preferClick = isTouchUsing || props.asDrawer;
watch(() => props.items, () => {
const items = [...props.items].filter(item => item !== undefined) as (NonNullable<MenuItem> | MenuPending)[];
@ -333,13 +205,6 @@ async function showChildren(item: MenuParent, ev: Event) {
}
}
function clicked(fn: MenuAction, ev: MouseEvent, doClose = true) {
fn(ev);
if (!doClose) return;
close(true);
}
function close(actioned = false) {
disposeHandlers();
nextTick(() => {
@ -348,11 +213,6 @@ function close(actioned = false) {
});
}
function switchItem(item: MenuSwitch & { ref: any }) {
if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
item.ref = !item.ref;
}
function focusUp() {
if (disposed) return;
if (!itemsEl.value?.contains(document.activeElement)) return;
@ -427,26 +287,6 @@ onBeforeUnmount(() => {
<style lang="scss" module>
.root {
&.center {
> .menu {
> .item {
text-align: center;
}
}
}
&.big:not(.asDrawer) {
> .menu {
min-width: 230px;
> .item {
padding: 6px 20px;
font-size: 0.95em;
line-height: 24px;
}
}
}
&.asDrawer {
max-width: 600px;
margin: auto;
@ -457,25 +297,6 @@ onBeforeUnmount(() => {
border-radius: 24px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
> .item {
font-size: 1em;
padding: 12px 24px;
&::before {
width: calc(100% - 24px);
border-radius: 12px;
}
> .icon {
margin-right: 14px;
width: 24px;
}
}
> .divider {
margin: 12px 0;
}
}
}
}
@ -492,185 +313,4 @@ onBeforeUnmount(() => {
outline: none;
}
}
.item {
display: flex;
align-items: center;
position: relative;
padding: 5px 16px;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none !important;
color: var(--menuFg, var(--MI_THEME-fg));
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 16px);
height: 100%;
border-radius: 6px;
}
&:focus-visible {
outline: none;
&:not(:hover):not(:active)::before {
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
}
}
&:not(:disabled) {
&:hover,
&:focus-visible:active,
&:focus-visible.active {
color: var(--menuHoverFg, var(--MI_THEME-accent));
&::before {
background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
}
}
&:not(:focus-visible):active,
&:not(:focus-visible).active {
color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
&::before {
background-color: var(--menuActiveBg, var(--MI_THEME-accent));
}
}
}
&:disabled {
cursor: not-allowed;
}
&.danger {
--menuFg: #ff2a2a;
--menuHoverFg: #fff;
--menuHoverBg: #ff4242;
--menuActiveFg: #fff;
--menuActiveBg: #d42e2e;
}
&.radio {
--menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.parent {
--menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.label {
pointer-events: none;
font-size: 0.7em;
padding-bottom: 4px;
}
&.pending {
pointer-events: none;
opacity: 0.7;
}
&.none {
pointer-events: none;
opacity: 0.7;
}
}
.item_content {
width: 100%;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
text-overflow: ellipsis;
}
.item_content_text {
max-width: calc(100vw - 4rem);
text-overflow: ellipsis;
overflow: hidden;
}
.switchButton {
margin-left: -2px;
--height: 1.35em;
}
.switchText {
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
margin-right: 8px;
line-height: 1;
}
.caret {
margin-left: auto;
}
.avatar {
margin-right: 5px;
width: 20px;
height: 20px;
}
.indicator {
display: flex;
align-items: center;
color: var(--MI_THEME-indicator);
font-size: 12px;
}
.divider {
margin: 8px 0;
border-top: solid 0.5px var(--MI_THEME-divider);
}
.radioIcon {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
vertical-align: -0.125em;
border-radius: 50%;
border: solid 2px var(--MI_THEME-divider);
background-color: var(--MI_THEME-panel);
&.radioChecked {
border-color: var(--MI_THEME-accent);
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--MI_THEME-accent);
}
}
}
</style>

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

@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed } from 'vue';
import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed, readonly } from 'vue';
import * as os from '@/os.js';
import { isTouchUsing } from '@/scripts/touch.js';
import { defaultStore } from '@/store.js';
@ -349,6 +349,7 @@ onUnmounted(() => {
});
defineExpose({
type: readonly(type),
close,
});
</script>

14
packages/frontend/src/components/MkPostForm.vue
View File

@ -534,24 +534,12 @@ function showOtherSettings() {
reactionAcceptance.value = value;
},
reset: () => {
reset();
clear();
},
closed: () => dispose(),
});
}
function reset() {
text.value = '';
cw.value = null;
useCw.value = false;
visibility.value = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
localOnly.value = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
files.value = [];
poll.value = null;
quoteId.value = null;
reactionAcceptance.value = defaultStore.state.reactionAcceptance;
}
function pushVisibleUser(user: Misskey.entities.UserDetailed) {
if (!visibleUsers.value.some(u => u.username === user.username && u.host === user.host)) {
visibleUsers.value.push(user);

191
packages/frontend/src/components/MkPostFormOtherMenu.vue
View File

@ -19,40 +19,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div :class="$style.menuRoot">
<button
role="menuitem"
tabindex="0"
:class="['_button', $style.item]"
@click.prevent="toggleReactionAcceptance"
>
<i
class="ti-fw"
:class="[$style.icon, {
'ti ti-heart': props.currentReactionAcceptance === 'likeOnly',
[$style.danger]: props.currentReactionAcceptance === 'likeOnly',
'ti ti-heart-plus': props.currentReactionAcceptance === 'likeOnlyForRemote',
'ti ti-icons': props.currentReactionAcceptance == null || !['likeOnly', 'likeOnlyForRemote'].includes(props.currentReactionAcceptance),
}]"
></i>
<div :class="$style.menuItem_content">
<span :class="$style.menuItem_content_text">{{ i18n.ts.reactionAcceptance }}</span>
</div>
</button>
<div role="separator" tabindex="-1" :class="$style.divider"></div>
<button
role="menuitem"
tabindex="0"
:class="['_button', $style.item, $style.danger]"
@click.prevent="reset"
>
<i
class="ti-fw ti ti-trash"
:class="$style.icon"
></i>
<div :class="$style.menuItem_content">
<span :class="$style.menuItem_content_text">{{ i18n.ts.reset }}</span>
</div>
</button>
<MkMenuItem
v-for="item in menuDef"
:item="item"
:childShowingItem="null"
:asDrawer="type === 'drawer'"
/>
</div>
</div>
</MkModal>
@ -61,12 +33,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { shallowRef, computed } from 'vue';
import * as Misskey from 'misskey-js';
import MkModal from '@/components/MkModal.vue';
import MkMenuItem from '@/components/MkMenu.item.vue';
import { instance } from '@/instance.js';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import number from '@/filters/number.js';
import type { NonModalCompatibleInnerMenuItem } from '@/types/menu.js';
const modal = shallowRef<InstanceType<typeof MkModal>>();
const props = defineProps<{
@ -89,6 +66,32 @@ const textCountPercentage = computed(() => {
return props.textLength / maxTextLength.value * 100;
});
// actionを発火した瞬間にMkMenuItemからcloseイベントが出るが、それを利用すると正しくemitできないため、action内で別途closeを呼ぶ
const menuDef = computed<NonModalCompatibleInnerMenuItem[]>(() => {
let reactionAcceptanceIcon = 'ti ti-icons';
if (props.currentReactionAcceptance === 'likeOnly') {
reactionAcceptanceIcon = 'ti ti-heart _love';
} else if (props.currentReactionAcceptance === 'likeOnlyForRemote') {
reactionAcceptanceIcon = 'ti ti-heart-plus';
}
return [{
icon: reactionAcceptanceIcon,
text: i18n.ts.reactionAcceptance,
action: () => {
toggleReactionAcceptance();
},
}, { type: 'divider' }, {
icon: 'ti ti-trash',
text: i18n.ts.reset,
danger: true,
action: () => {
reset();
},
}];
});
async function toggleReactionAcceptance() {
const select = await os.select({
title: i18n.ts.reactionAcceptance,
@ -134,25 +137,6 @@ async function reset() {
.menuRoot {
padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
> .item {
font-size: 1em;
padding: 12px 24px;
&::before {
width: calc(100% - 24px);
border-radius: 12px;
}
> .icon {
margin-right: 14px;
width: 24px;
}
}
> .divider {
margin: 12px 0;
}
}
}
}
@ -216,106 +200,5 @@ async function reset() {
.menuRoot {
padding: 8px 0;
> .item {
display: flex;
align-items: center;
position: relative;
padding: 5px 16px;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none !important;
color: var(--menuFg, var(--MI_THEME-fg));
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 16px);
height: 100%;
border-radius: 6px;
}
&:focus-visible {
outline: none;
&:not(:hover):not(:active)::before {
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
}
}
&:hover,
&:focus-visible:active,
&:focus-visible.active {
color: var(--menuHoverFg, var(--MI_THEME-accent));
&::before {
background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
}
}
&:not(:focus-visible):active,
&:not(:focus-visible).active {
color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
&::before {
background-color: var(--menuActiveBg, var(--MI_THEME-accent));
}
}
&:disabled {
cursor: not-allowed;
}
&.danger {
--menuFg: #ff2a2a;
--menuHoverFg: #fff;
--menuHoverBg: #ff4242;
--menuActiveFg: #fff;
--menuActiveBg: #d42e2e;
}
.icon {
margin-right: 8px;
line-height: 1;
}
.icon.danger {
color: var(--MI_THEME-error);
}
}
> .divider {
margin: 8px 0;
border-top: solid 0.5px var(--MI_THEME-divider);
}
}
.menuItem_content {
width: 100%;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
text-overflow: ellipsis;
}
.menuItem_content_text {
max-width: calc(100vw - 4rem);
text-overflow: ellipsis;
overflow: hidden;
}
</style>

4
packages/frontend/src/style.scss
View File

@ -423,6 +423,10 @@ rt {
color: var(--MI_THEME-link);
}
._love {
color: var(--MI_THEME-love);
}
._caption {
font-size: 0.8em;
opacity: 0.7;

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

@ -28,3 +28,5 @@ type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | Men
type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuRadio | MenuRadioOption | MenuParent;
export type NonModalCompatibleInnerMenuItem = Exclude<InnerMenuItem, MenuParent | MenuRadio>;