feat: ✨ help menu in navbar
This commit is contained in:
ThatOneCalculator
parent
02870df588
commit
8cc7d11fa4
6 changed files with 109 additions and 81 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "calckey",
|
||||
"version": "13.2.0-dev19",
|
||||
"version": "13.2.0-dev20",
|
||||
"codename": "aqua",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -148,73 +148,4 @@ export const navbarItemDef = reactive({
|
|||
location.reload();
|
||||
},
|
||||
},
|
||||
help: {
|
||||
title: "help",
|
||||
icon: "ph-question ph-bold ph-lg",
|
||||
action: (ev) => {
|
||||
os.popupMenu(
|
||||
[
|
||||
{
|
||||
text: instance.name ?? host,
|
||||
type: "label",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
text: i18n.ts.instanceInfo,
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
to: "/about",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
text: i18n.ts.aboutMisskey,
|
||||
icon: "ph-lightbulb ph-bold ph-lg",
|
||||
to: "/about-calckey",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
text: i18n.ts._apps.apps,
|
||||
icon: "ph-device-mobile ph-bold ph-lg",
|
||||
to: "/apps",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
action: async () => {
|
||||
defaultStore.set("tutorial", 0);
|
||||
os.popup(XTutorial, {}, {}, "closed");
|
||||
},
|
||||
text: i18n.ts.replayTutorial,
|
||||
icon: "ph-circle-wavy-question ph-bold ph-lg",
|
||||
},
|
||||
null,
|
||||
{
|
||||
type: "parent",
|
||||
text: i18n.ts.developer,
|
||||
icon: "ph-code ph-bold ph-lg",
|
||||
children: [
|
||||
{
|
||||
type: "link",
|
||||
to: "/api-console",
|
||||
text: "API Console",
|
||||
icon: "ph-terminal-window ph-bold ph-lg",
|
||||
},
|
||||
{
|
||||
text: i18n.ts.document,
|
||||
icon: "ph-file-doc ph-bold ph-lg",
|
||||
action: () => {
|
||||
window.open("/api-doc", "_blank");
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
to: "/scratchpad",
|
||||
text: "AiScript Scratchpad",
|
||||
icon: "ph-scribble-loop ph-bold ph-lg",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
ev.currentTarget ?? ev.target,
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
72
packages/client/src/scripts/helpMenu.ts
Normal file
72
packages/client/src/scripts/helpMenu.ts
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { defaultStore } from "@/store";
|
||||
import { instance } from "@/instance";
|
||||
import { host } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import XTutorial from "../components/MkTutorialDialog.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export function openHelpMenu_(ev: MouseEvent) {
|
||||
os.popupMenu(
|
||||
[
|
||||
{
|
||||
text: instance.name ?? host,
|
||||
type: "label",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
text: i18n.ts.instanceInfo,
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
to: "/about",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
text: i18n.ts.aboutMisskey,
|
||||
icon: "ph-lightbulb ph-bold ph-lg",
|
||||
to: "/about-calckey",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
text: i18n.ts._apps.apps,
|
||||
icon: "ph-device-mobile ph-bold ph-lg",
|
||||
to: "/apps",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
action: async () => {
|
||||
defaultStore.set("tutorial", 0);
|
||||
os.popup(XTutorial, {}, {}, "closed");
|
||||
},
|
||||
text: i18n.ts.replayTutorial,
|
||||
icon: "ph-circle-wavy-question ph-bold ph-lg",
|
||||
},
|
||||
null,
|
||||
{
|
||||
type: "parent",
|
||||
text: i18n.ts.developer,
|
||||
icon: "ph-code ph-bold ph-lg",
|
||||
children: [
|
||||
{
|
||||
type: "link",
|
||||
to: "/api-console",
|
||||
text: "API Console",
|
||||
icon: "ph-terminal-window ph-bold ph-lg",
|
||||
},
|
||||
{
|
||||
text: i18n.ts.document,
|
||||
icon: "ph-file-doc ph-bold ph-lg",
|
||||
action: () => {
|
||||
window.open("/api-doc", "_blank");
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
to: "/scratchpad",
|
||||
text: "AiScript Scratchpad",
|
||||
icon: "ph-scribble-loop ph-bold ph-lg",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
ev.currentTarget ?? ev.target
|
||||
);
|
||||
}
|
||||
|
|
@ -91,6 +91,7 @@ export const defaultStore = markRaw(
|
|||
"favorites",
|
||||
"channels",
|
||||
"search",
|
||||
"ui",
|
||||
],
|
||||
},
|
||||
visibility: {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@
|
|||
<button class="item _button post" data-cy-open-post-form @click="os.post">
|
||||
<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>
|
||||
|
|
@ -44,6 +47,7 @@ import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } fr
|
|||
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';
|
||||
|
||||
|
|
@ -62,6 +66,10 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
}, ev);
|
||||
}
|
||||
|
||||
function openHelpMenu(ev: MouseEvent) {
|
||||
openHelpMenu_(ev);
|
||||
}
|
||||
|
||||
function more() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
||||
}, 'closed');
|
||||
|
|
@ -160,6 +168,19 @@ function more() {
|
|||
}
|
||||
}
|
||||
|
||||
> .help {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
> .icon {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .instance {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
<div class="middle">
|
||||
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
|
||||
<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
|
||||
<i class="icon ph-house ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
|
||||
</MkA>
|
||||
<template v-for="item in menu">
|
||||
<div v-if="item === '-'" class="divider"></div>
|
||||
|
|
@ -30,25 +30,23 @@
|
|||
</template>
|
||||
<div class="divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item _button" active-class="active" to="/admin">
|
||||
<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
|
||||
<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
|
||||
</MkA>
|
||||
<button v-click-anime class="item _button" @click="more">
|
||||
<i class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
|
||||
<i class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
|
||||
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
|
||||
</button>
|
||||
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item _button" active-class="active" to="/settings">
|
||||
<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
|
||||
<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
|
||||
<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
|
||||
<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
|
||||
</button>
|
||||
<!-- <div class="help">
|
||||
<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button" @click="openHelpMenu">
|
||||
<i class="icon ph-info ph-bold ph-xl ph-fw ph-lg"></i>
|
||||
<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> -->
|
||||
<!-- <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> -->
|
||||
|
|
@ -65,6 +63,7 @@ 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';
|
||||
|
|
@ -126,6 +125,10 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
}, ev);
|
||||
}
|
||||
|
||||
function openHelpMenu(ev: MouseEvent) {
|
||||
openHelpMenu_(ev);
|
||||
}
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
|
|
@ -265,7 +268,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
}
|
||||
|
||||
> .account {
|
||||
> .help {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in a new issue