|
|
@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
|
|
|
|
<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
|
|
|
|
<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
|
|
|
|
<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<article v-else :class="$style.article" :style="{ cursor: 'pointer' }" @click.stop="router.push(notePage(appearNote))" @contextmenu.stop="onContextmenu">
|
|
|
|
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
|
|
|
|
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
|
|
|
|
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
|
|
|
|
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
|
|
|
|
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
|
|
|
|
<div :class="$style.main">
|
|
|
|
<div :class="$style.main">
|
|
|
@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
<div style="container-type: inline-size;">
|
|
|
|
<div style="container-type: inline-size;">
|
|
|
|
<p v-if="appearNote.cw != null" :class="$style.cw">
|
|
|
|
<p v-if="appearNote.cw != null" :class="$style.cw">
|
|
|
|
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
|
|
|
|
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
|
|
|
|
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;" @click.stop/>
|
|
|
|
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;"/>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
|
|
|
|
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
|
|
|
|
<div :class="$style.text">
|
|
|
|
<div :class="$style.text">
|
|
|
@ -69,40 +69,39 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
:emojiUrls="appearNote.emojis"
|
|
|
|
:emojiUrls="appearNote.emojis"
|
|
|
|
:enableEmojiMenu="true"
|
|
|
|
:enableEmojiMenu="true"
|
|
|
|
:enableEmojiMenuReaction="true"
|
|
|
|
:enableEmojiMenuReaction="true"
|
|
|
|
@click.stop
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div v-if="translating || translation" :class="$style.translation">
|
|
|
|
<div v-if="translating || translation" :class="$style.translation">
|
|
|
|
<MkLoading v-if="translating" mini/>
|
|
|
|
<MkLoading v-if="translating" mini/>
|
|
|
|
<div v-else-if="translation">
|
|
|
|
<div v-else-if="translation">
|
|
|
|
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
|
|
|
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
|
|
|
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" @click.stop/>
|
|
|
|
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="appearNote.files && appearNote.files.length > 0">
|
|
|
|
<div v-if="appearNote.files && appearNote.files.length > 0">
|
|
|
|
<MkMediaList ref="galleryEl" :mediaList="appearNote.files" @click.stop/>
|
|
|
|
<MkMediaList ref="galleryEl" :mediaList="appearNote.files"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll" @click.stop/>
|
|
|
|
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/>
|
|
|
|
<div v-if="isEnabledUrlPreview">
|
|
|
|
<div v-if="isEnabledUrlPreview">
|
|
|
|
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview" @click.stop/>
|
|
|
|
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
|
|
|
|
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
|
|
|
|
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
|
|
|
|
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
|
|
|
|
<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
|
|
|
|
<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click.stop="collapsed = true">
|
|
|
|
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
|
|
|
|
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
|
|
|
|
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
|
|
|
|
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction" @click.stop>
|
|
|
|
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
|
|
|
|
<template #more>
|
|
|
|
<template #more>
|
|
|
|
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
|
|
|
|
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</MkReactionsViewer>
|
|
|
|
</MkReactionsViewer>
|
|
|
|
<footer :class="$style.footer">
|
|
|
|
<footer :class="$style.footer">
|
|
|
|
<button :class="$style.footerButton" class="_button" @click.stop="reply()">
|
|
|
|
<button :class="$style.footerButton" class="_button" @click="reply()">
|
|
|
|
<i class="ti ti-arrow-back-up"></i>
|
|
|
|
<i class="ti ti-arrow-back-up"></i>
|
|
|
|
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
|
|
|
|
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
@ -119,7 +118,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
<button v-else :class="$style.footerButton" class="_button" disabled>
|
|
|
|
<button v-else :class="$style.footerButton" class="_button" disabled>
|
|
|
|
<i class="ti ti-ban"></i>
|
|
|
|
<i class="ti ti-ban"></i>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<button ref="reactButton" :class="$style.footerButton" class="_button" @click.stop="toggleReact()">
|
|
|
|
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
|
|
|
|
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i>
|
|
|
|
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i>
|
|
|
|
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
|
|
|
|
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
|
|
|
|
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
|
|
|
|
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
|
|
|
@ -202,8 +201,6 @@ import { isEnabledUrlPreview } from '@/instance.js';
|
|
|
|
import { type Keymap } from '@/scripts/hotkey.js';
|
|
|
|
import { type Keymap } from '@/scripts/hotkey.js';
|
|
|
|
import { focusPrev, focusNext } from '@/scripts/focus.js';
|
|
|
|
import { focusPrev, focusNext } from '@/scripts/focus.js';
|
|
|
|
import { getAppearNote } from '@/scripts/get-appear-note.js';
|
|
|
|
import { getAppearNote } from '@/scripts/get-appear-note.js';
|
|
|
|
import { useRouter } from '@/router/supplier.js';
|
|
|
|
|
|
|
|
import { notePage } from '@/filters/note.js';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
note: Misskey.entities.Note;
|
|
|
|
note: Misskey.entities.Note;
|
|
|
@ -269,7 +266,6 @@ const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
|
|
|
const translating = ref(false);
|
|
|
|
const translating = ref(false);
|
|
|
|
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
|
|
|
|
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
|
|
|
|
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
|
|
|
|
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
const renoteCollapsed = ref(
|
|
|
|
const renoteCollapsed = ref(
|
|
|
|
defaultStore.state.collapseRenotes && isRenote && (
|
|
|
|
defaultStore.state.collapseRenotes && isRenote && (
|
|
|
|
($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
|
|
|
|
($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
|
|
|
|