From 60024c65f5d8560fcbd9bd10f11bb1784564d4e4 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 24 Oct 2022 10:59:35 +0800
Subject: [PATCH] :iphone: fix
 https://github.com/siyuan-note/siyuan/issues/6328

---
 app/src/assets/scss/_protyle.scss    | 27 +++++++++++----------------
 app/src/protyle/header/Background.ts | 13 +++++++++++++
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/_protyle.scss
index 2db977b6a..b74635063 100644
--- a/app/src/assets/scss/_protyle.scss
+++ b/app/src/assets/scss/_protyle.scss
@@ -219,19 +219,22 @@
       opacity: 1;
     }
 
-    .protyle-background__img:hover .protyle-icons {
-      opacity: .86;
-    }
-
-    &:hover > .protyle-background__iconw > .protyle-icons {
-      opacity: .86;
-    }
-
+    .protyle-background__img:hover .protyle-icons,
+    &:hover > .protyle-background__iconw > .protyle-icons,
     .protyle-background__icon:hover {
       opacity: .86;
     }
   }
 
+
+  &--mobileshow {
+    .protyle-background__iconw > .protyle-icons,
+    .protyle-background__img .protyle-icons,
+    .protyle-background__tags .item svg {
+      opacity: .86;
+    }
+  }
+
   &__icon {
     height: 80px;
     width: 80px;
@@ -464,12 +467,4 @@
       }
     }
   }
-
-  .protyle-background--enable {
-    .protyle-background__iconw > .protyle-icons,
-    .protyle-background__img .protyle-icons,
-    .protyle-background__tags .item svg {
-      opacity: .86;
-    }
-  }
 }
diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 3cd736f0d..ebe9758f3 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -336,6 +336,19 @@ 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) {