ニックネーム機能のUIを変更

shrimpia · Apr 13, 2023 · 58f70be · 58f70be
1 parent 126f145
commit 58f70be
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/CHANGELOG-EBISSKEY.md b/CHANGELOG-EBISSKEY.md
@@ -4,6 +4,7 @@ Ebisskeyとしての変更履歴です。Misskeyのリリースノートは [CHA
 
 ## Unreleased
 
+* ニックネーム機能
 * 殆どのEbisskey独自機能を個別に有効化・無効化できるように
 * 実験的機能：新しいノートUI
   * 設定 >> Ebisskey から有効化できます。

diff --git a/packages/frontend/src/pages/settings/ebisskey.vue b/packages/frontend/src/pages/settings/ebisskey.vue
@@ -9,7 +9,7 @@
 			<MkSwitch v-model="nicknameEnabled">
 				ニックネーム機能
 				<template #caption>
-					ユーザーの名前を任意に変更できるようになります。変更は自分にのみ反映されます。<br>
+					ユーザーページにて、ユーザーの名前をクリック/タップすることで好きなものに変更できるようになります。変更は自分にのみ反映されます。<br>
 					頻繁に名前を変更するユーザーを識別するときなどに使えます。
 				</template>
 			</MkSwitch>

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
@@ -16,10 +16,7 @@
 						<div class="fade"></div>
 						<div class="title">
 							<div class="name">
-								<MkUserName :user="user" :nowrap="true"/>
-								<button v-if="defaultStore.reactiveState.nicknameEnabled.value" v-tooltip="'ニックネームを編集…'" class="_button nickname-button" @click="editNickname(props.user)">
-									<i class="ti ti-edit"/>
-								</button>
+								<MkUserName :user="user" :nowrap="true" @click="editNickname(props.user)"/>
 							</div>
 							<div class="bottom">
 								<span class="username"><MkAcct :user="user" :detail="true"/></span>
@@ -36,7 +33,7 @@
 					</div>
 					<MkAvatar class="avatar" :user="user" indicator/>
 					<div class="title">
-						<MkUserName :user="user" :nowrap="false" class="name"/>
+						<MkUserName :user="user" :nowrap="false" class="name" @click="editNickname(props.user)"/>
 						<div class="bottom">
 							<span class="username"><MkAcct :user="user" :detail="true"/></span>
 							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
@@ -401,6 +398,10 @@ onUnmounted(() => {
 							opacity: 0.8;
 						}
 					}
+
+					> .nickname-button {
+						margin-left: 8px;
+					}
 				}
 
 				> .avatar {

diff --git a/packages/frontend/src/scripts/edit-nickname.ts b/packages/frontend/src/scripts/edit-nickname.ts
@@ -3,6 +3,7 @@ import {defaultStore} from "@/store";
 import * as os from '@/os';
 
 export async function editNickname(user: User) {
+	if (!defaultStore.state.nicknameEnabled) return;
 	const { result, canceled } = await os.inputText({
 		title: 'ニックネームを編集',
 		placeholder: user.name || user.username,

diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
@@ -4,11 +4,12 @@ import { i18n } from '@/i18n';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { host } from '@/config';
 import * as os from '@/os';
-import { userActions } from '@/store';
+import {defaultStore, userActions} from '@/store';
 import { $i, iAmModerator } from '@/account';
 import { mainRouter } from '@/router';
 import { Router } from '@/nirax';
 import { rolesCache, userListsCache } from '@/cache';
+import {editNickname} from "@/scripts/edit-nickname";
 
 export function getUserMenu(user: misskey.entities.UserDetailed, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;
@@ -122,7 +123,13 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		action: () => {
 			os.post({ specified: user, initialText: `@${user.username} ` });
 		},
-	}, null, {
+	}, ...(defaultStore.state.nicknameEnabled ? [{
+		icon: 'ti ti-edit',
+		text: 'ニックネームを編集',
+		action: () => {
+			editNickname(user);
+		},
+	}] : []), null, {
 		type: 'parent',
 		icon: 'ti ti-list',
 		text: i18n.ts.addToList,