natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ help menu in navbar

This commit is contained in:
ThatOneCalculator 2023-04-01 11:56:43 -07:00
parent 02870df588
commit 8cc7d11fa4
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
6 changed files with 109 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

69
packages/client/src/navbar.ts
View File

@ -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
View 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
);
}

1
packages/client/src/store.ts
View File

@ -91,6 +91,7 @@ export const defaultStore = markRaw(
"favorites", "favorites",
"channels", "channels",
"search", "search",
"ui",
], ],
}, },
visibility: { visibility: {

21
packages/client/src/ui/_common_/navbar-for-mobile.vue
View File

@ -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;

25
packages/client/src/ui/_common_/navbar.vue
View File

@ -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;