summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkNoteDetailed.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/components/MkNoteDetailed.vue')
-rw-r--r--packages/frontend/src/components/MkNoteDetailed.vue94
1 files changed, 59 insertions, 35 deletions
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 5acb18c871..a537d8afb9 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -63,7 +63,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
</div>
</div>
- <div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
+ <div :class="$style.noteHeaderUsernameAndBadgeRoles">
+ <div :class="$style.noteHeaderUsername">
+ <MkAcct :user="appearNote.user"/>
+ </div>
+ <div v-if="appearNote.user.badgeRoles" :class="$style.noteHeaderBadgeRoles">
+ <img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
+ </div>
+ </div>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
</div>
</header>
@@ -135,7 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton"
class="_button"
:class="$style.noteFooterButton"
- :style="renoted ? 'color: var(--accent) !important;' : ''"
+ :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown.prevent="renoted ? undoRenote() : boostVisibility()"
>
<i class="ti ti-repeat"></i>
@@ -157,8 +164,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-heart ph-bold ph-lg"></i>
</button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
- <i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
- <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
+ <i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
+ <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
@@ -236,6 +243,7 @@ import { computed, inject, onMounted, provide, ref, shallowRef, watch } from 'vu
import * as mfm from '@transfem-org/sfm-js';
import * as Misskey from 'misskey-js';
import { isLink } from '@@/js/is-link.js';
+import { host } from '@@/js/config.js';
import MkNoteSub from '@/components/MkNoteSub.vue';
import MkNoteSimple from '@/components/MkNoteSimple.vue';
import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
@@ -259,10 +267,8 @@ import { reactionPicker } from '@/scripts/reaction-picker.js';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
import { $i } from '@/account.js';
import { i18n } from '@/i18n.js';
-import { host } from '@@/js/config.js';
import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js';
import { getNoteVersionsMenu } from '@/scripts/get-note-versions-menu.js';
-
import { useNoteCapture } from '@/scripts/use-note-capture.js';
import { deepClone } from '@/scripts/clone.js';
import { useTooltip } from '@/scripts/use-tooltip.js';
@@ -507,7 +513,7 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
}
function renote(visibility: Visibility, localOnly: boolean = false) {
- pleaseLogin(undefined, pleaseLoginContext.value);
+ pleaseLogin({ openOnRemote: pleaseLoginContext.value });
showMovedDialog();
renoting = true;
@@ -553,7 +559,7 @@ function renote(visibility: Visibility, localOnly: boolean = false) {
}
function quote() {
- pleaseLogin(undefined, pleaseLoginContext.value);
+ pleaseLogin({ openOnRemote: pleaseLoginContext.value });
showMovedDialog();
if (appearNote.value.channel) {
@@ -611,7 +617,7 @@ function quote() {
}
function reply(): void {
- pleaseLogin(undefined, pleaseLoginContext.value);
+ pleaseLogin({ openOnRemote: pleaseLoginContext.value });
showMovedDialog();
os.post({
reply: appearNote.value,
@@ -622,7 +628,7 @@ function reply(): void {
}
function react(): void {
- pleaseLogin(undefined, pleaseLoginContext.value);
+ pleaseLogin({ openOnRemote: pleaseLoginContext.value });
showMovedDialog();
if (appearNote.value.reactionAcceptance === 'likeOnly') {
sound.playMisskeySfx('reaction');
@@ -659,7 +665,7 @@ function react(): void {
}
function like(): void {
- pleaseLogin(undefined, pleaseLoginContext.value);
+ pleaseLogin({ openOnRemote: pleaseLoginContext.value });
showMovedDialog();
sound.playMisskeySfx('reaction');
misskeyApi('notes/like', {
@@ -741,7 +747,7 @@ async function clip(): Promise<void> {
function showRenoteMenu(): void {
if (!isMyRenote) return;
- pleaseLogin(undefined, pleaseLoginContext.value);
+ pleaseLogin({ openOnRemote: pleaseLoginContext.value });
os.popupMenu([{
text: i18n.ts.unrenote,
icon: 'ti ti-trash',
@@ -843,8 +849,8 @@ function animatedMFM() {
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
- border: dashed 2px var(--focus);
- border-radius: var(--radius);
+ border: dashed 2px var(--MI_THEME-focus);
+ border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@@ -874,7 +880,7 @@ function animatedMFM() {
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
- color: var(--renote);
+ color: var(--MI_THEME-renote);
}
.renoteAvatar {
@@ -883,7 +889,7 @@ function animatedMFM() {
width: 28px;
height: 28px;
margin: 0 8px 0 0;
- border-radius: var(--radius-sm);
+ border-radius: var(--MI-radius-sm);
}
.renoteText {
@@ -932,8 +938,8 @@ function animatedMFM() {
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
- width: var(--avatar);
- height: var(--avatar);
+ width: var(--MI-avatar);
+ height: var(--MI-avatar);
}
.noteHeaderBody {
@@ -956,16 +962,21 @@ function animatedMFM() {
padding: 4px 6px;
font-size: 80%;
line-height: 1;
- border: solid 0.5px var(--divider);
- border-radius: var(--radius-xs);
+ border: solid 0.5px var(--MI_THEME-divider);
+ border-radius: var(--MI-radius-xs);
}
.noteHeaderInfo {
float: right;
}
+.noteHeaderUsernameAndBadgeRoles {
+ display: flex;
+}
+
.noteHeaderUsername {
margin-bottom: 2px;
+ margin-right: 0.5em;
line-height: 1.3;
word-wrap: anywhere;
}
@@ -974,6 +985,19 @@ function animatedMFM() {
margin-top: 5px;
}
+.noteHeaderBadgeRoles {
+ margin: 0 .5em 0 0;
+}
+
+.noteHeaderBadgeRole {
+ height: 1.3em;
+ vertical-align: -20%;
+
+ & + .noteHeaderBadgeRole {
+ margin-left: 0.2em;
+ }
+}
+
.noteContent {
container-type: inline-size;
overflow-wrap: break-word;
@@ -989,19 +1013,19 @@ function animatedMFM() {
}
.noteReplyTarget {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
margin-right: 0.5em;
}
.rn {
margin-left: 4px;
font-style: oblique;
- color: var(--renote);
+ color: var(--MI_THEME-renote);
}
.translation {
- border: solid 0.5px var(--divider);
- border-radius: var(--radius);
+ border: solid 0.5px var(--MI_THEME-divider);
+ border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@@ -1016,8 +1040,8 @@ function animatedMFM() {
.quoteNote {
padding: 16px;
- border: dashed 1px var(--renote);
- border-radius: var(--radius-sm);
+ border: dashed 1px var(--MI_THEME-renote);
+ border-radius: var(--MI-radius-sm);
overflow: clip;
}
@@ -1042,7 +1066,7 @@ function animatedMFM() {
}
&:hover {
- color: var(--fgHighlighted);
+ color: var(--MI_THEME-fgHighlighted);
}
}
@@ -1052,17 +1076,17 @@ function animatedMFM() {
opacity: 0.7;
&.reacted {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
}
.reply:not(:first-child) {
- border-top: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
}
.tabs {
- border-top: solid 0.5px var(--divider);
- border-bottom: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
+ border-bottom: solid 0.5px var(--MI_THEME-divider);
display: flex;
}
@@ -1074,7 +1098,7 @@ function animatedMFM() {
}
.tabActive {
- border-bottom: solid 2px var(--accent);
+ border-bottom: solid 2px var(--MI_THEME-accent);
}
.tab_renotes {
@@ -1094,12 +1118,12 @@ function animatedMFM() {
.reactionTab {
padding: 4px 6px;
- border: solid 1px var(--divider);
- border-radius: var(--radius-sm);
+ border: solid 1px var(--MI_THEME-divider);
+ border-radius: var(--MI-radius-sm);
}
.reactionTabActive {
- border-color: var(--accent);
+ border-color: var(--MI_THEME-accent);
}
@container (max-width: 500px) {
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-03 22:43:16 +0000