From 6a3039f7b7d635a3a3e00ea9501bc44b1c9dc76c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 5 Feb 2023 10:37:03 +0900
Subject: feat: ロールにアイコンを設定してユーザー名の横に表示できるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve #9761
---
 packages/frontend/src/components/MkNoteHeader.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

(limited to 'packages/frontend/src/components/MkNoteHeader.vue')

diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 8771168a42..6b43f14665 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -5,6 +5,9 @@
 	</MkA>
 	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
 	<div :class="$style.username"><MkAcct :user="note.user"/></div>
+	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
+		<img v-for="role in note.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
+	</div>
 	<div :class="$style.info">
 		<MkA :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
@@ -77,4 +80,17 @@ defineProps<{
 	margin-left: auto;
 	font-size: 0.9em;
 }
+
+.badgeRoles {
+	margin: 0 .5em 0 0;
+}
+
+.badgeRole {
+	height: 1.3em;
+	vertical-align: -20%;
+
+	& + .badgeRole {
+		margin-left: .125em;
+	}
+}
 </style>
-- 
cgit v1.2.3-freya