feature/help_menu (#9587)

Co-authored-by: ThatOneCalculator <kainoa@t1c.dev>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9587
This commit is contained in:
Kainoa Kanter 2023-02-09 22:48:25 +00:00
parent 6e01daef9e
commit a928c05d8e
9 changed files with 263 additions and 117 deletions

View file

@ -1786,3 +1786,20 @@ _deck:
list: "List"
mentions: "Mentions"
direct: "Direct messages"
_apps:
apps: "Apps"
crossPlatform: "Cross platform"
mobile: "Mobile"
firstParty: "First party"
firstClass: "First class"
secondClass: "Second class"
thirdClass: "Third class"
free: "Free"
paid: "Paid"
pwa: "Install PWA"
kaiteki: "Kaiteki"
milktea: "Milktea"
subwayTooter: "Subway Tooter"
kimis: "Kimis"
theDesk: "TheDesk"
lesskey: "Lesskey"

View file

@ -1,12 +1,12 @@
{
"name": "calckey",
"version": "13.1.3-beta",
"version": "13.1.3-beta8",
"codename": "aqua",
"repository": {
"type": "git",
"url": "https://codeberg.org/calckey/calckey.git"
},
"packageManager": "pnpm@7.26.3",
"packageManager": "pnpm@7.27.0",
"private": true,
"scripts": {
"rebuild": "pnpm run clean && pnpm -r run build && pnpm run gulp",

View file

@ -7,12 +7,14 @@
"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
},
"dependencies": {
"@khmyznikov/pwa-install": "^0.2.0"
},
"devDependencies": {
"@discordapp/twemoji": "14.0.2",
"@rollup/plugin-alias": "3.1.9",
"@rollup/plugin-json": "4.1.0",
"@rollup/pluginutils": "^4.2.1",
"@syuilo/aiscript": "0.11.1",
"@types/escape-regexp": "0.0.1",
"@types/glob": "8.0.0",
"@types/gulp": "4.0.10",
@ -26,13 +28,6 @@
"@types/uuid": "8.3.4",
"@vitejs/plugin-vue": "4.0.0",
"@vue/compiler-sfc": "3.2.45",
"cross-env": "7.0.3",
"cypress": "10.11.0",
"rollup": "3.9.1",
"start-server-and-test": "1.15.2",
"typescript": "4.9.4",
"@discordapp/twemoji": "14.0.2",
"@syuilo/aiscript": "0.11.1",
"autobind-decorator": "2.4.0",
"autosize": "5.0.2",
"blurhash": "1.1.5",
@ -45,6 +40,8 @@
"chartjs-plugin-zoom": "1.2.1",
"compare-versions": "5.0.3",
"cropperjs": "2.0.0-beta.2",
"cross-env": "7.0.3",
"cypress": "10.11.0",
"date-fns": "2.29.3",
"escape-regexp": "0.0.1",
"eventemitter3": "4.0.7",
@ -59,9 +56,11 @@
"punycode": "2.1.1",
"querystring": "0.2.1",
"rndstr": "1.0.0",
"rollup": "3.9.1",
"s-age": "1.1.2",
"sass": "1.57.1",
"seedrandom": "3.0.5",
"start-server-and-test": "1.15.2",
"strict-event-emitter-types": "2.0.0",
"stringz": "2.1.0",
"swiper": "^8.4.5",
@ -73,6 +72,7 @@
"tsc-alias": "1.8.2",
"tsconfig-paths": "4.1.2",
"twemoji-parser": "14.0.0",
"typescript": "4.9.4",
"uuid": "9.0.0",
"vanilla-tilt": "1.8.0",
"vite": "^4.1.1",

View file

@ -5,6 +5,10 @@ import * as os from "@/os";
import { i18n } from "@/i18n";
import { ui } from "@/config";
import { unisonReload } from "@/scripts/unison-reload";
import { defaultStore } from '@/store';
import { instance } from '@/instance';
import { host } from '@/config';
import XTutorial from '@/components/MkTutorialDialog.vue';
export const navbarItemDef = reactive({
notifications: {
@ -144,4 +148,59 @@ export const navbarItemDef = reactive({
location.reload();
},
},
help: {
title: "help",
icon: "ph-question-bold ph-lg",
action: (ev) => {
os.popupMenu([{
text: instance.name ?? host,
type: 'label',
}, {
type: 'link',
text: i18n.ts.instanceInfo,
icon: 'ph-info-bold ph-lg',
to: '/about',
}, {
type: 'link',
text: i18n.ts.aboutMisskey,
icon: 'ph-lightbulb-bold ph-lg',
to: '/about-calckey',
}, {
type: 'link',
text: i18n.ts._apps.apps,
icon: 'ph-device-mobile-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-bold ph-lg',
}, null, {
type: 'parent',
text: i18n.ts.developer,
icon: 'ph-code-bold ph-lg',
children: [{
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'ph-terminal-window-bold ph-lg',
}, {
text: i18n.ts.document,
icon: 'ph-file-doc-bold ph-lg',
action: () => {
window.open('/api-doc', '_blank');
},
}, {
type: 'link',
to: '/scratchpad',
text: 'AiScript Scratchpad',
icon: 'ph-scribble-loop-bold ph-lg',
}]
}], ev.currentTarget ?? ev.target,
);
},
},
});

View file

@ -0,0 +1,99 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div style="overflow: clip;">
<MkSpacer :content-max="600" :margin-min="20">
<div class="_formRoot">
<FormSection>
<template #label>{{ i18n.ts._apps.crossPlatform }}</template>
<div class="_formBlock" style="text-align: center;">
<pwa-install/>
<MkButton primary rounded inline @click="installPwa">{{ i18n.ts._apps.pwa }}</MkButton>
</div>
<div class="_formLinks">
<FormLink to="https://kaiteki.app" external>
<template #icon>
<i class="ph-android-logo-bold ph-xl"/>
<i class="ph-windows-logo-bold ph-xl"/>
<i class="ph-linux-logo-bold ph-xl"/>
</template>
{{ i18n.ts._apps.kaiteki }}
<template #suffix>{{ i18n.ts._apps.firstClass }}, {{ i18n.ts._apps.free }}</template>
</FormLink>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts._apps.mobile }}</template>
<div class="_formLinks">
<FormLink to="https://play.google.com/store/apps/details?id=jp.panta.misskeyandroidclient" external>
<template #icon>
<i class="ph-android-logo-bold ph-xl"/>
</template>
{{ i18n.ts._apps.milktea }}
<template #suffix>{{ i18n.ts._apps.firstClass }}, {{ i18n.ts._apps.free }}</template>
</FormLink>
<FormLink to="https://play.google.com/store/apps/details?id=jp.juggler.subwaytooter&gl=US" external>
<template #icon>
<i class="ph-android-logo-bold ph-xl"/>
</template>
{{ i18n.ts._apps.subwayTooter }}
<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
</FormLink>
<!-- <FormLink to="https://apps.apple.com/app/kimis-a-client-for-misskey/id1667275125" external>
<template #icon>
<i class="ph-apple-logo-bold ph-xl"/>
</template>
{{ i18n.ts._apps.kimis }}
<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.paid }}</template>
</FormLink> -->
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.desktop }}</template>
<div class="_formLinks">
<FormLink to="https://thedesk.top/" external>
<template #icon>
<i class="ph-apple-logo-bold ph-xl"/>
<i class="ph-windows-logo-bold ph-xl"/>
<i class="ph-linux-logo-bold ph-xl"/>
</template>
{{ i18n.ts._apps.theDesk }}
<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
</FormLink>
<FormLink to="https://github.com/AsPulse/lesskey" external>
<template #icon>
<i class="ph-terminal-window-bold ph-xl"/>
</template>
{{ i18n.ts._apps.lesskey }}
<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
</FormLink>
</div>
</FormSection>
</div>
</MkSpacer>
</div>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import '@khmyznikov/pwa-install';
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
function installPwa(ev: MouseEvent) {
const pwaInstall = document.getElementsByTagName('pwa-install')[0];
pwaInstall.showDialog();
}
definePageMetadata({
title: i18n.ts._apps.apps,
icon: null,
});
</script>

