Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

enhance(frontend): ノートの詳細画面にロールのバッジを表示(#14058)

Browse source
This commit is contained in:
shimmar 2024-11-12 03:27:59 +09:00
parent 6bd3ed2074
commit 6eded862bc
1 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -62,7 +62,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>
@ -679,12 +686,30 @@ function loadConversation() {
float: right;
}
.noteHeaderUsernameAndBadgeRoles {
display: flex;
}
.noteHeaderUsername {
margin-bottom: 2px;
margin-right: 0.5em;
line-height: 1.3;
word-wrap: anywhere;
}
.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;