change: user badge

mei23 · Nov 18, 2022 · 5b356b5 · 5b356b5
1 parent 7cd787a
commit 5b356b5
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 17 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -380,6 +380,7 @@ common:
   update-available-title: "Update available"
   update-available: "A new version of Misskey is now available({newer}, the current version is {current}). Reload the page to apply updates."
   my-token-regenerated: "Your token has been regenerated, so you will be signed out."
+  admin-user: "Administrator account"
   verified-user: "Verified account"
   hide-password: "Hide Password"
   show-password: "Show Password"

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -398,6 +398,7 @@ common:
   update-available-title: "更新があります"
   update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
   my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
+  admin-user: "管理者アカウント"
   verified-user: "公式アカウント"
   silenced-user: "Silenced user"
   suspended-user: "Suspended user"

diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
@@ -3,8 +3,7 @@
 	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle == 'smart'"/>
 	<router-link v-if="userUrl.startsWith('/')" class="name" :to="userUrl" v-user-preview="note.user.id"><mk-user-name :user="note.user"/></router-link>
 	<a v-else class="name" :href="userUrl" v-user-preview="note.user.id"><mk-user-name :user="note.user"/></a>
-	<span class="is-bot" v-if="note.user.isBot">bot</span>
-	<span class="is-cat" v-if="note.user.isCat">cat</span>
+	<span class="is-bot" v-if="note.user.isBot" :title="$t('@.bot-user')"><fa icon="robot"/></span>
 	<span class="username"><mk-acct :user="note.user"/></span>
 	<span class="is-verified" v-if="note.user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
 	<div class="info" v-if="!noInfo">
@@ -88,18 +87,6 @@ export default Vue.extend({
 		&:hover
 			text-decoration underline
 
-	> .is-bot
-	> .is-cat
-		flex-shrink 0
-		align-self center
-		margin 0 .5em 0 0
-		padding 1px 6px
-		font-size 80%
-		color var(--noteHeaderBadgeFg)
-		background var(--noteHeaderBadgeBg)
-		border-radius 3px
-
-
 	> .username
 		margin 0 .5em 0 0
 		overflow hidden

diff --git a/src/client/app/desktop/views/home/user/user.header.vue b/src/client/app/desktop/views/home/user/user.header.vue
@@ -9,8 +9,10 @@
 			</p>
 			<div>
 				<span class="username"><mk-acct :user="user" :detail="true" /></span>
-				<span v-if="user.isBot" :title="$t('is-bot')"><fa icon="robot"/></span>
 				<span v-if="user.movedToUser != null">moved to <router-link :to="user.movedToUser | userPage()"><mk-acct :user="user.movedToUser" :detail="true"/></router-link></span>
+				<span class="is-admin" v-if="user.isAdmin" :title="$t('@.admin-user')"><fa icon="wrench"/></span>
+				<span class="is-verified" v-if="user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
+				<span class="is-bot" v-if="user.isBot" :title="$t('@.bot-user')"><fa icon="robot"/></span>
 			</div>
 		</div>
 		<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('follows-you') }}</span>
@@ -260,13 +262,22 @@ export default Vue.extend({
 			> div
 				> *
 					display inline-block
-					margin-right 16px
+					margin-right .5em
 					line-height 20px
 					opacity 0.8
 
 					&.username
 						font-weight bold
 
+				> .is-admin
+					color var(--noteHeaderAdminFg)
+
+				> .is-verified
+					color #4dabf7
+
+				> .is-bot
+					color var(--noteHeaderBadgeFg)
+
 	> .avatar
 		display block
 		position absolute

diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue
@@ -22,6 +22,9 @@
 					<h1><mk-user-name :user="user" :key="user.id" :nowrap="false"/></h1>
 					<span class="username"><mk-acct :user="user" :detail="true" :key="user.id"/></span>
 					<span class="moved" v-if="user.movedToUser != null">moved to <router-link :to="user.movedToUser | userPage()"><mk-acct :user="user.movedToUser" :detail="true"/></router-link></span>
+					<span class="is-admin" v-if="user.isAdmin" :title="$t('@.admin-user')"><fa icon="wrench"/></span>
+					<span class="is-verified" v-if="user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
+					<span class="is-bot" v-if="user.isBot" :title="$t('@.bot-user')"><fa icon="robot"/></span>
 					<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
 				</div>
 				<div class="description">
@@ -286,7 +289,19 @@ export default Vue.extend({
 					color var(--mobileUserPageAcct)
 
 				> .moved
-					margin-left 8px
+					margin-left 4px
+
+				> .is-admin
+					margin-left .5em
+					color var(--noteHeaderAdminFg)
+
+				> .is-verified
+					margin-left .5em
+					color #4dabf7
+
+				> .is-bot
+					margin-left .5em
+					color var(--noteHeaderBadgeFg)
 
 				> .followed
 					margin-left 8px