enhance(client): tweak ui

locales/ja-JP.yml

@@ -890,6 +890,7 @@ activeEmailValidationDescription: "ユーザーのメールアドレスのバリ
 navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
+move: "移動"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

packages/client/src/account.ts

@@ -206,17 +206,16 @@ export async function openAccountMenu(opts: {
 			to: `/@${ $i.username }`,
 			avatar: $i,
 		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
+			type: 'parent',
 			icon: 'fas fa-plus',
 			text: i18n.ts.addAccount,
-			action: () => {
+			children: [{
-				popupMenu([{
+				text: i18n.ts.existingAccount,
-					text: i18n.ts.existingAccount,
+				action: () => { showSigninDialog(); },
-					action: () => { showSigninDialog(); },
+			}, {
-				}, {
+				text: i18n.ts.createAccount,
-					text: i18n.ts.createAccount,
+				action: () => { createAccount(); },
-					action: () => { createAccount(); },
+			}],
-				}], ev.currentTarget ?? ev.target);
-			},
 		}, {
 			type: 'link',
 			icon: 'fas fa-users',

packages/client/src/components/ui/button.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 		rounded: {
 			type: Boolean,
 			required: false,
-			default: false,
+			default: true,
 		},
 		inline: {
 			type: Boolean,

packages/client/src/components/ui/context-menu.vue

@@ -1,16 +1,16 @@
 <template>
 <transition :name="$store.state.animation ? 'fade' : ''" appear>
 	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
+		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </transition>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount } from 'vue';
-import contains from '@/scripts/contains';
 import MkMenu from './menu.vue';
 import { MenuItem } from './types/menu.vue';
+import contains from '@/scripts/contains';
 import * as os from '@/os';
 
 const props = defineProps<{

packages/client/src/components/ui/menu.child.vue

@@ -14,6 +14,7 @@ import * as os from '@/os';
 const props = defineProps<{
 	items: MenuItem[];
 	targetElement: HTMLElement;
+	rootElement: HTMLElement;
 	width?: number;
 	viaKeyboard?: boolean;
 }>();
@@ -27,9 +28,10 @@ const el = ref<HTMLElement>();
 const align = 'left';
 
 function setPosition() {
+	const rootRect = props.rootElement.getBoundingClientRect();
 	const rect = props.targetElement.getBoundingClientRect();
-	const left = rect.left + props.targetElement.offsetWidth;
+	const left = props.targetElement.offsetWidth;
-	const top = rect.top - 8;
+	const top = (rect.top - rootRect.top) - 8;
 	el.value.style.left = left + 'px';
 	el.value.style.top = top + 'px';
 }
@@ -58,6 +60,6 @@ defineExpose({
 
 <style lang="scss" scoped>
 .sfhdhdhr {
-	position: fixed;
+	position: absolute;
 }
 </style>

packages/client/src/components/ui/menu.vue

@@ -50,7 +50,7 @@
 		</span>
 	</div>
 	<div v-if="childMenu" class="child">
-		<XChild ref="child" :items="childMenu" :target-element="childTarget" showing @actioned="childActioned"/>
+		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
 	</div>
 </div>
 </template>
@@ -61,7 +61,7 @@ import { focusPrev, focusNext } from '@/scripts/focus';
 import FormSwitch from '@/components/form/switch.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
 import * as os from '@/os';
-const XChild = defineAsyncComponent(() => import('./child-menu.vue'));
+const XChild = defineAsyncComponent(() => import('./menu.child.vue'));
 
 const props = defineProps<{
 	items: MenuItem[];

packages/client/src/pages/settings/profile.vue

@@ -3,9 +3,9 @@
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div class="avatar _acrylic">
 			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
-			<MkButton primary class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 		</div>
-		<MkButton primary class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
+		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
 	</div>
 
 	<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">

packages/client/src/ui/deck/column.vue

@@ -128,31 +128,36 @@ function getMenu() {
 			if (canceled) return;
 			updateColumn(props.column.id, result);
 		},
-	}, null, {
-		icon: 'fas fa-arrow-left',
-		text: i18n.ts._deck.swapLeft,
-		action: () => {
-			swapLeftColumn(props.column.id);
-		},
 	}, {
-		icon: 'fas fa-arrow-right',
+		type: 'parent',
-		text: i18n.ts._deck.swapRight,
+		text: i18n.ts.move + '...',
-		action: () => {
+		icon: 'fas fa-arrows-up-down-left-right',
-			swapRightColumn(props.column.id);
+		children: [{
-		},
+			icon: 'fas fa-arrow-left',
-	}, props.isStacked ? {
+			text: i18n.ts._deck.swapLeft,
-		icon: 'fas fa-arrow-up',
+			action: () => {
-		text: i18n.ts._deck.swapUp,
+				swapLeftColumn(props.column.id);
-		action: () => {
+			},
-			swapUpColumn(props.column.id);
+		}, {
-		},
+			icon: 'fas fa-arrow-right',
-	} : undefined, props.isStacked ? {
+			text: i18n.ts._deck.swapRight,
-		icon: 'fas fa-arrow-down',
+			action: () => {
-		text: i18n.ts._deck.swapDown,
+				swapRightColumn(props.column.id);
-		action: () => {
+			},
-			swapDownColumn(props.column.id);
+		}, props.isStacked ? {
-		},
+			icon: 'fas fa-arrow-up',
-	} : undefined, null, {
+			text: i18n.ts._deck.swapUp,
+			action: () => {
+				swapUpColumn(props.column.id);
+			},
+		} : undefined, props.isStacked ? {
+			icon: 'fas fa-arrow-down',
+			text: i18n.ts._deck.swapDown,
+			action: () => {
+				swapDownColumn(props.column.id);
+			},
+		} : undefined],
+	}, {
 		icon: 'fas fa-window-restore',
 		text: i18n.ts._deck.stackLeft,
 		action: () => {