View file

@ -282,6 +282,10 @@ export const routes = [
path: "/about-calckey",
component: page(() => import("./pages/about-calckey.vue")),
},
{
path: "/apps",
component: page(() => import("./pages/apps.vue")),
},
{
path: "/theme-editor",
component: page(() => import("./pages/theme-editor.vue")),

View file

@ -34,9 +34,6 @@
<button class="item _button post" data-cy-open-post-form @click="os.post">
<i class="icon ph-pencil-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
</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>
</div>
</div>
</div>
@ -44,12 +41,10 @@
<script lang="ts" setup>
import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
import { host } from '@/config';
import * as os from '@/os';
import { navbarItemDef } from '@/navbar';
import { openAccountMenu as openAccountMenu_ } from '@/account';
import { defaultStore } from '@/store';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
const menu = toRef(defaultStore.state, 'menu');
@ -67,50 +62,6 @@ function openAccountMenu(ev: MouseEvent) {
}, ev);
}
function openInstanceMenu(ev: MouseEvent) {
os.popupMenu([{
text: instance.name ?? host,
type: 'label',
}, {
type: 'link',
text: i18n.ts.instanceInfo,
icon: 'ph-info-bold ph-lg',
to: '/about',
}, null, {
type: 'parent',
text: i18n.ts.help,
icon: 'ph-question-bold ph-lg',
children: [{
type: 'link',
to: '/mfm-cheat-sheet',
text: i18n.ts._mfm.cheatSheet,
icon: 'ph-code-bold ph-lg',
}, {
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'ph-terminal-window-bold ph-lg',
}, {
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'ph-terminal-window-bold ph-lg',
}, null, {
text: i18n.ts.document,
icon: 'ph-question-bold ph-lg',
action: () => {
window.open('/api-doc', '_blank');
},
}],
}, {
type: 'link',
text: i18n.ts.aboutMisskey,
to: '/about-calckey',
}], ev.currentTarget ?? ev.target, {
align: 'left',
});
}
function more() {
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
}, 'closed');

