瀏覽代碼

:sparkles: fix https://github.com/siyuan-note/siyuan/issues/5736

Vanessa 2 年之前
父節點
當前提交
3c3b612e1d

+ 18 - 0
app/src/assets/scss/mobile.scss

@@ -294,6 +294,24 @@
   }
 }
 
+.status {
+  position: fixed;
+  bottom: 0;
+  transition: var(--b3-transition);
+  font-size: 12px;
+  color: var(--b3-theme-on-surface);
+  padding: 4px;
+  white-space: nowrap;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--b3-theme-surface);
+  @extend .fn__ellipsis;
+
+  &--hide {
+    bottom: -30px;
+  }
+}
+
 @media (max-width: 620px) {
   .protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] {
     flex-direction: column;

+ 1 - 0
app/src/assets/template/mobile/index.tpl

@@ -54,5 +54,6 @@
 </div>
 <div id="commonMenu" class="b3-menu fn__none"></div>
 <div id="message" class="b3-snackbars"></div>
+<div id="status" class="status status--hide"></div>
 </body>
 </html>

+ 11 - 0
app/src/dialog/processSystem.ts

@@ -147,7 +147,18 @@ export const transactionError = (data: { code: number, data: string }) => {
     });
 };
 
+let progressStatusTimeoutId: number
 export const progressStatus = (data: IWebSocketData) => {
+    if (isMobile()) {
+        clearTimeout(progressStatusTimeoutId);
+        const statusElement = document.querySelector("#status")
+        statusElement.innerHTML = data.msg;
+        statusElement.classList.remove("status--hide")
+        progressStatusTimeoutId = window.setTimeout(() => {
+            statusElement.classList.add("status--hide");
+        }, 6000);
+        return;
+    }
     document.querySelector("#status .status__msg").innerHTML = data.msg;
 };
 

+ 4 - 1
app/src/mobile/util/onMessage.ts

@@ -1,5 +1,5 @@
 import {openMobileFileById} from "../editor";
-import {progressLoading, transactionError} from "../../dialog/processSystem";
+import {progressLoading, progressStatus, transactionError} from "../../dialog/processSystem";
 
 export const onMessage = (data: IWebSocketData) => {
     if (data) {
@@ -23,6 +23,9 @@ export const onMessage = (data: IWebSocketData) => {
             case"txerr":
                 transactionError(data);
                 break;
+            case"statusbar":
+                progressStatus(data);
+                break;
         }
     }
 };