Improve navbar

This commit is contained in:
Aylam 2023-08-04 19:15:45 +03:00 committed by aylamz
parent 3c0de95e41
commit 0f14568c37
5 changed files with 22 additions and 31 deletions

View file

@ -275,7 +275,7 @@ currentPassword: "Current password"
newPassword: "New password"
newPasswordRetype: "Retype new password"
attachFile: "Attach files"
more: "More!"
more: "More"
featured: "Featured"
usernameOrUserId: "Username or user id"
noSuchUser: "User not found"

View file

@ -9,6 +9,7 @@ import { defaultStore } from "@/store";
import { instance } from "@/instance";
import { host } from "@/config";
import XTutorial from "@/components/MkTutorialDialog.vue";
import { openHelpMenu_ } from "@/scripts/helpMenu";
export const navbarItemDef = reactive({
notifications: {
@ -40,7 +41,7 @@ export const navbarItemDef = reactive({
},
explore: {
title: "explore",
icon: "ph-compass ph-bold ph-lg",
icon: "ph-hash ph-bold ph-lg",
to: "/explore",
},
announcements: {
@ -141,11 +142,22 @@ export const navbarItemDef = reactive({
);
},
},
help: {
title: "help",
icon: "ph-info ph-bold ph-lg",
action: (ev) => {
openHelpMenu(ev);
},
},
reload: {
title: "reload",
icon: "ph-arrows-clockwise ph-bold ph-lg",
action: (ev) => {
action: () => {
location.reload();
},
},
}
}
});
function openHelpMenu(ev: MouseEvent) {
openHelpMenu_(ev);
}

View file

@ -12,9 +12,10 @@ const menuOptions = [
"notifications",
"followRequests",
"messaging",
"explore",
"-",
"favorites",
"channels",
"announcements",
"explore",
"search",
];

View file

@ -80,6 +80,7 @@
<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
<button v-click-anime class="item _button" @click="more">
<i
class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
@ -111,13 +112,6 @@
<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.note }}</span>
</button>
<button
v-tooltip.noDelay.right="i18n.ts.help"
class="item _button help"
@click="openHelpMenu"
>
<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
</button>
</div>
</div>
</div>
@ -135,7 +129,6 @@ import {
import * as os from "@/os";
import { navbarItemDef } from "@/navbar";
import { openAccountMenu as openAccountMenu_ } from "@/account";
import { openHelpMenu_ } from "@/scripts/helpMenu";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
@ -157,10 +150,6 @@ function openAccountMenu(ev: MouseEvent) {
);
}
function openHelpMenu(ev: MouseEvent) {
openHelpMenu_(ev);
}
function more() {
os.popup(
defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),

View file

@ -92,6 +92,7 @@
><i class="icon ph-door ph-bold ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
<button
v-click-anime
v-tooltip.noDelay.right="i18n.ts.more"
@ -127,13 +128,6 @@
<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.note }}</span>
</button>
<button
v-tooltip.noDelay.right="i18n.ts.help"
class="item _button help"
@click="openHelpMenu"
>
<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
</button>
<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
</button> -->
@ -150,7 +144,6 @@ import { computed, defineAsyncComponent, ref, watch } from "vue";
import * as os from "@/os";
import { navbarItemDef } from "@/navbar";
import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
import { openHelpMenu_ } from "@/scripts/helpMenu";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { instance } from "@/instance";
@ -221,10 +214,6 @@ function openAccountMenu(ev: MouseEvent) {
);
}
function openHelpMenu(ev: MouseEvent) {
openHelpMenu_(ev);
}
function more(ev: MouseEvent) {
os.popup(
defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),