From d475bee01edf295a7e1e4424a8c0ae6806c4b059 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Thu, 6 Apr 2023 19:14:23 +0800 Subject: [PATCH] :zap: --- app/src/assets/scss/mobile.scss | 15 +++++---------- app/src/mobile/menu/index.ts | 2 +- app/src/mobile/menu/model.ts | 2 +- app/src/mobile/util/MobileBackFoward.ts | 14 +++++++------- app/src/mobile/util/closePanel.ts | 6 +++--- app/src/mobile/util/initFramework.ts | 4 ++-- app/src/mobile/util/touch.ts | 17 ++++++++++------- 7 files changed, 29 insertions(+), 31 deletions(-) diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index 2a4bbb8d9..6a210a98e 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -149,20 +149,16 @@ } .side-panel { - top: 0; - left: -110vw; - right: auto; position: fixed; background-color: var(--b3-theme-surface); height: 100vh; width: 100vw; z-index: 220; - transition: top .15s cubic-bezier(0, 0, .2, 1) 0ms, left .15s cubic-bezier(0, 0, .2, 1) 0ms; + transform: translateX(-100vw); + transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms; &--all { - left: 0; - right: 0; - top: -200vh; + transform: translateY(-100vh); } } @@ -246,10 +242,9 @@ } #menu { - transition: right 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms; + transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms; z-index: 220; - right: -110vw; - left: auto; + transform: translateX(100vw); } .keyboard { diff --git a/app/src/mobile/menu/index.ts b/app/src/mobile/menu/index.ts index 2b8f6b00d..ff68b0221 100644 --- a/app/src/mobile/menu/index.ts +++ b/app/src/mobile/menu/index.ts @@ -18,7 +18,7 @@ import {getRecentDocs} from "./getRecentDocs"; export const popMenu = () => { activeBlur(); hideKeyboardToolbar(); - document.getElementById("menu").style.right = "0"; + document.getElementById("menu").style.transform = "translateX(0)"; }; export const initRightMenu = () => { diff --git a/app/src/mobile/menu/model.ts b/app/src/mobile/menu/model.ts index 278391798..f6e38009b 100644 --- a/app/src/mobile/menu/model.ts +++ b/app/src/mobile/menu/model.ts @@ -5,7 +5,7 @@ export const openModel = (obj: { bindEvent: (element: HTMLElement) => void }) => { const modelElement = document.getElementById("model"); - modelElement.style.top = "0"; + modelElement.style.transform = "translateY(0)"; modelElement.querySelector(".toolbar__icon use").setAttribute("xlink:href", "#" + obj.icon); modelElement.querySelector(".toolbar__text").innerHTML = obj.title; const modelMainElement = modelElement.querySelector("#modelMain") as HTMLElement; diff --git a/app/src/mobile/util/MobileBackFoward.ts b/app/src/mobile/util/MobileBackFoward.ts index a5285a0ee..36dad2d4b 100644 --- a/app/src/mobile/util/MobileBackFoward.ts +++ b/app/src/mobile/util/MobileBackFoward.ts @@ -103,9 +103,9 @@ export const goForward = () => { !window.siyuan.menus.menu.element.classList.contains("fn__none")) { window.siyuan.menus.menu.element.dispatchEvent(new CustomEvent("click", {detail: "back"})); return; - } else if (document.getElementById("model").style.top === "0px" || - document.getElementById("menu").style.right === "0px" || - document.getElementById("sidebar").style.left === "0px") { + } else if (document.getElementById("model").style.transform === "translateY(0)" || + document.getElementById("menu").style.transform === "translateX(0)" || + document.getElementById("sidebar").style.transform === "translateX(0)") { closePanel(); return; } @@ -125,11 +125,11 @@ export const goBack = () => { !window.siyuan.menus.menu.element.classList.contains("fn__none")) { window.siyuan.menus.menu.element.dispatchEvent(new CustomEvent("click", {detail: "back"})); return; - } else if (document.getElementById("model").style.top === "0px") { - document.getElementById("model").style.top = "-200vh"; + } else if (document.getElementById("model").style.transform === "translateY(0)") { + document.getElementById("model").style.transform = ""; return; - } else if (document.getElementById("menu").style.right === "0px" || - document.getElementById("sidebar").style.left === "0px") { + } else if (document.getElementById("menu").style.transform === "translateX(0)" || + document.getElementById("sidebar").style.transform === "translateX(0)") { closePanel(); return; } diff --git a/app/src/mobile/util/closePanel.ts b/app/src/mobile/util/closePanel.ts index 4848d234e..876c79b92 100644 --- a/app/src/mobile/util/closePanel.ts +++ b/app/src/mobile/util/closePanel.ts @@ -1,7 +1,7 @@ export const closePanel = () => { - document.getElementById("menu").style.right = "-100vw"; - document.getElementById("sidebar").style.left = "-100vw"; - document.getElementById("model").style.top = "-200vh"; + document.getElementById("menu").style.transform = ""; + document.getElementById("sidebar").style.transform = ""; + document.getElementById("model").style.transform = ""; const maskElement = document.querySelector(".side-mask") as HTMLElement; maskElement.classList.add("fn__none"); maskElement.style.opacity = ""; diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts index a786f1a60..fb922427d 100644 --- a/app/src/mobile/util/initFramework.ts +++ b/app/src/mobile/util/initFramework.ts @@ -85,7 +85,7 @@ export const initFramework = () => { document.getElementById("toolbarFile").addEventListener("click", () => { hideKeyboardToolbar(); activeBlur(); - sidebarElement.style.left = "0"; + sidebarElement.style.transform = "translateX(0)"; const type = sidebarElement.querySelector(".toolbar--border .toolbar__icon--active").getAttribute("data-type"); if (type === "sidebar-outline-tab") { outline.update(); @@ -131,7 +131,7 @@ export const initFramework = () => { }, Constants.TIMEOUT_INPUT); } document.getElementById("modelClose").addEventListener("click", () => { - document.getElementById("model").style.top = "-200vh"; + document.getElementById("model").style.transform = ""; }); initEditorName(); if (getOpenNotebookCount() > 0) { diff --git a/app/src/mobile/util/touch.ts b/app/src/mobile/util/touch.ts index 71f65d673..f8e5ccdfd 100644 --- a/app/src/mobile/util/touch.ts +++ b/app/src/mobile/util/touch.ts @@ -17,7 +17,7 @@ const popSide = (render = true) => { } else { hideKeyboardToolbar(); activeBlur(); - document.getElementById("sidebar").style.left = "0"; + document.getElementById("sidebar").style.transform = "translateX(0)"; } }; @@ -40,6 +40,8 @@ export const handleTouchEnd = (event: TouchEvent) => { return; } + window.siyuan.mobile.editor.protyle.contentElement.style.overflow = ""; + // 有些事件不经过 touchstart 和 touchmove，因此需设置为 null 不再继续执行 clientX = null; // 有些事件不经过 touchmove @@ -208,10 +210,10 @@ export const handleTouchMove = (event: TouchEvent) => { const menuElement = hasClosestByAttribute(target, "id", "menu"); if (menuElement) { if (xDiff < 0) { - menuElement.style.right = xDiff + "px"; + menuElement.style.transform = `translateX(${-xDiff}px)`; transformMask(-xDiff / windowWidth); } else { - menuElement.style.right = "0px"; + menuElement.style.transform = "translateX(0)"; transformMask(0); } return; @@ -219,23 +221,24 @@ export const handleTouchMove = (event: TouchEvent) => { const sideElement = hasClosestByAttribute(target, "id", "sidebar"); if (sideElement) { if (xDiff > 0) { - sideElement.style.left = -xDiff + "px"; + sideElement.style.transform = `translateX(${-xDiff}px)`; transformMask(xDiff / windowWidth); } else { - sideElement.style.left = "0px"; + sideElement.style.transform = "translateX(0)"; transformMask(0); } return; } if (firstDirection === "toRight") { - document.getElementById("sidebar").style.left = -windowWidth - xDiff + "px"; + document.getElementById("sidebar").style.transform = `translateX(${-xDiff - windowWidth}px)`; transformMask((windowWidth + xDiff) / windowWidth); } else { - document.getElementById("menu").style.right = -windowWidth + xDiff + "px"; + document.getElementById("menu").style.transform = `translateX(${windowWidth - xDiff}px)`; transformMask((windowWidth - xDiff) / windowWidth); } activeBlur(); hideKeyboardToolbar(); + window.siyuan.mobile.editor.protyle.contentElement.style.overflow = "hidden"; } };