From 64377234147431500942fc3f5eba702f4ac4544e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 17 Jul 2022 23:18:05 +0900
Subject: [PATCH] enhance(client): tweak ui
---
locales/ja-JP.yml | 1 +
packages/client/src/account.ts | 17 +++---
packages/client/src/components/ui/button.vue | 2 +-
.../client/src/components/ui/context-menu.vue | 4 +-
.../ui/{child-menu.vue => menu.child.vue} | 8 +--
packages/client/src/components/ui/menu.vue | 4 +-
.../client/src/pages/settings/profile.vue | 4 +-
packages/client/src/ui/deck/column.vue | 53 ++++++++++---------
8 files changed, 50 insertions(+), 43 deletions(-)
rename packages/client/src/components/ui/{child-menu.vue => menu.child.vue} (85%)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 21615a093..e071b4bda 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 38f2ee4b3..243aea68c 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 5f5d6d42e..d3a4b5ea9 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/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index e637d361c..165c3db46 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/child-menu.vue b/packages/client/src/components/ui/menu.child.vue
similarity index 85%
rename from packages/client/src/components/ui/child-menu.vue
rename to packages/client/src/components/ui/menu.child.vue
index a0c26b50c..b67224d3e 100644
--- a/packages/client/src/components/ui/child-menu.vue
+++ b/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 top = rect.top - 8;
+ const left = props.targetElement.offsetWidth;
+ 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>
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 26283ffe5..6d1a2cc77 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 f30b0ccbd..20c51c883 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 1a1bd7d26..7b30ffad4 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: () => {