feat: ✨ help menu in navbar
This commit is contained in:
parent
02870df588
commit
8cc7d11fa4
6 changed files with 109 additions and 81 deletions
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "calckey",
|
"name": "calckey",
|
||||||
"version": "13.2.0-dev19",
|
"version": "13.2.0-dev20",
|
||||||
"codename": "aqua",
|
"codename": "aqua",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
@ -148,73 +148,4 @@ export const navbarItemDef = reactive({
|
||||||
location.reload();
|
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",
|
"favorites",
|
||||||
"channels",
|
"channels",
|
||||||
"search",
|
"search",
|
||||||
|
"ui",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
visibility: {
|
visibility: {
|
||||||
|
|
|
@ -34,6 +34,9 @@
|
||||||
<button class="item _button post" data-cy-open-post-form @click="os.post">
|
<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>
|
<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,6 +47,7 @@ import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } fr
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { navbarItemDef } from '@/navbar';
|
import { navbarItemDef } from '@/navbar';
|
||||||
import { openAccountMenu as openAccountMenu_ } from '@/account';
|
import { openAccountMenu as openAccountMenu_ } from '@/account';
|
||||||
|
import { openHelpMenu_ } from '@/scripts/helpMenu'
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
|
@ -62,6 +66,10 @@ function openAccountMenu(ev: MouseEvent) {
|
||||||
}, ev);
|
}, ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openHelpMenu(ev: MouseEvent) {
|
||||||
|
openHelpMenu_(ev);
|
||||||
|
}
|
||||||
|
|
||||||
function more() {
|
function more() {
|
||||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
||||||
}, 'closed');
|
}, '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 {
|
> .instance {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="middle">
|
<div class="middle">
|
||||||
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
|
<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>
|
</MkA>
|
||||||
<template v-for="item in menu">
|
<template v-for="item in menu">
|
||||||
<div v-if="item === '-'" class="divider"></div>
|
<div v-if="item === '-'" class="divider"></div>
|
||||||
|
@ -30,25 +30,23 @@
|
||||||
</template>
|
</template>
|
||||||
<div class="divider"></div>
|
<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">
|
<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>
|
</MkA>
|
||||||
<button v-click-anime class="item _button" @click="more">
|
<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>
|
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
|
||||||
</button>
|
</button>
|
||||||
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item _button" active-class="active" to="/settings">
|
<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>
|
</MkA>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
|
<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>
|
||||||
|
<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>
|
||||||
<!-- <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>
|
|
||||||
</div> -->
|
|
||||||
<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
|
<!-- <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"/>
|
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
|
||||||
</button> -->
|
</button> -->
|
||||||
|
@ -65,6 +63,7 @@ import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { navbarItemDef } from '@/navbar';
|
import { navbarItemDef } from '@/navbar';
|
||||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
|
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
|
||||||
|
import { openHelpMenu_ } from '@/scripts/helpMenu'
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { instance } from '@/instance';
|
import { instance } from '@/instance';
|
||||||
|
@ -126,6 +125,10 @@ function openAccountMenu(ev: MouseEvent) {
|
||||||
}, ev);
|
}, ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openHelpMenu(ev: MouseEvent) {
|
||||||
|
openHelpMenu_(ev);
|
||||||
|
}
|
||||||
|
|
||||||
function more(ev: MouseEvent) {
|
function more(ev: MouseEvent) {
|
||||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||||
src: ev.currentTarget ?? ev.target,
|
src: ev.currentTarget ?? ev.target,
|
||||||
|
@ -265,7 +268,7 @@ function more(ev: MouseEvent) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .account {
|
> .help {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue