Skip to content

Commit cb03f3f

Browse files
kakkokari-gtyihkakkokari-gtyih
authored
fix(frontend): follow-up of 16970 (#16975)
1 parent c109bec commit cb03f3f

1 file changed

Lines changed: 160 additions & 158 deletions

File tree

‎packages/frontend/src/components/MkNoteDetailed.vue‎

Lines changed: 160 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -46,178 +46,180 @@ SPDX-License-Identifier: AGPL-3.0-only
4646
<div v-if="isRenote && note.renote == null" :class="$style.deleted">
4747
{{ i18n.ts.deletedNote }}
4848
</div>
49-
<article v-else :class="$style.note" @contextmenu.stop="onContextmenu">
50-
<header :class="$style.noteHeader">
51-
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
52-
<div :class="$style.noteHeaderBody">
53-
<div>
54-
<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
55-
<MkUserName :nowrap="false" :user="appearNote.user"/>
56-
</MkA>
57-
<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
58-
<div :class="$style.noteHeaderInfo">
59-
<span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
60-
<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
61-
<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
62-
<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
63-
</span>
64-
<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
49+
<template v-else>
50+
<article :class="$style.note" @contextmenu.stop="onContextmenu">
51+
<header :class="$style.noteHeader">
52+
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
53+
<div :class="$style.noteHeaderBody">
54+
<div>
55+
<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
56+
<MkUserName :nowrap="false" :user="appearNote.user"/>
57+
</MkA>
58+
<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
59+
<div :class="$style.noteHeaderInfo">
60+
<span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
61+
<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
62+
<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
63+
<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
64+
</span>
65+
<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
66+
</div>
67+
</div>
68+
<div :class="$style.noteHeaderUsernameAndBadgeRoles">
69+
<div :class="$style.noteHeaderUsername">
70+
<MkAcct :user="appearNote.user"/>
71+
</div>
72+
<div v-if="appearNote.user.badgeRoles" :class="$style.noteHeaderBadgeRoles">
73+
<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
74+
</div>
6575
</div>
76+
<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
6677
</div>
67-
<div :class="$style.noteHeaderUsernameAndBadgeRoles">
68-
<div :class="$style.noteHeaderUsername">
69-
<MkAcct :user="appearNote.user"/>
78+
</header>
79+
<div :class="$style.noteContent">
80+
<p v-if="appearNote.cw != null" :class="$style.cw">
81+
<Mfm
82+
v-if="appearNote.cw != ''"
83+
:text="appearNote.cw"
84+
:author="appearNote.user"
85+
:nyaize="'respect'"
86+
:enableEmojiMenu="true"
87+
:enableEmojiMenuReaction="true"
88+
/>
89+
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
90+
</p>
91+
<div v-show="appearNote.cw == null || showContent">
92+
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
93+
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
94+
<Mfm
95+
v-if="appearNote.text"
96+
:parsedNodes="parsed"
97+
:text="appearNote.text"
98+
:author="appearNote.user"
99+
:nyaize="'respect'"
100+
:emojiUrls="appearNote.emojis"
101+
:enableEmojiMenu="true"
102+
:enableEmojiMenuReaction="true"
103+
class="_selectable"
104+
/>
105+
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
106+
<div v-if="translating || translation" :class="$style.translation">
107+
<MkLoading v-if="translating" mini/>
108+
<div v-else-if="translation">
109+
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
110+
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
111+
</div>
70112
</div>
71-
<div v-if="appearNote.user.badgeRoles" :class="$style.noteHeaderBadgeRoles">
72-
<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
113+
<div v-if="appearNote.files && appearNote.files.length > 0">
114+
<MkMediaList ref="galleryEl" :mediaList="appearNote.files"/>
73115
</div>
74-
</div>
75-
<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
76-
</div>
77-
</header>
78-
<div :class="$style.noteContent">
79-
<p v-if="appearNote.cw != null" :class="$style.cw">
80-
<Mfm
81-
v-if="appearNote.cw != ''"
82-
:text="appearNote.cw"
83-
:author="appearNote.user"
84-
:nyaize="'respect'"
85-
:enableEmojiMenu="true"
86-
:enableEmojiMenuReaction="true"
87-
/>
88-
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
89-
</p>
90-
<div v-show="appearNote.cw == null || showContent">
91-
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
92-
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
93-
<Mfm
94-
v-if="appearNote.text"
95-
:parsedNodes="parsed"
96-
:text="appearNote.text"
97-
:author="appearNote.user"
98-
:nyaize="'respect'"
99-
:emojiUrls="appearNote.emojis"
100-
:enableEmojiMenu="true"
101-
:enableEmojiMenuReaction="true"
102-
class="_selectable"
103-
/>
104-
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
105-
<div v-if="translating || translation" :class="$style.translation">
106-
<MkLoading v-if="translating" mini/>
107-
<div v-else-if="translation">
108-
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
109-
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
116+
<MkPoll
117+
v-if="appearNote.poll"
118+
:noteId="appearNote.id"
119+
:multiple="appearNote.poll.multiple"
120+
:expiresAt="appearNote.poll.expiresAt"
121+
:choices="$appearNote.pollChoices"
122+
:author="appearNote.user"
123+
:emojiUrls="appearNote.emojis"
124+
:class="$style.poll"
125+
/>
126+
<div v-if="isEnabledUrlPreview">
127+
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" style="margin-top: 6px;"/>
110128
</div>
129+
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
111130
</div>
112-
<div v-if="appearNote.files && appearNote.files.length > 0">
113-
<MkMediaList ref="galleryEl" :mediaList="appearNote.files"/>
131+
<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>
132+
</div>
133+
<footer>
134+
<div :class="$style.noteFooterInfo">
135+
<MkA :to="notePage(appearNote)">
136+
<MkTime :time="appearNote.createdAt" mode="detail" colored/>
137+
</MkA>
114138
</div>
115-
<MkPoll
116-
v-if="appearNote.poll"
139+
<MkReactionsViewer
140+
v-if="appearNote.reactionAcceptance !== 'likeOnly'"
141+
style="margin-top: 6px;"
142+
:reactions="$appearNote.reactions"
143+
:reactionEmojis="$appearNote.reactionEmojis"
144+
:myReaction="$appearNote.myReaction"
117145
:noteId="appearNote.id"
118-
:multiple="appearNote.poll.multiple"
119-
:expiresAt="appearNote.poll.expiresAt"
120-
:choices="$appearNote.pollChoices"
121-
:author="appearNote.user"
122-
:emojiUrls="appearNote.emojis"
123-
:class="$style.poll"
146+
:maxNumber="16"
147+
@mockUpdateMyReaction="emitUpdReaction"
124148
/>
125-
<div v-if="isEnabledUrlPreview">
126-
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" style="margin-top: 6px;"/>
127-
</div>
128-
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
129-
</div>
130-
<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>
149+
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
150+
<i class="ti ti-arrow-back-up"></i>
151+
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
152+
</button>
153+
<button
154+
v-if="canRenote"
155+
ref="renoteButton"
156+
class="_button"
157+
:class="$style.noteFooterButton"
158+
@mousedown.prevent="renote()"
159+
>
160+
<i class="ti ti-repeat"></i>
161+
<p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.renoteCount) }}</p>
162+
</button>
163+
<button v-else class="_button" :class="$style.noteFooterButton" disabled>
164+
<i class="ti ti-ban"></i>
165+
</button>
166+
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
167+
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && $appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
168+
<i v-else-if="$appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
169+
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
170+
<i v-else class="ti ti-plus"></i>
171+
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && $appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number($appearNote.reactionCount) }}</p>
172+
</button>
173+
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="clip()">
174+
<i class="ti ti-paperclip"></i>
175+
</button>
176+
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
177+
<i class="ti ti-dots"></i>
178+
</button>
179+
</footer>
180+
</article>
181+
<div :class="$style.tabs">
182+
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
183+
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
184+
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
131185
</div>
132-
<footer>
133-
<div :class="$style.noteFooterInfo">
134-
<MkA :to="notePage(appearNote)">
135-
<MkTime :time="appearNote.createdAt" mode="detail" colored/>
136-
</MkA>
186+
<div>
187+
<div v-if="tab === 'replies'">
188+
<div v-if="!repliesLoaded" style="padding: 16px">
189+
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
190+
</div>
191+
<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true"/>
137192
</div>
138-
<MkReactionsViewer
139-
v-if="appearNote.reactionAcceptance !== 'likeOnly'"
140-
style="margin-top: 6px;"
141-
:reactions="$appearNote.reactions"
142-
:reactionEmojis="$appearNote.reactionEmojis"
143-
:myReaction="$appearNote.myReaction"
144-
:noteId="appearNote.id"
145-
:maxNumber="16"
146-
@mockUpdateMyReaction="emitUpdReaction"
147-
/>
148-
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
149-
<i class="ti ti-arrow-back-up"></i>
150-
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
151-
</button>
152-
<button
153-
v-if="canRenote"
154-
ref="renoteButton"
155-
class="_button"
156-
:class="$style.noteFooterButton"
157-
@mousedown.prevent="renote()"
158-
>
159-
<i class="ti ti-repeat"></i>
160-
<p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.renoteCount) }}</p>
161-
</button>
162-
<button v-else class="_button" :class="$style.noteFooterButton" disabled>
163-
<i class="ti ti-ban"></i>
164-
</button>
165-
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
166-
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && $appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
167-
<i v-else-if="$appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
168-
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
169-
<i v-else class="ti ti-plus"></i>
170-
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && $appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number($appearNote.reactionCount) }}</p>
171-
</button>
172-
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="clip()">
173-
<i class="ti ti-paperclip"></i>
174-
</button>
175-
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
176-
<i class="ti ti-dots"></i>
177-
</button>
178-
</footer>
179-
</article>
180-
<div :class="$style.tabs">
181-
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
182-
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
183-
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
184-
</div>
185-
<div>
186-
<div v-if="tab === 'replies'">
187-
<div v-if="!repliesLoaded" style="padding: 16px">
188-
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
193+
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
194+
<MkPagination :paginator="renotesPaginator" :forceDisableInfiniteScroll="true">
195+
<template #default="{ items }">
196+
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
197+
<MkA v-for="item in items" :key="item.id" :to="userPage(item.user)">
198+
<MkUserCardMini :user="item.user" :withChart="false"/>
199+
</MkA>
200+
</div>
201+
</template>
202+
</MkPagination>
189203
</div>
190-
<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true"/>
191-
</div>
192-
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
193-
<MkPagination :paginator="renotesPaginator" :forceDisableInfiniteScroll="true">
194-
<template #default="{ items }">
195-
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
196-
<MkA v-for="item in items" :key="item.id" :to="userPage(item.user)">
197-
<MkUserCardMini :user="item.user" :withChart="false"/>
198-
</MkA>
199-
</div>
200-
</template>
201-
</MkPagination>
202-
</div>
203-
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
204-
<div :class="$style.reactionTabs">
205-
<button v-for="reaction in Object.keys($appearNote.reactions)" :key="reaction" :class="[$style.reactionTab, { [$style.reactionTabActive]: reactionTabType === reaction }]" class="_button" @click="reactionTabType = reaction">
206-
<MkReactionIcon :reaction="reaction"/>
207-
<span style="margin-left: 4px;">{{ $appearNote.reactions[reaction] }}</span>
208-
</button>
204+
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
205+
<div :class="$style.reactionTabs">
206+
<button v-for="reaction in Object.keys($appearNote.reactions)" :key="reaction" :class="[$style.reactionTab, { [$style.reactionTabActive]: reactionTabType === reaction }]" class="_button" @click="reactionTabType = reaction">
207+
<MkReactionIcon :reaction="reaction"/>
208+
<span style="margin-left: 4px;">{{ $appearNote.reactions[reaction] }}</span>
209+
</button>
210+
</div>
211+
<MkPagination v-if="reactionTabType" :key="reactionTabType" :paginator="reactionsPaginator" :forceDisableInfiniteScroll="true">
212+
<template #default="{ items }">
213+
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
214+
<MkA v-for="item in items" :key="item.id" :to="userPage(item.user)">
215+
<MkUserCardMini :user="item.user" :withChart="false"/>
216+
</MkA>
217+
</div>
218+
</template>
219+
</MkPagination>
209220
</div>
210-
<MkPagination v-if="reactionTabType" :key="reactionTabType" :paginator="reactionsPaginator" :forceDisableInfiniteScroll="true">
211-
<template #default="{ items }">
212-
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
213-
<MkA v-for="item in items" :key="item.id" :to="userPage(item.user)">
214-
<MkUserCardMini :user="item.user" :withChart="false"/>
215-
</MkA>
216-
</div>
217-
</template>
218-
</MkPagination>
219221
</div>
220-
</div>
222+
</template>
221223
</div>
222224
<div v-else-if="muted" class="_panel" :class="$style.muted" @click="muted = false">
223225
<I18n :src="i18n.ts.userSaysSomething" tag="small">

0 commit comments

Comments
 (0)