diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index 157381924..b204f3b22 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -392,6 +392,10 @@ html { max-width: 100%; min-width: 426px; + .b3-list { + padding: 8px 0; + } + .b3-list:last-child { border-left: 1px solid var(--b3-theme-surface-lighter); } diff --git a/app/src/boot/globalEvent/keydown.ts b/app/src/boot/globalEvent/keydown.ts index 15c75be2c..a14e58b75 100644 --- a/app/src/boot/globalEvent/keydown.ts +++ b/app/src/boot/globalEvent/keydown.ts @@ -120,11 +120,16 @@ const dialogArrow = (app: App, element: HTMLElement, event: KeyboardEvent) => { currentLiElement.parentElement.firstElementChild.classList.add("b3-list-item--focus"); } } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") { - if (isWindow()) { - currentLiElement.classList.add("b3-list-item--focus"); + const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling; + if (sideElement) { + const tempLiElement = sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild; + if (tempLiElement) { + tempLiElement.classList.add("b3-list-item--focus") + } else { + currentLiElement.classList.add("b3-list-item--focus"); + } } else { - const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling; - (sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild).classList.add("b3-list-item--focus"); + currentLiElement.classList.add("b3-list-item--focus"); } } else if (event.key === "Enter") { const currentType = currentLiElement.getAttribute("data-type"); @@ -146,14 +151,15 @@ const dialogArrow = (app: App, element: HTMLElement, event: KeyboardEvent) => { } currentLiElement = element.querySelector(".b3-list-item--focus"); const rootId = currentLiElement.getAttribute("data-node-id"); + const pathElement = element.querySelector(".switch-doc__path") if (rootId) { fetchPost("/api/filetree/getFullHPathByID", { id: rootId }, (response) => { - currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = escapeHtml(response.data); + pathElement.innerHTML = escapeHtml(response.data); }); } else { - currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML; + pathElement.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML; } const currentRect = currentLiElement.getBoundingClientRect(); const currentParentRect = currentLiElement.parentElement.getBoundingClientRect(); @@ -1122,7 +1128,7 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => { switchDialog = new Dialog({ title: window.siyuan.languages.switchTab, content: `
-
+
${dockHtml} ${tabHtml}
diff --git a/app/src/business/openRecentDocs.ts b/app/src/business/openRecentDocs.ts index 408d2abce..d9bad8dc3 100644 --- a/app/src/business/openRecentDocs.ts +++ b/app/src/business/openRecentDocs.ts @@ -1,4 +1,4 @@ -import {fetchPost} from "../util/fetch"; +import {fetchPost, fetchSyncPost} from "../util/fetch"; import {unicode2Emoji} from "../emoji"; import {Constants} from "../constants"; import {escapeHtml} from "../util/escape"; @@ -10,6 +10,63 @@ import {focusByRange} from "../protyle/util/selection"; import {hasClosestByClassName} from "../protyle/util/hasClosest"; import {hideElements} from "../protyle/ui/hideElements"; +const getHTML = async (data: { rootID: string, icon: string, title: string }[], element: Element, key?: string) => { + let tabHtml = ""; + let index = 0 + data.forEach((item) => { + if (!key || item.title.toLowerCase().includes(key.toLowerCase())) { + tabHtml += `
  • +${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic", true)} +${escapeHtml(item.title)} +
    • `; + index++; + } + }); + let switchPath = ""; + if (tabHtml) { + const pathResponse = await fetchSyncPost("/api/filetree/getFullHPathByID", { + id: data[0].rootID + }); + switchPath = escapeHtml(pathResponse.data); + } + let dockHtml = ""; + if (!isWindow()) { + dockHtml = `"; + } + + const pathElement = element.querySelector(".switch-doc__path") + pathElement.innerHTML = switchPath; + pathElement.previousElementSibling.innerHTML = `
    + ${dockHtml} + ${tabHtml} +
    `; +} + export const openRecentDocs = () => { const openRecentDocsDialog = window.siyuan.dialogs.find(item => { if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.recentDocs.custom) { @@ -25,55 +82,37 @@ export const openRecentDocs = () => { if (getSelection().rangeCount > 0) { range = getSelection().getRangeAt(0); } - let tabHtml = ""; - response.data.forEach((item: any, index: number) => { - tabHtml += `
  • -${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic", true)} -${escapeHtml(item.title)} -
    • `; - }); - let dockHtml = ""; - if (!isWindow()) { - dockHtml = `"; - } const dialog = new Dialog({ - title: window.siyuan.languages.recentDocs, + title: `
    +
    ${window.siyuan.languages.recentDocs}
    +
    +
    + + +
    +
    `, content: `
    -
    -
    ${dockHtml} - ${tabHtml} -
    +
    `, + height: "80vh", destroyCallback: () => { if (range && range.getBoundingClientRect().height !== 0) { focusByRange(range); } } }); - if (response.data.length > 0) { - fetchPost("/api/filetree/getFullHPathByID", { - id: response.data[0].rootID - }, (response) => { - dialog.element.querySelector(".switch-doc__path").innerHTML = escapeHtml(response.data); - }); - } else { - dialog.element.querySelector(".switch-doc__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent; - } - dialog.element.querySelector("input").focus(); + const searchElement = dialog.element.querySelector("input") + searchElement.focus(); + searchElement.addEventListener("compositionend", () => { + getHTML(response.data, dialog.element, searchElement.value); + }); + searchElement.addEventListener("input", (event: InputEvent) => { + if (event.isComposing) { + return + } + getHTML(response.data, dialog.element, searchElement.value) + }); dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.recentDocs.custom); dialog.element.addEventListener("click", (event) => { const liElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item"); @@ -85,5 +124,6 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic event.preventDefault(); } }); + getHTML(response.data, dialog.element); }); };