From 8f3ca867d2e03f8ee376d1f4fa9b1cc241af8376 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 17 Jul 2022 23:18:05 +0900
Subject: enhance(client): tweak ui

---
 locales/ja-JP.yml                                  |  1 +
 packages/client/src/account.ts                     | 17 +++---
 packages/client/src/components/ui/button.vue       |  2 +-
 packages/client/src/components/ui/child-menu.vue   | 63 ---------------------
 packages/client/src/components/ui/context-menu.vue |  4 +-
 packages/client/src/components/ui/menu.child.vue   | 65 ++++++++++++++++++++++
 packages/client/src/components/ui/menu.vue         |  4 +-
 packages/client/src/pages/settings/profile.vue     |  4 +-
 packages/client/src/ui/deck/column.vue             | 53 ++++++++++--------
 9 files changed, 110 insertions(+), 103 deletions(-)
 delete mode 100644 packages/client/src/components/ui/child-menu.vue
 create mode 100644 packages/client/src/components/ui/menu.child.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 21615a093e..e071b4bdab 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -890,6 +890,7 @@ activeEmailValidationDescription: "ユーザーのメールアドレスのバリ
 navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
+move: "移動"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 38f2ee4b36..243aea68c4 100644
--- a/packages/client/src/account.ts
+++ b/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: () => {
-				popupMenu([{
-					text: i18n.ts.existingAccount,
-					action: () => { showSigninDialog(); },
-				}, {
-					text: i18n.ts.createAccount,
-					action: () => { createAccount(); },
-				}], ev.currentTarget ?? ev.target);
-			},
+			children: [{
+				text: i18n.ts.existingAccount,
+				action: () => { showSigninDialog(); },
+			}, {
+				text: i18n.ts.createAccount,
+				action: () => { createAccount(); },
+			}],
 		}, {
 			type: 'link',
 			icon: 'fas fa-users',
diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/ui/button.vue
index 5f5d6d42ed..d3a4b5ea92 100644
--- a/packages/client/src/components/ui/button.vue
+++ b/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,
diff --git a/packages/client/src/components/ui/child-menu.vue b/packages/client/src/components/ui/child-menu.vue
deleted file mode 100644
index a0c26b50cd..0000000000
--- a/packages/client/src/components/ui/child-menu.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-<div ref="el" class="sfhdhdhr">
-	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { on } from 'events';
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import MkMenu from './menu.vue';
-import { MenuItem } from '@/types/menu';
-import * as os from '@/os';
-
-const props = defineProps<{
-	items: MenuItem[];
-	targetElement: HTMLElement;
-	width?: number;
-	viaKeyboard?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'actioned'): void;
-}>();
-
-const el = ref<HTMLElement>();
-const align = 'left';
-
-function setPosition() {
-	const rect = props.targetElement.getBoundingClientRect();
-	const left = rect.left + props.targetElement.offsetWidth;
-	const top = rect.top - 8;
-	el.value.style.left = left + 'px';
-	el.value.style.top = top + 'px';
-}
-
-function onChildClosed(actioned?: boolean) {
-	if (actioned) {
-		emit('actioned');
-	} else {
-		emit('closed');
-	}
-}
-
-onMounted(() => {
-	setPosition();
-	nextTick(() => {
-		setPosition();
-	});
-});
-
-defineExpose({
-	checkHit: (ev: MouseEvent) => {
-		return (ev.target === el.value || el.value.contains(ev.target));
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.sfhdhdhr {
-	position: fixed;
-}
-</style>
diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index e637d361cf..165c3db462 100644
--- a/packages/client/src/components/ui/context-menu.vue
+++ b/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<{
diff --git a/packages/client/src/components/ui/menu.child.vue b/packages/client/src/components/ui/menu.child.vue
new file mode 100644
index 0000000000..b67224d3e1
--- /dev/null
+++ b/packages/client/src/components/ui/menu.child.vue
@@ -0,0 +1,65 @@
+<template>
+<div ref="el" class="sfhdhdhr">
+	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { on } from 'events';
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
+import MkMenu from './menu.vue';
+import { MenuItem } from '@/types/menu';
+import * as os from '@/os';
+
+const props = defineProps<{
+	items: MenuItem[];
+	targetElement: HTMLElement;
+	rootElement: HTMLElement;
+	width?: number;
+	viaKeyboard?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+	(ev: 'actioned'): void;
+}>();
+
+const el = ref<HTMLElement>();
+const align = 'left';
+
+function setPosition() {
+	const rootRect = props.rootElement.getBoundingClientRect();
+	const rect = props.targetElement.getBoundingClientRect();
+	const left = props.targetElement.offsetWidth;
+	const top = (rect.top - rootRect.top) - 8;
+	el.value.style.left = left + 'px';
+	el.value.style.top = top + 'px';
+}
+
+function onChildClosed(actioned?: boolean) {
+	if (actioned) {
+		emit('actioned');
+	} else {
+		emit('closed');
+	}
+}
+
+onMounted(() => {
+	setPosition();
+	nextTick(() => {
+		setPosition();
+	});
+});
+
+defineExpose({
+	checkHit: (ev: MouseEvent) => {
+		return (ev.target === el.value || el.value.contains(ev.target));
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.sfhdhdhr {
+	position: absolute;
+}
+</style>
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 26283ffe55..6d1a2cc770 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/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[];
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index f30b0ccbdc..20c51c8836 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/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">
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 1a1bd7d266..7b30ffad45 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/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',
-		text: i18n.ts._deck.swapRight,
-		action: () => {
-			swapRightColumn(props.column.id);
-		},
-	}, props.isStacked ? {
-		icon: 'fas fa-arrow-up',
-		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, null, {
+		type: 'parent',
+		text: i18n.ts.move + '...',
+		icon: 'fas fa-arrows-up-down-left-right',
+		children: [{
+			icon: 'fas fa-arrow-left',
+			text: i18n.ts._deck.swapLeft,
+			action: () => {
+				swapLeftColumn(props.column.id);
+			},
+		}, {
+			icon: 'fas fa-arrow-right',
+			text: i18n.ts._deck.swapRight,
+			action: () => {
+				swapRightColumn(props.column.id);
+			},
+		}, props.isStacked ? {
+			icon: 'fas fa-arrow-up',
+			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: () => {
-- 
cgit v1.2.3-freya