Merge b67eb4f13a into 763c708253
This commit is contained in:
かっこかり
GitHub
commit
8e343660b6
|
|
@ -30,6 +30,9 @@
|
||||||
(Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663)
|
(Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663)
|
||||||
- Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 )
|
- Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 )
|
||||||
- Enhance: リノートメニューに「リノートの詳細」を追加
|
- Enhance: リノートメニューに「リノートの詳細」を追加
|
||||||
|
- Enhance: 投稿フォームの設定メニューを改良
|
||||||
|
- 投稿フォームをリセットできるように
|
||||||
|
- 文字数カウントを復活
|
||||||
- Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
|
- Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
|
||||||
- Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正
|
- Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正
|
||||||
(Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)
|
(Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)
|
||||||
|
|
|
||||||
|
|
@ -5222,6 +5222,14 @@ export interface Locale extends ILocale {
|
||||||
* 注意事項を理解した上でオンにします。
|
* 注意事項を理解した上でオンにします。
|
||||||
*/
|
*/
|
||||||
"acknowledgeNotesAndEnable": string;
|
"acknowledgeNotesAndEnable": string;
|
||||||
|
/**
|
||||||
|
* 文字数
|
||||||
|
*/
|
||||||
|
"textCount": string;
|
||||||
|
/**
|
||||||
|
* リセット
|
||||||
|
*/
|
||||||
|
"reset": string;
|
||||||
"_accountSettings": {
|
"_accountSettings": {
|
||||||
/**
|
/**
|
||||||
* コンテンツの表示にログインを必須にする
|
* コンテンツの表示にログインを必須にする
|
||||||
|
|
|
||||||
|
|
@ -1301,6 +1301,8 @@ lockdown: "ロックダウン"
|
||||||
pleaseSelectAccount: "アカウントを選択してください"
|
pleaseSelectAccount: "アカウントを選択してください"
|
||||||
availableRoles: "利用可能なロール"
|
availableRoles: "利用可能なロール"
|
||||||
acknowledgeNotesAndEnable: "注意事項を理解した上でオンにします。"
|
acknowledgeNotesAndEnable: "注意事項を理解した上でオンにします。"
|
||||||
|
textCount: "文字数"
|
||||||
|
reset: "リセット"
|
||||||
|
|
||||||
_accountSettings:
|
_accountSettings:
|
||||||
requireSigninToViewContents: "コンテンツの表示にログインを必須にする"
|
requireSigninToViewContents: "コンテンツの表示にログインを必須にする"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,422 @@
|
||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :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>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
@ -8,8 +8,6 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
role="menu"
|
role="menu"
|
||||||
:class="{
|
:class="{
|
||||||
[$style.root]: true,
|
[$style.root]: true,
|
||||||
[$style.center]: align === 'center',
|
|
||||||
[$style.big]: big,
|
|
||||||
[$style.asDrawer]: asDrawer,
|
[$style.asDrawer]: asDrawer,
|
||||||
}"
|
}"
|
||||||
@focusin.passive.stop="() => {}"
|
@focusin.passive.stop="() => {}"
|
||||||
|
|
@ -27,144 +25,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
@keydown.stop="() => {}"
|
@keydown.stop="() => {}"
|
||||||
@contextmenu.self.prevent="() => {}"
|
@contextmenu.self.prevent="() => {}"
|
||||||
>
|
>
|
||||||
<template v-for="item in (items2 ?? [])">
|
<XItem
|
||||||
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
|
v-for="item in items2 ?? []"
|
||||||
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
|
:item="item"
|
||||||
<span style="opacity: 0.7;">{{ item.text }}</span>
|
:childShowingItem="childShowingItem"
|
||||||
</span>
|
:asDrawer="asDrawer"
|
||||||
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
|
:big="big"
|
||||||
<span><MkEllipsis/></span>
|
:center="align === 'center'"
|
||||||
</span>
|
@close="close"
|
||||||
<MkA
|
@showRadioOptions="showRadioOptions"
|
||||||
v-else-if="item.type === 'link'"
|
@showChildren="showChildren"
|
||||||
role="menuitem"
|
@onItemMouseEnter="onItemMouseEnter"
|
||||||
tabindex="0"
|
@onItemMouseLeave="onItemMouseLeave"
|
||||||
: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>
|
|
||||||
<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
|
<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
|
||||||
<span>{{ i18n.ts.none }}</span>
|
<span>{{ i18n.ts.none }}</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -176,9 +49,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue';
|
import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
|
||||||
import MkSwitchButton from '@/components/MkSwitch.button.vue';
|
import { MenuItem, InnerMenuItem, MenuPending, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
|
||||||
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
|
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import { isTouchUsing } from '@/scripts/touch.js';
|
import { isTouchUsing } from '@/scripts/touch.js';
|
||||||
|
|
@ -190,6 +62,8 @@ const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import XItem from '@/components/MkMenu.item.vue';
|
||||||
|
|
||||||
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
|
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|
@ -232,8 +106,6 @@ const keymap = {
|
||||||
|
|
||||||
const childShowingItem = ref<MenuItem | null>();
|
const childShowingItem = ref<MenuItem | null>();
|
||||||
|
|
||||||
let preferClick = isTouchUsing || props.asDrawer;
|
|
||||||
|
|
||||||
watch(() => props.items, () => {
|
watch(() => props.items, () => {
|
||||||
const items = [...props.items].filter(item => item !== undefined) as (NonNullable<MenuItem> | MenuPending)[];
|
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) {
|
function close(actioned = false) {
|
||||||
disposeHandlers();
|
disposeHandlers();
|
||||||
nextTick(() => {
|
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() {
|
function focusUp() {
|
||||||
if (disposed) return;
|
if (disposed) return;
|
||||||
if (!itemsEl.value?.contains(document.activeElement)) return;
|
if (!itemsEl.value?.contains(document.activeElement)) return;
|
||||||
|
|
@ -427,26 +287,6 @@ onBeforeUnmount(() => {
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.root {
|
.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 {
|
&.asDrawer {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
@ -457,25 +297,6 @@ onBeforeUnmount(() => {
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-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;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.headerRight">
|
<div :class="$style.headerRight">
|
||||||
<template v-if="!(channel != null && fixed)">
|
<template v-if="!(channel != null && fixed)">
|
||||||
<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
|
<button v-if="channel == null" ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
|
||||||
<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
|
<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
|
||||||
<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
|
<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
|
||||||
<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
|
<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
|
||||||
|
|
@ -32,15 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
|
<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
|
<button v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
|
||||||
<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
|
<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
|
||||||
<span v-else><i class="ti ti-rocket-off"></i></span>
|
<span v-else><i class="ti ti-rocket-off"></i></span>
|
||||||
</button>
|
</button>
|
||||||
<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
|
<button ref="otherSettingsButton" v-tooltip="i18n.ts.other" class="_button" :class="$style.headerRightItem" @click="showOtherSettings"><i class="ti ti-dots"></i></button>
|
||||||
<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
|
|
||||||
<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
|
|
||||||
<span v-else><i class="ti ti-icons"></i></span>
|
|
||||||
</button>
|
|
||||||
<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
|
<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
|
||||||
<div :class="$style.submitInner">
|
<div :class="$style.submitInner">
|
||||||
<template v-if="posted"></template>
|
<template v-if="posted"></template>
|
||||||
|
|
@ -162,6 +158,7 @@ const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
|
||||||
const cwInputEl = shallowRef<HTMLInputElement | null>(null);
|
const cwInputEl = shallowRef<HTMLInputElement | null>(null);
|
||||||
const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
|
const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
|
||||||
const visibilityButton = shallowRef<HTMLElement>();
|
const visibilityButton = shallowRef<HTMLElement>();
|
||||||
|
const otherSettingsButton = shallowRef<HTMLElement>();
|
||||||
|
|
||||||
const posting = ref(false);
|
const posting = ref(false);
|
||||||
const posted = ref(false);
|
const posted = ref(false);
|
||||||
|
|
@ -516,20 +513,20 @@ async function toggleLocalOnly() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleReactionAcceptance() {
|
function showOtherSettings() {
|
||||||
const select = await os.select({
|
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkPostFormOtherMenu.vue')), {
|
||||||
title: i18n.ts.reactionAcceptance,
|
currentReactionAcceptance: reactionAcceptance.value,
|
||||||
items: [
|
textLength: textLength.value,
|
||||||
{ value: null, text: i18n.ts.all },
|
src: otherSettingsButton.value,
|
||||||
{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
|
}, {
|
||||||
{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly },
|
changeReactionAcceptance: (value: Misskey.entities.Note['reactionAcceptance']) => {
|
||||||
{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote },
|
reactionAcceptance.value = value;
|
||||||
{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
|
},
|
||||||
],
|
reset: () => {
|
||||||
default: reactionAcceptance.value,
|
clear();
|
||||||
|
},
|
||||||
|
closed: () => dispose(),
|
||||||
});
|
});
|
||||||
if (select.canceled) return;
|
|
||||||
reactionAcceptance.value = select.result;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function pushVisibleUser(user: Misskey.entities.UserDetailed) {
|
function pushVisibleUser(user: Misskey.entities.UserDetailed) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()">
|
||||||
|
<div class="_popup _shadow" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
|
||||||
|
<div :class="$style.textCountRoot">
|
||||||
|
<div :class="$style.textCountLabel">{{ i18n.ts.textCount }}</div>
|
||||||
|
<div
|
||||||
|
:class="[$style.textCount,
|
||||||
|
{ [$style.danger]: textCountPercentage > 100 },
|
||||||
|
{ [$style.warning]: textCountPercentage > 90 && textCountPercentage <= 100 },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div :class="$style.textCountGraph"></div>
|
||||||
|
<div><span :class="$style.textCountCurrent">{{ number(textLength) }}</span> / {{ number(maxTextLength) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="$style.menuRoot">
|
||||||
|
<MkMenuItem
|
||||||
|
v-for="item in menuDef"
|
||||||
|
:item="item"
|
||||||
|
:childShowingItem="null"
|
||||||
|
:asDrawer="type === 'drawer'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</MkModal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { shallowRef, computed, inject } 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 mock = inject<boolean>('mock', false);
|
||||||
|
|
||||||
|
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
currentReactionAcceptance: Misskey.entities.Note['reactionAcceptance'];
|
||||||
|
textLength: number;
|
||||||
|
src?: HTMLElement;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(ev: 'changeReactionAcceptance', value: Misskey.entities.Note['reactionAcceptance']): void;
|
||||||
|
(ev: 'reset'): void;
|
||||||
|
(ev: 'closed'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const maxTextLength = computed(() => {
|
||||||
|
return instance ? instance.maxNoteTextLength : 1000;
|
||||||
|
});
|
||||||
|
|
||||||
|
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: () => {
|
||||||
|
if (mock) return;
|
||||||
|
reset();
|
||||||
|
},
|
||||||
|
}];
|
||||||
|
});
|
||||||
|
|
||||||
|
async function toggleReactionAcceptance() {
|
||||||
|
const select = await os.select({
|
||||||
|
title: i18n.ts.reactionAcceptance,
|
||||||
|
items: [
|
||||||
|
{ value: null, text: i18n.ts.all },
|
||||||
|
{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
|
||||||
|
{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly },
|
||||||
|
{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote },
|
||||||
|
{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
|
||||||
|
],
|
||||||
|
default: props.currentReactionAcceptance,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!select.canceled) {
|
||||||
|
emit('changeReactionAcceptance', select.result);
|
||||||
|
}
|
||||||
|
|
||||||
|
modal.value?.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reset() {
|
||||||
|
const { canceled } = await os.confirm({
|
||||||
|
type: 'question',
|
||||||
|
text: i18n.ts.resetAreYouSure,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!canceled) {
|
||||||
|
emit('reset');
|
||||||
|
}
|
||||||
|
|
||||||
|
modal.value?.close();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" module>
|
||||||
|
.root {
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
&.asDrawer {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 24px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
|
||||||
|
.textCountRoot {
|
||||||
|
padding: 12px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuRoot {
|
||||||
|
padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.textCountRoot {
|
||||||
|
--textCountBg: color-mix(in srgb, var(--MI_THEME-panel), var(--MI_THEME-fg) 15%);
|
||||||
|
background-color: var(--textCountBg);
|
||||||
|
padding: 10px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textCountLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textCount {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--MI-marginHalf);
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
--countColor: var(--MI_THEME-accent);
|
||||||
|
|
||||||
|
&.danger {
|
||||||
|
--countColor: var(--MI_THEME-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
--countColor: var(--MI_THEME-warn);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textCountGraph {
|
||||||
|
position: relative;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-image: conic-gradient(
|
||||||
|
var(--countColor) 0% v-bind("Math.min(100, textCountPercentage) + '%'"),
|
||||||
|
rgba(0, 0, 0, .2) v-bind("Math.min(100, textCountPercentage) + '%'") 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--textCountBg);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.textCountCurrent {
|
||||||
|
color: var(--countColor);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuRoot {
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,4 +5,4 @@
|
||||||
|
|
||||||
import { numberFormat } from '@@/js/intl-const.js';
|
import { numberFormat } from '@@/js/intl-const.js';
|
||||||
|
|
||||||
export default n => n == null ? 'N/A' : numberFormat.format(n);
|
export default (n?: number) => n == null ? 'N/A' : numberFormat.format(n);
|
||||||
|
|
|
||||||
|
|
@ -423,6 +423,10 @@ rt {
|
||||||
color: var(--MI_THEME-link);
|
color: var(--MI_THEME-link);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
._love {
|
||||||
|
color: var(--MI_THEME-love);
|
||||||
|
}
|
||||||
|
|
||||||
._caption {
|
._caption {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
|
|
||||||
|
|
@ -28,3 +28,5 @@ type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | Men
|
||||||
type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
|
type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
|
||||||
export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
|
export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
|
||||||
export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuRadio | MenuRadioOption | MenuParent;
|
export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuRadio | MenuRadioOption | MenuParent;
|
||||||
|
|
||||||
|
export type NonModalCompatibleInnerMenuItem = Exclude<InnerMenuItem, MenuParent | MenuRadio>;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue