diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/_protyle.scss index b74635063..2d6cd6409 100644 --- a/app/src/assets/scss/_protyle.scss +++ b/app/src/assets/scss/_protyle.scss @@ -448,23 +448,3 @@ transition: var(--b3-transition); } } - -// 触摸屏嵌入块固定显示操作按钮 -@media (hover: none) { - .protyle-wysiwyg { - &[contenteditable="false"] .render-node[data-type=NodeBlockQueryEmbed] .protyle-action__edit { - display: none; - } - - [data-node-id].render-node[data-type=NodeBlockQueryEmbed] { - .protyle-icons { - opacity: .86; - top: 8px; - - & + .protyle-wysiwyg__embed > .protyle-breadcrumb__bar { - margin-right: 74px; - } - } - } - } -} diff --git a/app/src/assets/scss/_typography.scss b/app/src/assets/scss/_typography.scss index cd8b2bf0f..4b6584e4e 100644 --- a/app/src/assets/scss/_typography.scss +++ b/app/src/assets/scss/_typography.scss @@ -472,6 +472,10 @@ right: 4px; top: 4px; display: flex; + + &--show { + opacity: .86; + } } &-icon { diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index ebe9758f3..3cd736f0d 100644 --- a/app/src/protyle/header/Background.ts +++ b/app/src/protyle/header/Background.ts @@ -336,19 +336,6 @@ export class Background { target = target.parentElement; } }); - this.element.addEventListener("touchstart", (event) => { - // https://github.com/siyuan-note/siyuan/issues/6328 - if (protyle.disabled) { - return; - } - const target = event.target as HTMLElement; - if (hasClosestByClassName(target, "protyle-icons") || - hasClosestByClassName(target, "item") || - target.classList.contains("protyle-background__icon")) { - return; - } - this.element.classList.toggle("protyle-background--mobileshow"); - }); } public render(ial: IObject, rootId: string) { diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index 08b101349..a458ef33e 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -3,6 +3,7 @@ import {lineNumberRender} from "../markdown/highlightRender"; import {scrollEvent} from "../scroll/event"; import {isMobile} from "../../util/functions"; import {Constants} from "../../constants"; +import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest"; export const initUI = (protyle: IProtyle) => { protyle.contentElement = document.createElement("div"); @@ -47,6 +48,28 @@ export const initUI = (protyle: IProtyle) => { setEditMode(protyle, protyle.options.mode); document.execCommand("DefaultParagraphSeparator", false, "p"); + + // 触摸屏背景和嵌入块按钮显示 + protyle.contentElement.addEventListener("touchstart", (event) => { + // https://github.com/siyuan-note/siyuan/issues/6328 + if (protyle.disabled) { + return; + } + const target = event.target as HTMLElement; + if (hasClosestByClassName(target, "protyle-icons") || + hasClosestByClassName(target, "item") || + target.classList.contains("protyle-background__icon")) { + return; + } + if (hasClosestByClassName(target, "protyle-background")) { + protyle.background.element.classList.toggle("protyle-background--mobileshow"); + return; + } + const embedBlockElement = hasClosestByAttribute(target, "data-type", "NodeBlockQueryEmbed") + if (embedBlockElement) { + embedBlockElement.firstElementChild.classList.toggle("protyle-icons--show"); + } + }); }; export const addLoading = (protyle: IProtyle) => { diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts index 702e252fc..d40f2f328 100644 --- a/app/src/protyle/util/onGet.ts +++ b/app/src/protyle/util/onGet.ts @@ -305,7 +305,11 @@ export const disabledProtyle = (protyle: IProtyle) => { } if (protyle.background) { protyle.background.element.classList.remove("protyle-background--enable"); + protyle.background.element.classList.remove("protyle-background--mobileshow"); } + protyle.wysiwyg.element.querySelectorAll(".protyle-icons--show").forEach(item => { + item.classList.remove("protyle-icons--show"); + }) protyle.wysiwyg.element.style.userSelect = "text"; protyle.wysiwyg.element.setAttribute("contenteditable", "false"); protyle.wysiwyg.element.querySelectorAll('[contenteditable="true"][spellcheck="false"]').forEach(item => { diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 3d5758e69..b17dad66e 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -1405,6 +1405,7 @@ export class WYSIWYG { let shiftStartElement: HTMLElement; this.element.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => { hideElements(["hint", "util"], protyle); + /// #if !MOBILE const backlinkBreadcrumbItemElement = hasClosestByClassName(event.target, "protyle-breadcrumb__item"); if (backlinkBreadcrumbItemElement) { const breadcrumbId = backlinkBreadcrumbItemElement.getAttribute("data-id") @@ -1421,6 +1422,7 @@ export class WYSIWYG { event.stopPropagation(); return; } + /// #endif if (!window.siyuan.shiftIsPressed) { shiftStartElement = undefined; } diff --git a/app/src/util/onGetConfig.ts b/app/src/util/onGetConfig.ts index 880f8a512..2c5216771 100644 --- a/app/src/util/onGetConfig.ts +++ b/app/src/util/onGetConfig.ts @@ -7,6 +7,7 @@ import {ipcRenderer, OpenDialogReturnValue} from "electron"; import * as fs from "fs"; import * as path from "path"; import {afterExport} from "../protyle/export/util"; +import {destroyPrintWindow} from "../protyle/export"; /// #endif import {Constants} from "../constants"; import {appearance} from "../config/appearance"; @@ -29,7 +30,6 @@ import {showMessage} from "../dialog/message"; import {replaceLocalPath} from "../editor/rename"; import {editor} from "../config/editor"; import {goBack, goForward} from "./backForward"; -import {destroyPrintWindow} from "../protyle/export"; const matchKeymap = (keymap: Record, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => { if (key1 === "general") {