summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkNote.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/components/MkNote.vue')
-rw-r--r--packages/frontend/src/components/MkNote.vue135
1 files changed, 90 insertions, 45 deletions
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 22b1691a86..13273a53b4 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="rootEl"
v-hotkey="keymap"
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
- :tabindex="!isDeleted ? '-1' : undefined"
+ :tabindex="isDeleted ? '-1' : '0'"
>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</I18n>
<div :class="$style.renoteInfo">
- <button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()">
+ <button ref="renoteTime" :class="$style.renoteTime" class="_button" @mousedown.prevent="showRenoteMenu()">
<i class="ti ti-dots" :class="$style.renoteMenu"></i>
<MkTime :time="note.createdAt"/>
</button>
@@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div v-if="appearNote.files && appearNote.files.length > 0">
- <MkMediaList :mediaList="appearNote.files"/>
+ <MkMediaList ref="galleryEl" :mediaList="appearNote.files"/>
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/>
<div v-if="isEnabledUrlPreview">
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton"
:class="$style.footerButton"
class="_button"
- @mousedown="renote()"
+ @mousedown.prevent="renote()"
>
<i class="ti ti-repeat"></i>
<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.renoteCount) }}</p>
@@ -125,10 +125,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else class="ti ti-plus"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
</button>
- <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()">
+ <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown.prevent="clip()">
<i class="ti ti-paperclip"></i>
</button>
- <button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="showMenu()">
+ <button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()">
<i class="ti ti-dots"></i>
</button>
</footer>
@@ -174,8 +174,7 @@ import MkPoll from '@/components/MkPoll.vue';
import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import { pleaseLogin } from '@/scripts/please-login.js';
-import { focusPrev, focusNext } from '@/scripts/focus.js';
+import { pleaseLogin, type OpenOnRemoteOptions } from '@/scripts/please-login.js';
import { checkWordMute } from '@/scripts/check-word-mute.js';
import { userPage } from '@/filters/user.js';
import number from '@/filters/number.js';
@@ -197,7 +196,10 @@ import { MenuItem } from '@/types/menu.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
import { shouldCollapsed } from '@/scripts/collapsed.js';
+import { host } from '@/config.js';
import { isEnabledUrlPreview } from '@/instance.js';
+import { type Keymap } from '@/scripts/hotkey.js';
+import { focusPrev, focusNext } from '@/scripts/focus.js';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@@ -256,6 +258,7 @@ const renoteTime = shallowRef<HTMLElement>();
const reactButton = shallowRef<HTMLElement>();
const clipButton = shallowRef<HTMLElement>();
const appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value);
+const galleryEl = shallowRef<InstanceType<typeof MkMediaList>>();
const isMyRenote = $i && ($i.id === note.value.userId);
const showContent = ref(false);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
@@ -276,6 +279,11 @@ const renoteCollapsed = ref(
),
);
+const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
+ type: 'lookup',
+ url: `https://${host}/notes/${appearNote.value.id}`,
+}));
+
/* Overload FunctionにLintが対応していないのでコメントアウト
function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): boolean | 'sensitiveMute';
@@ -294,15 +302,53 @@ function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string
}
const keymap = {
- 'r': () => reply(true),
- 'e|a|plus': () => react(true),
- 'q': () => renote(true),
- 'up|k|shift+tab': focusBefore,
- 'down|j|tab': focusAfter,
- 'esc': blur,
- 'm|o': () => showMenu(true),
- 's': () => showContent.value !== showContent.value,
-};
+ 'r': () => {
+ if (renoteCollapsed.value) return;
+ reply();
+ },
+ 'e|a|plus': () => {
+ if (renoteCollapsed.value) return;
+ react();
+ },
+ 'q': () => {
+ if (renoteCollapsed.value) return;
+ renote();
+ },
+ 'm': () => {
+ if (renoteCollapsed.value) return;
+ showMenu();
+ },
+ 'c': () => {
+ if (renoteCollapsed.value) return;
+ if (!defaultStore.state.showClipButtonInNoteFooter) return;
+ clip();
+ },
+ 'o': () => {
+ if (renoteCollapsed.value) return;
+ galleryEl.value?.openGallery();
+ },
+ 'v|enter': () => {
+ if (renoteCollapsed.value) {
+ renoteCollapsed.value = false;
+ } else if (appearNote.value.cw != null) {
+ showContent.value = !showContent.value;
+ } else if (isLong) {
+ collapsed.value = !collapsed.value;
+ }
+ },
+ 'esc': {
+ allowRepeat: true,
+ callback: () => blur(),
+ },
+ 'up|k|shift+tab': {
+ allowRepeat: true,
+ callback: () => focusBefore(),
+ },
+ 'down|j|tab': {
+ allowRepeat: true,
+ callback: () => focusAfter(),
+ },
+} as const satisfies Keymap;
provide('react', (reaction: string) => {
misskeyApi('notes/reactions/create', {
@@ -335,12 +381,14 @@ if (!props.mock) {
if (users.length < 1) return;
- os.popup(MkUsersTooltip, {
+ const { dispose } = os.popup(MkUsersTooltip, {
showing,
users,
count: appearNote.value.renoteCount,
targetElement: renoteButton.value,
- }, {}, 'closed');
+ }, {
+ closed: () => dispose(),
+ });
});
if (appearNote.value.reactionAcceptance === 'likeOnly') {
@@ -355,19 +403,21 @@ if (!props.mock) {
if (users.length < 1) return;
- os.popup(MkReactionsViewerDetails, {
+ const { dispose } = os.popup(MkReactionsViewerDetails, {
showing,
reaction: '❤️',
users,
count: appearNote.value.reactionCount,
targetElement: reactButton.value!,
- }, {}, 'closed');
+ }, {
+ closed: () => dispose(),
+ });
});
}
}
function renote(viaKeyboard = false) {
- pleaseLogin();
+ pleaseLogin(undefined, pleaseLoginContext.value);
showMovedDialog();
const { menu } = getRenoteMenu({ note: note.value, renoteButton, mock: props.mock });
@@ -376,22 +426,21 @@ function renote(viaKeyboard = false) {
});
}
-function reply(viaKeyboard = false): void {
- pleaseLogin();
+function reply(): void {
+ pleaseLogin(undefined, pleaseLoginContext.value);
if (props.mock) {
return;
}
os.post({
reply: appearNote.value,
channel: appearNote.value.channel,
- animation: !viaKeyboard,
}).then(() => {
focus();
});
}
-function react(viaKeyboard = false): void {
- pleaseLogin();
+function react(): void {
+ pleaseLogin(undefined, pleaseLoginContext.value);
showMovedDialog();
if (appearNote.value.reactionAcceptance === 'likeOnly') {
sound.playMisskeySfx('reaction');
@@ -409,7 +458,9 @@ function react(viaKeyboard = false): void {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2);
- os.popup(MkRippleEffect, { x, y }, {}, 'end');
+ const { dispose } = os.popup(MkRippleEffect, { x, y }, {
+ end: () => dispose(),
+ });
}
} else {
blur();
@@ -483,18 +534,16 @@ function onContextmenu(ev: MouseEvent): void {
}
}
-function showMenu(viaKeyboard = false): void {
+function showMenu(): void {
if (props.mock) {
return;
}
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value });
- os.popupMenu(menu, menuButton.value, {
- viaKeyboard,
- }).then(focus).finally(cleanup);
+ os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup);
}
-async function clip() {
+async function clip(): Promise<void> {
if (props.mock) {
return;
}
@@ -502,7 +551,7 @@ async function clip() {
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
}
-function showRenoteMenu(viaKeyboard = false): void {
+function showRenoteMenu(): void {
if (props.mock) {
return;
}
@@ -522,23 +571,19 @@ function showRenoteMenu(viaKeyboard = false): void {
}
if (isMyRenote) {
- pleaseLogin();
+ pleaseLogin(undefined, pleaseLoginContext.value);
os.popupMenu([
getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
{ type: 'divider' },
getUnrenote(),
- ], renoteTime.value, {
- viaKeyboard: viaKeyboard,
- });
+ ], renoteTime.value);
} else {
os.popupMenu([
getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
{ type: 'divider' },
getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote),
($i?.isModerator || $i?.isAdmin) ? getUnrenote() : undefined,
- ], renoteTime.value, {
- viaKeyboard: viaKeyboard,
- });
+ ], renoteTime.value);
}
}
@@ -551,11 +596,11 @@ function blur() {
}
function focusBefore() {
- focusPrev(rootEl.value ?? null);
+ focusPrev(rootEl.value);
}
function focusAfter() {
- focusNext(rootEl.value ?? null);
+ focusNext(rootEl.value);
}
function readPromo() {
@@ -593,7 +638,7 @@ function emitUpdReaction(emoji: string, delta: number) {
&:focus-visible {
outline: none;
- &:after {
+ &::after {
content: "";
pointer-events: none;
display: block;
@@ -606,7 +651,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
- border: dashed 1px var(--focus);
+ border: dashed 2px var(--focus);
border-radius: var(--radius);
box-sizing: border-box;
}
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-03 20:19:50 +0000