diff --git a/app/appearance/langs/en_US.json b/app/appearance/langs/en_US.json index 91f325427..2269e4ac8 100644 --- a/app/appearance/langs/en_US.json +++ b/app/appearance/langs/en_US.json @@ -1,4 +1,5 @@ { + "commandEmpty": "No command yet, click to go to the market to download more plugins", "commandPanel": "Command Palette", "cloudRegionNorthAmerica": "LiuYun (Data Center in North America)", "cloudRegionChina": "LianDi (Data Center in Mainland China)", diff --git a/app/appearance/langs/es_ES.json b/app/appearance/langs/es_ES.json index 46c2fbbbf..0df06a469 100644 --- a/app/appearance/langs/es_ES.json +++ b/app/appearance/langs/es_ES.json @@ -1,4 +1,5 @@ { + "commandEmpty": "Sin comando todavía, haga clic para ir al mercado para descargar más complementos", "commandPanel": "Paleta de comandos", "cloudRegionNorthAmerica": "LiuYun (Centro de datos en América del Norte)", "cloudRegionChina": "LianDi (Centro de datos en China continental)", diff --git a/app/appearance/langs/fr_FR.json b/app/appearance/langs/fr_FR.json index e5cf66603..df388addf 100644 --- a/app/appearance/langs/fr_FR.json +++ b/app/appearance/langs/fr_FR.json @@ -1,4 +1,5 @@ { + "commandEmpty": "Aucune commande pour le moment, cliquez pour aller sur le marché pour télécharger plus de plugins", "commandPanel": "Palette de commandes", "cloudRegionNorthAmerica": "LiuYun (centre de données en Amérique du Nord)", "cloudRegionChina": "LianDi (centre de données en Chine continentale)", diff --git a/app/appearance/langs/zh_CHT.json b/app/appearance/langs/zh_CHT.json index c130e2671..ee21c297d 100644 --- a/app/appearance/langs/zh_CHT.json +++ b/app/appearance/langs/zh_CHT.json @@ -1,4 +1,5 @@ { + "commandEmpty": "暫無命令，點擊前往集市下載更多插件", "commandPanel": "命令面板", "cloudRegionNorthAmerica": "流雲（北美數據中心）", "cloudRegionChina": "鏈滴（中國大陸數據中心）", diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json index 4791c516f..aa96919ea 100644 --- a/app/appearance/langs/zh_CN.json +++ b/app/appearance/langs/zh_CN.json @@ -1,4 +1,5 @@ { + "commandEmpty": "暂无命令，点击前往集市下载更多插件", "commandPanel": "命令面板", "cloudRegionNorthAmerica": "流云（北美数据中心）", "cloudRegionChina": "链滴（中国大陆数据中心）", diff --git a/app/src/layout/topBar.ts b/app/src/layout/topBar.ts index 873286da4..7e3d12beb 100644 --- a/app/src/layout/topBar.ts +++ b/app/src/layout/topBar.ts @@ -304,6 +304,21 @@ export const setZoom = (type: "zoomIn" | "zoomOut" | "restore") => { const openPlugin = (app: App, target: Element) => { const menu = new Menu("topBarPlugin"); + menu.addItem({ + icon: "iconSettings", + label: window.siyuan.languages.config, + click() { + openSetting(app).element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click")); + } + }); + menu.addItem({ + icon: "iconLayoutBottom", + label: window.siyuan.languages.commandPanel, + click() { + commandPanel(app); + } + }); + menu.addSeparator(); let hasPlugin = false; app.plugins.forEach((plugin) => { // @ts-ignore @@ -366,25 +381,9 @@ const openPlugin = (app: App, target: Element) => { }); } }); - - if (hasPlugin) { - menu.addSeparator(); + if (!hasPlugin) { + window.siyuan.menus.menu.element.querySelector(".b3-menu__separator").remove() } - menu.addItem({ - icon: "iconSettings", - label: window.siyuan.languages.config, - click() { - const dialogSetting = openSetting(app); - dialogSetting.element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click")); - } - }); - menu.addItem({ - icon: "iconLayoutBottom", - label: window.siyuan.languages.commandPanel, - click() { - commandPanel(); - } - }); let rect = target.getBoundingClientRect(); if (rect.width === 0) { rect = document.querySelector("#barMore").getBoundingClientRect(); diff --git a/app/src/plugin/commandPanel.ts b/app/src/plugin/commandPanel.ts index 2ddfda4be..967018a9c 100644 --- a/app/src/plugin/commandPanel.ts +++ b/app/src/plugin/commandPanel.ts @@ -1,8 +1,87 @@ import {Dialog} from "../dialog"; +import {App} from "../index"; +import {upDownHint} from "../util/upDownHint"; +import {openSetting} from "../config"; -export const commandPanel = () => { - const panel = new Dialog({ - title: window.siyuan.languages.commandPanel, - content:`
` +export const commandPanel = (app: App) => { + const dialog = new Dialog({ + width: "80vw", + height: "70vh", + content: `
+
+ + +
+
+ +
+
` + }) + const listElement = dialog.element.querySelector("#commands"); + app.plugins.forEach(plugin => { + plugin.commands.forEach(command => { + const liElement = document.createElement("li"); + liElement.classList.add("b3-list-item") + liElement.innerHTML = `${command.langText || plugin.i18n[command.langKey]} +${command.customHotkey}`; + liElement.addEventListener("click", () => { + command.callback(); + dialog.destroy(); + }) + listElement.insertAdjacentElement("beforeend", liElement); + }) + }) + + if (listElement.childElementCount === 0) { + const liElement = document.createElement("li"); + liElement.classList.add("b3-list-item"); + liElement.innerHTML = `${window.siyuan.languages.commandEmpty}`; + liElement.addEventListener("click", () => { + dialog.destroy(); + openSetting(app).element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click")); + }) + listElement.insertAdjacentElement("beforeend", liElement); + } else { + listElement.firstElementChild.classList.add("b3-list-item--focus"); + } + + const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement; + inputElement.addEventListener("keydown", (event: KeyboardEvent) => { + event.stopPropagation(); + if (event.isComposing) { + return; + } + upDownHint(listElement, event); + if (event.key === "Enter") { + const currentElement = listElement.querySelector(".b3-list-item--focus"); + if (currentElement) { + currentElement.dispatchEvent(new CustomEvent("click")); + } + dialog.destroy(); + } else if (event.key === "Escape") { + dialog.destroy(); + } + }); + inputElement.addEventListener("compositionend", (event: InputEvent) => { + filterList(inputElement, listElement); + }) + inputElement.addEventListener("input", (event: InputEvent) => { + if (event.isComposing) { + return; + } + event.stopPropagation(); + filterList(inputElement, listElement); + }); +} + +const filterList = (inputElement: HTMLInputElement, listElement: Element) => { + const inputValue = inputElement.value.toLowerCase(); + Array.from(listElement.children).forEach((element: HTMLElement) => { + const elementValue = element.querySelector(".b3-list-item__text").textContent.toLowerCase(); + if (inputValue.indexOf(elementValue) > -1 || elementValue.indexOf(inputValue) > -1) { + element.classList.remove("fn__none"); + } else { + element.classList.add("fn__none") + } }) }