From f3b0c6f1e7a37973f2d43a8ff56fbe19adc28ac4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 17:52:59 +0900
Subject: [PATCH] chore(client): tweak ui

---
 packages/client/src/components/ui/tooltip.vue |  2 +-
 packages/client/src/ui/_common_/navbar.vue    | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index 152c939a1a..f81bf2fc5b 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -116,7 +116,7 @@ const setPosition = () => {
 		let top: number;
 
 		if (props.targetElement) {
-			left = (rect.left + window.pageXOffset) + props.innerMargin;
+			left = (rect.left + props.targetElement.offsetWidth + window.pageXOffset) + props.innerMargin;
 			top = rect.top + window.pageYOffset + (props.targetElement.offsetHeight / 2);
 		} else {
 			left = props.x + props.innerMargin;
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 4fb3980142..924dda25d7 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -4,29 +4,38 @@
 		<button v-click-anime class="item _button account" @click="openAccountMenu">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		<MkA v-click-anime v-tooltip.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
+			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<component
+				:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+				v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+				v-click-anime v-tooltip.right="i18n.ts[navbarItemDef[item].title]"
+				class="item _button"
+				:class="[item, { active: navbarItemDef[item].active }]"
+				active-class="active"
+				:to="navbarItemDef[item].to"
+				v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+			>
+				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
 				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
+			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
 		<button v-click-anime class="item _button" @click="more">
-			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
-			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		<MkA v-click-anime v-tooltip.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
+			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="os.post">
-			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 		</button>
 	</div>
 </div>
@@ -38,6 +47,7 @@ import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const iconOnly = ref(false);