diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index d36ecd9ee..eab318e76 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -227,11 +227,12 @@ bottom: 0; width: 100%; box-sizing: border-box; - height: 32px; + height: 42px; background: var(--b3-theme-background); z-index: 212; display: flex; border-top: 1px solid var(--b3-theme-surface-lighter); + overflow: auto; button { background: transparent; @@ -239,10 +240,10 @@ border: 0; svg { - height: 18px; - width: 18px; - padding: 4px; - margin: 4px; + height: 16px; + width: 16px; + padding: 5px; + margin: 3px; color: var(--b3-theme-on-surface); } } diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl index 75d5a5846..f320fec48 100644 --- a/app/src/assets/template/mobile/index.tpl +++ b/app/src/assets/template/mobile/index.tpl @@ -71,6 +71,7 @@ +
diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts index dffcbfca4..7e128c4c2 100644 --- a/app/src/mobile/util/initFramework.ts +++ b/app/src/mobile/util/initFramework.ts @@ -17,7 +17,7 @@ import {hasTopClosestByTag} from "../../protyle/util/hasClosest"; import {MobileBacklinks} from "./MobileBacklinks"; import {MobileBookmarks} from "./MobileBookmarks"; import {MobileTags} from "./MobileTags"; -import {hideKeyboardToolbar, initKeyboardToolbar} from "./showKeyboardToolbar"; +import {hideKeyboard, hideKeyboardToolbar, initKeyboardToolbar} from "./showKeyboardToolbar"; import {getSearch} from "../../util/functions"; import {syncGuide} from "../../sync/syncGuide"; @@ -31,7 +31,9 @@ export const initFramework = () => { let backlink: MobileBacklinks; let bookmark: MobileBookmarks; let tag: MobileTags; - sidebarElement.querySelector(".toolbar--border").addEventListener(getEventName(), (event: Event & { target: Element }) => { + sidebarElement.querySelector(".toolbar--border").addEventListener(getEventName(), (event: Event & { + target: Element + }) => { const svgElement = hasTopClosestByTag(event.target, "svg"); if (!svgElement || svgElement.classList.contains("toolbar__icon--active")) { return; @@ -74,7 +76,9 @@ export const initFramework = () => { }); }); window.siyuan.mobile.files = new MobileFiles(); - document.getElementById("toolbarFile").addEventListener("click", () => { + document.getElementById("toolbarFile").addEventListener("click", (event) => { + hideKeyboardToolbar(); + hideKeyboard(); sidebarElement.style.left = "0"; document.querySelector(".scrim").classList.remove("fn__none"); const type = sidebarElement.querySelector(".toolbar--border .toolbar__icon--active").getAttribute("data-type"); @@ -120,6 +124,15 @@ export const initFramework = () => { } }); }); + if (navigator.userAgent.indexOf("iPhone") > -1 && !window.siyuan.config.readonly && !window.siyuan.config.editor.readOnly) { + // 不知道为什么 iPhone 中如果是编辑状态,点击文档后无法点击标题 + setTimeout(() => { + editElement.dispatchEvent(new CustomEvent(getEventName())); + setTimeout(() => { + editElement.dispatchEvent(new CustomEvent(getEventName())); + }, Constants.TIMEOUT_INPUT); + }, Constants.TIMEOUT_INPUT); + } scrimElement.addEventListener(getEventName(), () => { closePanel(); diff --git a/app/src/mobile/util/menu.ts b/app/src/mobile/util/menu.ts index f3ba3ee2c..53e48ec88 100644 --- a/app/src/mobile/util/menu.ts +++ b/app/src/mobile/util/menu.ts @@ -16,6 +16,7 @@ import {Dialog} from "../../dialog"; import {syncGuide} from "../../sync/syncGuide"; import {openCard} from "../../card/openCard"; import {pathPosix} from "../../util/pathName"; +import {hideKeyboard, hideKeyboardToolbar} from "./showKeyboardToolbar"; const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) => { closePanel(); @@ -114,6 +115,8 @@ const genWorkspace = (workspaceDirElement: Element) => { }); }; export const popMenu = () => { + hideKeyboard(); + hideKeyboardToolbar(); const modelElement = document.getElementById("model"); const modelMainElement = document.getElementById("modelMain"); const scrimElement = document.querySelector(".scrim"); diff --git a/app/src/mobile/util/showKeyboardToolbar.ts b/app/src/mobile/util/showKeyboardToolbar.ts index 345298c45..87215de53 100644 --- a/app/src/mobile/util/showKeyboardToolbar.ts +++ b/app/src/mobile/util/showKeyboardToolbar.ts @@ -41,6 +41,10 @@ export const hideKeyboardToolbar = () => { toolbarElement.classList.add("fn__none"); }; +export const hideKeyboard = () => { + (document.activeElement as HTMLElement).blur(); +}; + export const initKeyboardToolbar = () => { const toolbarElement = document.getElementById("keyboardToolbar"); toolbarElement.addEventListener("click", (event) => { @@ -49,12 +53,16 @@ export const initKeyboardToolbar = () => { if (!buttonElement || !window.siyuan.mobile.editor) { return; } - if (window.siyuan.mobile.editor.protyle.disabled) { - return; - } event.preventDefault(); event.stopPropagation(); const type = buttonElement.getAttribute("data-type"); + if (type === "done") { + hideKeyboard(); + return; + } + if (window.siyuan.mobile.editor.protyle.disabled) { + return; + } const protyle = window.siyuan.mobile.editor.protyle; if (type === "undo") { protyle.undo.undo(protyle); diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts index 25dc42d8f..a3954717a 100644 --- a/app/src/protyle/index.ts +++ b/app/src/protyle/index.ts @@ -214,8 +214,6 @@ export class Protyle { item.classList.remove("layout__wnd--active"); }); } - /// #else - showKeyboardToolbar(); /// #endif }); // 需等渲染完后再回调,用于定位搜索字段 https://github.com/siyuan-note/siyuan/issues/3171