diff options
Diffstat (limited to 'packages/client/src')
| -rw-r--r-- | packages/client/src/components/ui/tooltip.vue | 2 | ||||
| -rw-r--r-- | 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); |