diff --git a/app/src/assets/scss/business/_history.scss b/app/src/assets/scss/business/_history.scss index def12c479..b336352ca 100644 --- a/app/src/assets/scss/business/_history.scss +++ b/app/src/assets/scss/business/_history.scss @@ -16,7 +16,6 @@ height: 100%; box-sizing: border-box; border-radius: 0 0 4px 4px; - overflow: hidden; } &__date { diff --git a/app/src/history/diff.ts b/app/src/history/diff.ts index 251b3b20b..c9c7c1e9d 100644 --- a/app/src/history/diff.ts +++ b/app/src/history/diff.ts @@ -112,8 +112,8 @@ export const showDiff = (data: { id: string, time: string }[]) => { fetchPost("/api/repo/diffRepoSnapshots", {left, right}, (response) => { const dialog = new Dialog({ title: window.siyuan.languages.compare, - content: `
-
+ content: `
+
  • diff --git a/app/src/history/history.ts b/app/src/history/history.ts index 711797323..0eb5bbca8 100644 --- a/app/src/history/history.ts +++ b/app/src/history/history.ts @@ -11,8 +11,11 @@ import {escapeAttr, escapeHtml} from "../util/escape"; import {isMobile} from "../util/functions"; import {showDiff} from "./diff"; import {setStorageVal} from "../protyle/util/compatibility"; +import {openModel} from "../mobile/menu/model"; +import {closeModel} from "../mobile/util/closePanel"; let historyEditor: Protyle; + const renderDoc = (element: HTMLElement, currentPage: number) => { const previousElement = element.querySelector('[data-type="docprevious"]'); const nextElement = element.querySelector('[data-type="docnext"]'); @@ -89,6 +92,7 @@ const renderRepoItem = (response: IWebSocketData, element: Element, type: string `; } let repoHTML = ""; + const isPhone = isMobile(); response.data.snapshots.forEach((item: { memo: string, id: string, @@ -98,45 +102,30 @@ const renderRepoItem = (response: IWebSocketData, element: Element, type: string tag: string, typesCount: { type: string, count: number }[] }) => { - if (isMobile()) { - repoHTML += `
  • -
    - ${escapeHtml(item.memo)} + repoHTML += `
  • +
    +
    + ${escapeHtml(item.memo)} ${item.tag}
    ${item.hCreated} ${window.siyuan.languages.fileSize} ${item.hSize} - ${window.siyuan.languages.fileCount} ${item.count} -
    -
    ${actionHTML}
    -
    • `; - } else { - repoHTML += `
  • -
    -
    - ${escapeHtml(item.memo)} - ${item.tag} -
    -
    - ${item.hCreated} - ${window.siyuan.languages.fileSize} ${item.hSize} - ${window.siyuan.languages.fileCount} ${item.count}`; - let statHTML = ""; - if (item.typesCount && 0 < item.typesCount.length) { - statHTML += ` + ${window.siyuan.languages.fileCount} ${item.count}`; + let statHTML = ""; + if (item.typesCount && 0 < item.typesCount.length && !isPhone) { + statHTML += ` ${item.typesCount.map((type: { type: string, count: number }) => { - return `${type.type} ${type.count}`; - }).join("  ")}`; - } - repoHTML += `${statHTML} + return `${type.type} ${type.count}`; + }).join("  ")}`; + } + repoHTML += `${statHTML}
    ${actionHTML}
    • `; - } }); element.lastElementChild.innerHTML = `${repoHTML}`; }; @@ -227,56 +216,56 @@ export const openHistory = () => { return; } - const currentNotebookId = window.siyuan.storage[Constants.LOCAL_HISTORYNOTEID]; let notebookSelectHTML = ""; window.siyuan.notebooks.forEach((item) => { if (!item.closed) { - notebookSelectHTML += ` `; + notebookSelectHTML += ` `; } }); - const dialog = new Dialog({ - content: `
    + const contentHTML = `
    ${window.siyuan.languages.fileHistory}
    -
    ${window.siyuan.languages.removedNotebook}
    +
    ${window.siyuan.languages.removedNotebook}
    ${window.siyuan.languages.dataSnapshot}
    -
    - - - -
    -
    - - +
    +
    + + + +
    +
    + + +
    + + + + + + + +
    - - - - - - - -
    -
      +
      • ${window.siyuan.languages.emptyContent}
      @@ -288,37 +277,57 @@ export const openHistory = () => {
    • ${window.siyuan.languages.emptyContent}
    -
    - - - -
    - - - - - -
    +
    +
    + + + +
    + + + + + +
    +
    • ${window.siyuan.languages.emptyContent}
    -
    `, - width: "80vw", - height: "80vh", - destroyCallback() { - historyEditor = undefined; - } - }); +
    `; - const firstPanelElement = dialog.element.querySelector("#historyContainer [data-type=doc]") as HTMLElement; + if (isMobile()) { + openModel({ + html: contentHTML, + icon: "iconHistory", + title: window.siyuan.languages.dataHistory, + bindEvent(element) { + bindEvent(element.firstElementChild) + } + }) + } else { + const dialog = new Dialog({ + content: contentHTML, + width: "80vw", + height: "80vh", + destroyCallback() { + historyEditor.destroy(); + historyEditor = undefined; + } + }); + bindEvent(dialog.element, dialog) + } +}; + +const bindEvent = (element: Element, dialog?: Dialog) => { + const firstPanelElement = element.querySelector("#historyContainer [data-type=doc]") as HTMLElement; firstPanelElement.querySelectorAll(".b3-select").forEach((itemElement) => { itemElement.addEventListener("change", () => { renderDoc(firstPanelElement, 1); @@ -350,7 +359,7 @@ export const openHistory = () => { typewriterMode: false, }); disabledProtyle(historyEditor.protyle); - const repoElement = dialog.element.querySelector('#historyContainer [data-type="repo"]'); + const repoElement = element.querySelector('#historyContainer [data-type="repo"]'); const selectElement = repoElement.querySelector(".b3-select") as HTMLSelectElement; selectElement.addEventListener("change", () => { const value = selectElement.value; @@ -361,17 +370,17 @@ export const openHistory = () => { } else if (value === "2") { renderRepo(repoElement, -2); } - const btnElement = dialog.element.querySelector(".b3-button[data-type='compare']"); + const btnElement = element.querySelector(".b3-button[data-type='compare']"); btnElement.removeAttribute("disabled"); btnElement.removeAttribute("data-ids"); }); - dialog.element.addEventListener("click", (event) => { + element.addEventListener("click", (event) => { let target = event.target as HTMLElement; - while (target && !target.isEqualNode(dialog.element)) { + while (target && !target.isEqualNode(element)) { const type = target.getAttribute("data-type"); if (target.classList.contains("item")) { target.parentElement.querySelector(".item--focus").classList.remove("item--focus"); - Array.from(dialog.element.querySelector("#historyContainer").children).forEach((item: HTMLElement) => { + Array.from(element.querySelector("#historyContainer").children).forEach((item: HTMLElement) => { if (item.getAttribute("data-type") === type) { item.classList.remove("fn__none"); item.classList.add("fn__block"); @@ -454,7 +463,7 @@ export const openHistory = () => { target.firstElementChild.firstElementChild.classList.toggle("b3-list-item__arrow--open"); break; } else if (target.classList.contains("b3-list-item") && type === "repoitem") { - const btnElement = dialog.element.querySelector(".b3-button[data-type='compare']"); + const btnElement = element.querySelector(".b3-button[data-type='compare']"); const idJSON = JSON.parse(btnElement.getAttribute("data-ids") || "[]"); const id = target.getAttribute("data-id"); if (target.classList.contains("b3-list-item--focus")) { @@ -611,7 +620,13 @@ export const openHistory = () => { break; } else if (type === "rebuildIndex") { fetchPost("/api/history/reindexHistory"); - dialog.destroy(); + if (dialog) { + dialog.destroy(); + } else { + closeModel(); + historyEditor.destroy(); + historyEditor = undefined + } break; } else if (type === "compare") { showDiff(JSON.parse(target.getAttribute("data-ids") || "[]")); @@ -620,4 +635,4 @@ export const openHistory = () => { target = target.parentElement; } }); -}; +} diff --git a/app/src/mobile/menu/index.ts b/app/src/mobile/menu/index.ts index f0479ee27..be7825380 100644 --- a/app/src/mobile/menu/index.ts +++ b/app/src/mobile/menu/index.ts @@ -195,7 +195,6 @@ export const initRightMenu = () => { break; } else if (target.id === "menuHistory" && !window.siyuan.config.readonly) { openHistory(); - closePanel(); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/mobile/util/closePanel.ts b/app/src/mobile/util/closePanel.ts index 876c79b92..fe7eac650 100644 --- a/app/src/mobile/util/closePanel.ts +++ b/app/src/mobile/util/closePanel.ts @@ -1,3 +1,5 @@ +import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar"; + export const closePanel = () => { document.getElementById("menu").style.transform = ""; document.getElementById("sidebar").style.transform = ""; @@ -7,3 +9,9 @@ export const closePanel = () => { maskElement.style.opacity = ""; window.siyuan.menus.menu.remove(); }; + +export const closeModel = () => { + document.getElementById("model").style.transform = ""; + activeBlur(); + hideKeyboardToolbar(); +} diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts index 839c7d0a2..cd3524691 100644 --- a/app/src/mobile/util/initFramework.ts +++ b/app/src/mobile/util/initFramework.ts @@ -1,5 +1,5 @@ import {Constants} from "../../constants"; -import {closePanel} from "./closePanel"; +import {closeModel, closePanel} from "./closePanel"; import {openMobileFileById} from "../editor"; import {validateName} from "../../editor/rename"; import {getEventName} from "../../protyle/util/compatibility"; @@ -130,9 +130,7 @@ export const initFramework = () => { }, Constants.TIMEOUT_INPUT); } document.getElementById("modelClose").addEventListener("click", () => { - document.getElementById("model").style.transform = ""; - activeBlur(); - hideKeyboardToolbar(); + closeModel(); }); initEditorName(); if (getOpenNotebookCount() > 0) { diff --git a/app/src/mobile/util/touch.ts b/app/src/mobile/util/touch.ts index 8a444ee81..aaf86982d 100644 --- a/app/src/mobile/util/touch.ts +++ b/app/src/mobile/util/touch.ts @@ -38,7 +38,7 @@ export const handleTouchEnd = (event: TouchEvent) => { hasClosestByClassName(target, "viewer-container") || hasClosestByClassName(target, "keyboard") || hasClosestByAttribute(target, "id", "commonMenu") || - hasClosestByAttribute(target, "id", "model") + hasClosestByAttribute(target, "id", "model", true) ) { return; } @@ -165,7 +165,7 @@ export const handleTouchMove = (event: TouchEvent) => { hasClosestByClassName(target, "keyboard") || hasClosestByClassName(target, "viewer-container") || hasClosestByAttribute(target, "id", "commonMenu") || - hasClosestByAttribute(target, "id", "model")) { + hasClosestByAttribute(target, "id", "model", true)) { return; } if (getSelection().rangeCount > 0) {