🎨 fix #12425

siyuan-note · Sep 28, 2024 · 0cec3bb · 0cec3bb
1 parent 0fa9726
commit 0cec3bb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
@@ -252,15 +252,12 @@
     .protyle-title {
       transition: margin .3s cubic-bezier(.25, .46, .45, .94) 0ms;
     }
-
-    .protyle-background__iconw {
-      transition: left .3s cubic-bezier(.25, .46, .45, .94) 0ms;
-    }
   }
 }
 
-.protyle-top:hover {
-  .protyle-background--enable .protyle-background__action {
+.protyle-top:hover .protyle-background--enable {
+  .protyle-background__action,
+  .protyle-background__img .protyle-icons {
     opacity: .86;
   }
 }
@@ -276,7 +273,7 @@
   }
 
   &--mobileshow {
-    .protyle-background__iconw > .protyle-icons,
+    .protyle-background__action,
     .protyle-background__img .protyle-icons {
       opacity: .86;
     }

diff --git a/app/src/boot/globalEvent/event.ts b/app/src/boot/globalEvent/event.ts
@@ -85,19 +85,13 @@ export const initWindowEvent = (app: App) => {
             target.classList.contains("protyle-background__icon")) {
             return;
         }
-        // 触摸屏背景和嵌入块按钮显示
-        const backgroundElement = hasClosestByClassName(target, "protyle-background");
-        if (backgroundElement) {
-            if (!globalTouchStart(event)) {
-                backgroundElement.classList.toggle("protyle-background--mobileshow");
-            }
-            return;
-        }
         const embedBlockElement = isInEmbedBlock(target);
         if (embedBlockElement) {
             embedBlockElement.firstElementChild.classList.toggle("protyle-icons--show");
             return;
         }
+        // 触摸屏背景和嵌入块按钮显示
+        globalTouchStart(event);
     }, false);
     document.addEventListener("touchend", (event) => {
         if (isIPad()) {

diff --git a/app/src/boot/globalEvent/touch.ts b/app/src/boot/globalEvent/touch.ts
@@ -49,6 +49,13 @@ export const globalTouchStart = (event: TouchEvent) => {
         event.stopImmediatePropagation();
         return true;
     }
+    if (backgroundElement) {
+        if (backgroundElement.classList.contains("protyle-background--enable")) {
+            backgroundElement.classList.add("protyle-background--mobileshow");
+        }
+    } else {
+        document.querySelector(".protyle-background--mobileshow")?.classList.remove("protyle-background--mobileshow");
+    }
     return false;
 };
 

diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
@@ -217,11 +217,11 @@ export class Background {
                     const imgSrc = target.getAttribute("src");
                     if (event.detail > 1 && !imgSrc.startsWith("data:image/png;base64")) {
                         previewImage(imgSrc);
+                        event.preventDefault();
+                        event.stopPropagation();
                     }
                     // 点击题头图菜单无法消失
                     window.siyuan.menus.menu.remove();
-                    event.preventDefault();
-                    event.stopPropagation();
                     break;
                 } else if (type === "position") {
                     const iconElements = this.element.firstElementChild.querySelectorAll(".protyle-icons");
@@ -416,6 +416,12 @@ export class Background {
                 target = target.parentElement;
             }
         });
+
+        /// #if MOBILE
+        if (!protyle.disabled) {
+          this.element.classList.add("protyle-background--mobileshow");
+        }
+        /// #endif
     }
 
     private removeTag(protyle: IProtyle) {