Update EmNoteDetailed.vue

This commit is contained in:
syuilo 2024-08-26 13:51:03 +09:00
parent 91fc4ffa5f
commit 2edf54b2e3
1 changed files with 29 additions and 29 deletions

View File

@ -9,22 +9,22 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="rootEl" ref="rootEl"
:class="$style.root" :class="$style.root"
> >
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/> <EmNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="isRenote" :class="$style.renote"> <div v-if="isRenote" :class="$style.renote">
<MkAvatar :class="$style.renoteAvatar" :user="note.user" link/> <EmAvatar :class="$style.renoteAvatar" :user="note.user" link/>
<i class="ti ti-repeat" style="margin-right: 4px;"></i> <i class="ti ti-repeat" style="margin-right: 4px;"></i>
<span :class="$style.renoteText"> <span :class="$style.renoteText">
<I18n :src="i18n.ts.renotedBy" tag="span"> <I18n :src="i18n.ts.renotedBy" tag="span">
<template #user> <template #user>
<MkA :class="$style.renoteName" :to="userPage(note.user)"> <EmA :class="$style.renoteName" :to="userPage(note.user)">
<MkUserName :user="note.user"/> <EmUserName :user="note.user"/>
</MkA> </EmA>
</template> </template>
</I18n> </I18n>
</span> </span>
<div :class="$style.renoteInfo"> <div :class="$style.renoteInfo">
<div class="$style.renoteTime"> <div class="$style.renoteTime">
<MkTime :time="note.createdAt"/> <EmTime :time="note.createdAt"/>
</div> </div>
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> <span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
<i v-if="note.visibility === 'home'" class="ti ti-home"></i> <i v-if="note.visibility === 'home'" class="ti ti-home"></i>
@ -36,17 +36,17 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<article :class="$style.note"> <article :class="$style.note">
<header :class="$style.noteHeader"> <header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link/> <EmAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link/>
<div :class="$style.noteHeaderBody"> <div :class="$style.noteHeaderBody">
<div :class="$style.noteHeaderBodyUpper"> <div :class="$style.noteHeaderBodyUpper">
<div style="min-width: 0;"> <div style="min-width: 0;">
<div class="_nowrap"> <div class="_nowrap">
<MkA :class="$style.noteHeaderName" :to="userPage(appearNote.user)"> <EmA :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
<MkUserName :nowrap="true" :user="appearNote.user"/> <EmUserName :nowrap="true" :user="appearNote.user"/>
</MkA> </EmA>
<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span> <span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
</div> </div>
<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div> <div :class="$style.noteHeaderUsername"><EmAcct :user="appearNote.user"/></div>
</div> </div>
<div :class="$style.noteHeaderInfo"> <div :class="$style.noteHeaderInfo">
<a :href="url" :class="$style.noteHeaderInstanceIconLink" target="_blank" rel="noopener noreferrer"> <a :href="url" :class="$style.noteHeaderInstanceIconLink" target="_blank" rel="noopener noreferrer">
@ -54,17 +54,17 @@ SPDX-License-Identifier: AGPL-3.0-only
</a> </a>
</div> </div>
</div> </div>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> <EmInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
</div> </div>
</header> </header>
<div :class="[$style.noteContent, { [$style.contentCollapsed]: collapsed }]"> <div :class="[$style.noteContent, { [$style.contentCollapsed]: collapsed }]">
<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"/> <EmCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
</p> </p>
<div v-show="appearNote.cw == null || showContent"> <div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <EmA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></EmA>
<Mfm <Mfm
v-if="appearNote.text" v-if="appearNote.text"
:parsedNodes="parsed" :parsedNodes="parsed"
@ -77,8 +77,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="appearNote.files && appearNote.files.length > 0"> <div v-if="appearNote.files && appearNote.files.length > 0">
<EmMediaList :mediaList="appearNote.files" :originalEntityUrl="`${url}/notes/${appearNote.id}`"/> <EmMediaList :mediaList="appearNote.files" :originalEntityUrl="`${url}/notes/${appearNote.id}`"/>
</div> </div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :readOnly="true" :class="$style.poll"/> <EmPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :readOnly="true" :class="$style.poll"/>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div> <div v-if="appearNote.renote" :class="$style.quote"><EmNoteSimple :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>
@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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> <EmA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</EmA>
</div> </div>
<footer> <footer>
<div :class="$style.noteFooterInfo"> <div :class="$style.noteFooterInfo">
@ -96,15 +96,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> <i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span> </span>
<span v-if="appearNote.localOnly" style="display: inline-block; margin-right: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span> <span v-if="appearNote.localOnly" style="display: inline-block; margin-right: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
<MkA :to="notePage(appearNote)"> <EmA :to="notePage(appearNote)">
<MkTime :time="appearNote.createdAt" mode="detail" colored/> <EmTime :time="appearNote.createdAt" mode="detail" colored/>
</MkA> </EmA>
</div> </div>
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" :maxNumber="16" :note="appearNote"> <EmReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" :maxNumber="16" :note="appearNote">
<template #more> <template #more>
<MkA :to="`/notes/${appearNote.id}`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA> <EmA :to="`/notes/${appearNote.id}`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</EmA>
</template> </template>
</MkReactionsViewer> </EmReactionsViewer>
<a :href="`/notes/${appearNote.id}`" target="_blank" rel="noopener" :class="[$style.noteFooterButton, $style.footerButtonLink]" class="_button"> <a :href="`/notes/${appearNote.id}`" target="_blank" rel="noopener" :class="[$style.noteFooterButton, $style.footerButtonLink]" class="_button">
<i class="ti ti-arrow-back-up"></i> <i class="ti ti-arrow-back-up"></i>
</a> </a>
@ -130,12 +130,12 @@ import { computed, inject, ref } from 'vue';
import * as mfm from 'mfm-js'; import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import EmMediaList from './EmMediaList.vue'; import EmMediaList from './EmMediaList.vue';
import MkNoteSub from '@/components/MkNoteSub.vue'; import EmNoteSub from '@/components/EmNoteSub.vue';
import MkNoteSimple from '@/components/EmNoteSimple.vue'; import EmNoteSimple from '@/components/EmNoteSimple.vue';
import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; import EmReactionsViewer from '@/components/EmReactionsViewer.vue';
import MkCwButton from '@/components/MkCwButton.vue'; import EmCwButton from '@/components/EmCwButton.vue';
import MkPoll from '@/components/MkPoll.vue'; import EmPoll from '@/components/EmPoll.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import EmInstanceTicker from '@/components/EmInstanceTicker.vue';
import { userPage } from '@/utils.js'; import { userPage } from '@/utils.js';
import { notePage } from '@/utils.js'; import { notePage } from '@/utils.js';
import number from '@/filters/number.js'; import number from '@/filters/number.js';