View file

@ -44,9 +44,14 @@
<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-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
</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"/>
<!-- <div class="help">
<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button" @click="openHelpMenu">
<i class="icon ph-info-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">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
</button> -->
<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
</button> -->
@ -57,14 +62,13 @@
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import XTutorial from '@/components/MkTutorialDialog.vue';
import * as os from '@/os';
import { navbarItemDef } from '@/navbar';
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { instance } from '@/instance';
import { host, version } from '@/config';
import { version } from '@/config';
const isEmpty = (x: string | null) => x == null || x === '';
@ -122,58 +126,6 @@ function openAccountMenu(ev: MouseEvent) {
}, ev);
}
function openInstanceMenu(ev: MouseEvent) {
os.popupMenu([{
text: instance.name ?? host,
type: 'label',
}, {
type: 'link',
text: i18n.ts.instanceInfo,
icon: 'ph-info-bold ph-lg',
to: '/about',
}, null, {
type: 'parent',
text: i18n.ts.help,
icon: 'ph-question-bold ph-lg',
children: [{
type: 'link',
to: '/mfm-cheat-sheet',
text: i18n.ts._mfm.cheatSheet,
icon: 'ph-code-bold ph-lg',
}, {
type: 'button',
action: async () => {
defaultStore.set('tutorial', 0);
os.popup(XTutorial, {}, {}, 'closed');
},
text: i18n.ts.replayTutorial,
icon: 'ph-circle-wavy-question-bold ph-lg',
}, {
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'ph-terminal-window-bold ph-lg',
}, {
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'ph-terminal-window-bold ph-lg',
}, null, {
text: i18n.ts.document,
icon: 'ph-question-bold ph-lg',
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
},
}],
}, {
type: 'link',
text: i18n.ts.aboutMisskey,
to: '/about-calckey',
}], ev.currentTarget ?? ev.target, {
align: 'left',
});
}
function more(ev: MouseEvent) {
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
src: ev.currentTarget ?? ev.target,
@ -296,7 +248,6 @@ function more(ev: MouseEvent) {
> .text {
margin-left: 1rem;
}
}
> .instance {

View file

@ -383,6 +383,7 @@ importers:
packages/client:
specifiers:
'@discordapp/twemoji': 14.0.2
'@khmyznikov/pwa-install': ^0.2.0
'@rollup/plugin-alias': 3.1.9
'@rollup/plugin-json': 4.1.0
'@rollup/pluginutils': ^4.2.1
@ -453,6 +454,8 @@ importers:
vue-plyr: ^7.0.0
vue-prism-editor: 2.0.0-alpha.2
vuedraggable: 4.1.0
dependencies:
'@khmyznikov/pwa-install': 0.2.0
devDependencies:
'@discordapp/twemoji': 14.0.2
'@rollup/plugin-alias': 3.1.9_rollup@3.9.1
@ -1186,6 +1189,13 @@ packages:
'@jridgewell/resolve-uri': 3.1.0
'@jridgewell/sourcemap-codec': 1.4.14
/@khmyznikov/pwa-install/0.2.0:
resolution: {integrity: sha512-Lz8lvCf47/DCVzXgLyCGt46HDpie2U/lga++vOgVwil3B8bSMj8fL1+a/8oBhDikHjtLKinTCMf0jZvgW2xCZQ==}
dependencies:
'@lit/localize': 0.11.4
lit: 2.6.1
dev: false
/@koa/cors/3.4.3:
resolution: {integrity: sha512-WPXQUaAeAMVaLTEFpoq3T2O1C+FstkjJnDQqy95Ck1UdILajsRhu6mhJ8H2f4NFPRBoCNN+qywTJfq/gGki5mw==}
engines: {node: '>= 8.0.0'}
@ -1219,6 +1229,23 @@ packages:
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
dev: true
/@lit-labs/ssr-dom-shim/1.0.0:
resolution: {integrity: sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==}
dev: false
/@lit/localize/0.11.4:
resolution: {integrity: sha512-RRIwIX2tAm3+DuEndoXSJrFjGrAK5cb5IXo5K6jcJ6sbgD829B8rSqHC5MaKVUmXTVLIR1bk5IZOZDf9wFereA==}
dependencies:
'@lit/reactive-element': 1.6.1
lit: 2.6.1
dev: false
/@lit/reactive-element/1.6.1:
resolution: {integrity: sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==}
dependencies:
'@lit-labs/ssr-dom-shim': 1.0.0
dev: false
/@mapbox/node-pre-gyp/1.0.9:
resolution: {integrity: sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==}
hasBin: true
@ -2457,6 +2484,10 @@ packages:
resolution: {integrity: sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==}
dev: true
/@types/trusted-types/2.0.2:
resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
dev: false
/@types/undertaker-registry/1.0.1:
resolution: {integrity: sha512-Z4TYuEKn9+RbNVk1Ll2SS4x1JeLHecolIbM/a8gveaHsW0Hr+RQMraZACwTO2VD7JvepgA6UO1A1VrbktQrIbQ==}
dev: true
@ -3256,7 +3287,7 @@ packages:
/axios/0.25.0_debug@4.3.4:
resolution: {integrity: sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==}
dependencies:
follow-redirects: 1.15.2
follow-redirects: 1.15.2_debug@4.3.4
transitivePeerDependencies:
- debug
dev: true
@ -6196,6 +6227,19 @@ packages:
peerDependenciesMeta:
debug:
optional: true
dev: false
/follow-redirects/1.15.2_debug@4.3.4:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
dependencies:
debug: 4.3.4
dev: true
/for-each/0.3.3:
resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@ -8349,6 +8393,27 @@ packages:
wrap-ansi: 7.0.0
dev: true
/lit-element/3.2.2:
resolution: {integrity: sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==}
dependencies:
'@lit/reactive-element': 1.6.1
lit-html: 2.6.1
dev: false
/lit-html/2.6.1:
resolution: {integrity: sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==}
dependencies:
'@types/trusted-types': 2.0.2
dev: false
/lit/2.6.1:
resolution: {integrity: sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==}
dependencies:
'@lit/reactive-element': 1.6.1
lit-element: 3.2.2
lit-html: 2.6.1
dev: false
/load-json-file/1.1.0:
resolution: {integrity: sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==}
engines: {node: '>=0.10.0'}