diff options
Diffstat (limited to 'packages/frontend/src/components/MkNoteDetailed.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNoteDetailed.vue | 69 |
1 files changed, 16 insertions, 53 deletions
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 95cbe38b1b..30198d2a6a 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -11,9 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only v-hotkey="keymap" :class="$style.root" > - <div v-if="appearNote.reply && appearNote.reply.replyId && !conversationLoaded" style="padding: 16px"> - <MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton> + <div v-if="appearNote.reply && appearNote.reply.replyId"> + <div v-if="!conversationLoaded" style="padding: 16px"> + <MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton> + </div> + <MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/> </div> + <MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/> <div v-if="isRenote" :class="$style.renote"> <MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/> <i class="ph-rocket-launch ph-bold ph-lg" style="margin-right: 4px;"></i> @@ -39,29 +43,15 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ph-rocket ph-bold ph-lg"></i></span> </div> </div> - <template v-if="appearNote.reply && appearNote.reply.replyId"> - <MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/> - </template> - <MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/> <article :class="$style.note" @contextmenu.stop="onContextmenu"> <header :class="$style.noteHeader"> <MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/> - <div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;"> - <div :class="$style.noteHeaderBody"> - <div> - <MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)"> - <MkUserName :nowrap="false" :user="appearNote.user"/> - </MkA> - <span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span> - <span v-if="appearNote.user.badgeRoles" :class="$style.badgeRoles"> - <img v-for="role in appearNote.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/> - </span> - </div> - <div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div> - </div> - </div> - <div style="display: flex; align-items: flex-end; margin-left: auto;"> - <div :class="$style.noteHeaderBody"> + <div :class="$style.noteHeaderBody"> + <div> + <MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)"> + <MkUserName :nowrap="false" :user="appearNote.user"/> + </MkA> + <span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span> <div :class="$style.noteHeaderInfo"> <span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]"> <i v-if="appearNote.visibility === 'home'" class="ph-house ph-bold ph-lg"></i> @@ -71,8 +61,9 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-if="appearNote.updatedAt" ref="menuVersionsButton" style="margin-left: 0.5em;" title="Edited" @mousedown="menuVersions()"><i class="ph-pencil ph-bold ph-lg"></i></span> <span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ph-rocket ph-bold ph-lg"></i></span> </div> - <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> </div> + <div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div> + <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> </div> </header> <div :class="$style.noteContent"> @@ -82,6 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only </p> <div v-show="appearNote.cw == null || showContent"> <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="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA> <Mfm v-if="appearNote.text" :parsedNodes="parsed" @@ -472,7 +464,7 @@ function renote() { if (appearNote.channel?.isSensitive) { visibility = smallerVisibility(visibility, 'home'); } - + os.api('notes/create', { localOnly, visibility, @@ -859,19 +851,12 @@ function animatedMFM() { .noteHeaderInfo { float: right; - text-align: right; } .noteHeaderUsername { margin-bottom: 2px; line-height: 1.3; word-wrap: anywhere; - text-overflow: ellipsis; - white-space: nowrap; - - &::-webkit-scrollbar { - display: none; - } } .playMFMButton { @@ -1052,31 +1037,9 @@ function animatedMFM() { } } -.avatar { - flex-shrink: 0 !important; - display: block !important; - margin: 0 10px 0 0 !important; - width: 40px !important; - height: 40px !important; - border-radius: var(--radius-sm) !important; -} - .muted { padding: 8px; text-align: center; opacity: 0.7; } - -.badgeRoles { - margin: 0 .5em 0 0; -} - -.badgeRole { - height: 1.3em; - vertical-align: -20%; - - & + .badgeRole { - margin-left: 0.2em; - } -} </style> |