diff --git a/app/src/menus/workspace.ts b/app/src/menus/workspace.ts index 53b05b33d..fabf8d7aa 100644 --- a/app/src/menus/workspace.ts +++ b/app/src/menus/workspace.ts @@ -7,7 +7,14 @@ import {getOpenNotebookCount, originalPath, pathPosix, showFileInFolder} from ". import {fetchNewDailyNote, mountHelp, newDailyNote} from "../util/mount"; import {fetchPost} from "../util/fetch"; import {Constants} from "../constants"; -import {isInAndroid, isInHarmony, isInIOS, isIPad, setStorageVal, writeText} from "../protyle/util/compatibility"; +import { + isInAndroid, + isInHarmony, + isInIOS, + isIPad, + setStorageVal, + writeText +} from "../protyle/util/compatibility"; import {openCard} from "../card/openCard"; import {openSetting} from "../config"; import {getAllDocks} from "../layout/getAll"; @@ -26,6 +33,7 @@ import {App} from "../index"; import {isBrowser} from "../util/functions"; import {openRecentDocs} from "../business/openRecentDocs"; import * as dayjs from "dayjs"; +import {upDownHint} from "../util/upDownHint"; const editLayout = (layoutName?: string) => { const dialog = new Dialog({ @@ -337,48 +345,106 @@ export const workspaceMenu = (app: App, rect: DOMRect) => { }]; if (window.siyuan.storage[Constants.LOCAL_LAYOUTS].length > 0) { layoutSubMenu.push({id: "separator_1", type: "separator"}); - } - window.siyuan.storage[Constants.LOCAL_LAYOUTS].sort((a: { name: string }, b: { name: string }) => { - return b.name > a.name ? -1 : 1; - }).forEach((item: ISaveLayout) => { layoutSubMenu.push({ iconHTML: "", - action: "iconEdit", - label: `${item.name} ${item.time ? dayjs(item.time).format("YYYY-MM-DD HH:mm") : ""}`, + type: "empty", + label: ` +
`, bind(menuElement) { - menuElement.addEventListener("click", (event) => { - if (hasClosestByClassName(event.target as Element, "b3-menu__action")) { + const genListHTML = () => { + let html = ""; + window.siyuan.storage[Constants.LOCAL_LAYOUTS].sort((a: ISaveLayout, b: ISaveLayout) => { + return b.name > a.name ? -1 : 1; + }).forEach((item: ISaveLayout) => { + if (inputElement.value === "" || item.name.toLowerCase().indexOf(inputElement.value.toLowerCase()) > -1) { + html += ` `; + } + }); + return html; + }; + const inputElement = menuElement.querySelector(".b3-text-field") as HTMLInputElement; + const listElement = menuElement.querySelector(".b3-list"); + inputElement.addEventListener("keydown", (event) => { + event.stopPropagation(); + if (event.isComposing) { + return; + } + upDownHint(listElement, event); + if (event.key === "Escape") { + window.siyuan.menus.menu.remove(); + } else if (event.key === "Enter") { + const currentElement = listElement.querySelector(".b3-list-item--focus"); + if (currentElement) { + listElement.dispatchEvent(new CustomEvent("click", {detail: currentElement.getAttribute("data-name")})); + } + } + }); + inputElement.addEventListener("compositionend", () => { + listElement.innerHTML = genListHTML(); + }); + inputElement.addEventListener("input", (event: InputEvent) => { + if (event.isComposing) { + return; + } + event.stopPropagation(); + listElement.innerHTML = genListHTML(); + }); + listElement.addEventListener("click", (event: MouseEvent) => { + if (window.siyuan.config.readonly) { + return; + } + const actionElement = hasClosestByClassName(event.target as Element, "b3-list-item__action"); + if (actionElement) { event.preventDefault(); event.stopPropagation(); - editLayout(item.name); + editLayout(actionElement.parentElement.dataset.name); window.siyuan.menus.menu.remove(); return; } - if (window.siyuan.config.readonly) { - window.location.reload(); - } else { - fetchPost("/api/system/setUILayout", {layout: item.layout}, () => { - if (item.filesPaths) { - window.siyuan.storage[Constants.LOCAL_FILESPATHS] = item.filesPaths; - setStorageVal(Constants.LOCAL_FILESPATHS, item.filesPaths, () => { - window.location.reload(); - }); - } else { - window.location.reload(); + const liElement = hasClosestByClassName(event.target as Element, "b3-list-item"); + if (liElement || event.detail) { + const itemData: ISaveLayout = window.siyuan.storage[Constants.LOCAL_LAYOUTS].find((item: ISaveLayout) => { + if (typeof event.detail === "string") { + return item.name === event.detail; + } else if (liElement) { + return item.name === liElement.dataset.name; } }); + if (itemData) { + fetchPost("/api/system/setUILayout", {layout: itemData.layout}, () => { + if (itemData.filesPaths) { + window.siyuan.storage[Constants.LOCAL_FILESPATHS] = itemData.filesPaths; + setStorageVal(Constants.LOCAL_FILESPATHS, itemData.filesPaths, () => { + window.location.reload(); + }); + } else { + window.location.reload(); + } + }); + } + event.preventDefault(); + event.stopPropagation(); } }); + listElement.innerHTML = genListHTML(); } }); - }); - window.siyuan.menus.menu.append(new MenuItem({ - id: "layout", - label: window.siyuan.languages.layout, - icon: "iconLayout", - type: "submenu", - submenu: layoutSubMenu - }).element); + } + if (!window.siyuan.config.readonly) { + window.siyuan.menus.menu.append(new MenuItem({ + id: "layout", + label: window.siyuan.languages.layout, + icon: "iconLayout", + type: "submenu", + submenu: layoutSubMenu + }).element); + } window.siyuan.menus.menu.append(new MenuItem({id: "separator_1", type: "separator"}).element); if (!window.siyuan.config.readonly) { if (getOpenNotebookCount() < 2) {