🎨 fix https://github.com/siyuan-note/siyuan/issues/7041

app/appearance/icons/ant/icon.js

@@ -1,5 +1,16 @@
 document.body.insertAdjacentHTML('afterBegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconCloudOff" viewBox="0 0 32 32">
+    <path d="M32 18.76c0-3.52-2.733-6.373-6.2-6.613-0.907-4.6-4.947-8.053-9.8-8.053-1.773 0-3.427 0.48-4.867 1.293l1.987 1.987c0.893-0.387 1.853-0.613 2.88-0.613 4.053 0 7.333 3.28 7.333 7.333v0.667h2c2.213 0 4 1.787 4 4 0 1.32-0.64 2.467-1.613 3.2l1.88 1.88c1.453-1.227 2.4-3.027 2.4-5.080zM5.88 3.907l-1.88 1.88 3.693 3.693h-0.56c-4.013 0.427-7.133 3.827-7.133 7.947 0 4.413 3.587 8 8 8h15.64l2.667 2.667 1.88-1.88-22.307-22.307zM8 22.76c-2.947 0-5.333-2.387-5.333-5.333s2.387-5.333 5.333-5.333h2.307l10.667 10.667h-12.973z"></path>
+  </symbol>
+  <symbol id="iconCloudSync" viewBox="0 0 32 32">
+    <path d="M28 20.768c-0.032 0-0.048 0-0.080 0.016-0.4-2.704-2.704-4.784-5.52-4.784-2.24 0-4.16 1.328-5.056 3.232-2.528 0.128-4.544 2.208-4.544 4.768 0 2.656 2.144 4.8 4.8 4.8l10.4-0.032c2.208 0 4-1.792 4-4s-1.792-4-4-4zM28.016 25.6v0h-10.416c-0.88 0-1.6-0.72-1.6-1.6s0.72-1.6 1.6-1.6h2v-0.4c0-1.552 1.248-2.8 2.8-2.8s2.8 1.248 2.8 2.8v2c0 0 2.8 0 2.816 0 0.448 0 0.8 0.352 0.8 0.8-0.016 0.432-0.368 0.8-0.8 0.8zM9.6 3.616v3.344c-3.728 1.328-6.4 4.864-6.4 9.040 0 2.832 1.248 5.344 3.2 7.104v-3.904h3.2v9.6h-9.6v-3.2h4.368c-2.672-2.336-4.368-5.76-4.368-9.6 0-5.968 4.080-10.96 9.6-12.384zM25.6 6.4h-4.368c2.288 2.016 3.856 4.816 4.256 8h-3.232c-0.368-2.176-1.488-4.080-3.056-5.504v3.904h-3.2v-9.6h9.6v3.2z"></path>
+  </symbol>
+  <symbol id="iconCloudError" viewBox="0 0 32 32">
+    <path d="M14.866 19.922c0-0.619 0.502-1.12 1.12-1.12s1.12 0.502 1.12 1.12c0 0.619-0.502 1.12-1.12 1.12s-1.12-0.502-1.12-1.12z"></path>
+    <path d="M14.866 10.958h2.241v6.723h-2.241z"></path>
+    <path d="M16 8c3.48 0 6.52 2.48 7.2 5.907l0.4 2 2.027 0.147c2.080 0.147 3.707 1.88 3.707 3.947 0 2.2-1.8 4-4 4h-17.333c-2.947 0-5.333-2.387-5.333-5.333 0-2.733 2.040-5.013 4.747-5.293l1.427-0.147 0.667-1.267c1.254-2.44 3.747-3.96 6.493-3.96zM16 5.333c-3.853 0-7.213 2.187-8.88 5.387-4 0.427-7.12 3.827-7.12 7.947 0 4.413 3.587 8 8 8h17.333c3.68 0 6.667-2.987 6.667-6.667 0-3.52-2.733-6.373-6.187-6.613-0.92-4.6-4.96-8.053-9.813-8.053z"></path>
+  </symbol>
   <symbol id="iconWorkspace" viewBox="0 0 32 32">
     <path d="M27.429 0h-22.857c-0.632 0-1.143 0.511-1.143 1.143v29.714c0 0.632 0.511 1.143 1.143 1.143h22.857c0.632 0 1.143-0.511 1.143-1.143v-29.714c0-0.632-0.511-1.143-1.143-1.143zM6 2.571h20v7.429h-20v-7.429zM26 19.714h-20v-7.429h20v7.429zM26 29.429h-20v-7.429h20v7.429zM15.429 5.143h-6.571c-0.157 0-0.286 0.129-0.286 0.286v1.714c0 0.157 0.129 0.286 0.286 0.286h6.571c0.157 0 0.286-0.129 0.286-0.286v-1.714c0-0.157-0.129-0.286-0.286-0.286zM8.857 17.143h6.571c0.157 0 0.286-0.129 0.286-0.286v-1.714c0-0.157-0.129-0.286-0.286-0.286h-6.571c-0.157 0-0.286 0.129-0.286 0.286v1.714c0 0.157 0.129 0.286 0.286 0.286zM20.571 25.857c0 0.789 0.64 1.429 1.429 1.429s1.429-0.64 1.429-1.429v0c0-0.789-0.64-1.429-1.429-1.429s-1.429 0.64-1.429 1.429v0z"></path>
   </symbol>
@@ -338,7 +349,7 @@ document.body.insertAdjacentHTML('afterBegin', `<svg style="position: absolute;
     <path d="M28.236 8.021l-7.686-7.686c-0.214-0.214-0.504-0.336-0.807-0.336h-15.171c-0.632 0-1.143 0.511-1.143 1.143v29.714c0 0.632 0.511 1.143 1.143 1.143h22.857c0.632 0 1.143-0.511 1.143-1.143v-22.025c0-0.304-0.121-0.596-0.336-0.811zM25.936 9.357h-6.721v-6.721l6.721 6.721zM26 29.429h-20v-26.857h10.786v7.714c0 0.828 0.672 1.5 1.5 1.5v0h7.714v17.643z"></path>
   </symbol>
   <symbol id="iconCloud" viewBox="0 0 32 32">
-    <path d="M26.693 12.668c-1.636-4.314-5.804-7.382-10.686-7.382s-9.050 3.064-10.686 7.379c-3.061 0.804-5.321 3.589-5.321 6.907 0 3.946 3.196 7.143 7.139 7.143h17.721c3.943 0 7.139-3.196 7.139-7.143 0-3.311-2.254-6.096-5.307-6.904zM27.989 22.704c-0.796 0.801-1.899 1.296-3.117 1.296-0.004 0-0.008 0-0.012-0h-17.721c-1.182 0-2.293-0.461-3.129-1.296-0.801-0.798-1.296-1.901-1.296-3.12 0-0.004 0-0.008 0-0.012v0.001c0-1 0.325-1.939 0.936-2.725 0.59-0.746 1.399-1.296 2.329-1.553l0.032-0.007 1.354-0.354 0.496-1.307c0.307-0.814 0.736-1.575 1.275-2.264 0.537-0.685 1.154-1.273 1.844-1.764l0.027-0.018c1.468-1.032 3.196-1.579 5-1.579s3.532 0.546 5 1.579c0.711 0.5 1.339 1.1 1.871 1.782 0.539 0.689 0.968 1.454 1.275 2.264l0.493 1.304 1.35 0.357c1.939 0.518 3.289 2.279 3.289 4.286 0 1.182-0.461 2.296-1.296 3.132z"></path>
+    <path d="M16 8c3.493 0 6.507 2.48 7.187 5.907l0.4 2 2.040 0.147c2.080 0.133 3.707 1.88 3.707 3.947 0 2.2-1.8 4-4 4h-17.333c-2.947 0-5.333-2.387-5.333-5.333 0-2.733 2.040-5.013 4.747-5.293l1.427-0.147 0.667-1.267c1.267-2.44 3.747-3.96 6.493-3.96zM16 5.333c-3.853 0-7.2 2.187-8.867 5.387-4.013 0.427-7.133 3.827-7.133 7.947 0 4.413 3.587 8 8 8h17.333c3.68 0 6.667-2.987 6.667-6.667 0-3.52-2.733-6.373-6.2-6.613-0.907-4.6-4.947-8.053-9.8-8.053z"></path>
   </symbol>
   <symbol id="iconRight" viewBox="0 0 32 32">
     <path d="M25.528 14.936l-19.030-14.864c-0.057-0.045-0.129-0.072-0.208-0.072-0.186 0-0.336 0.151-0.336 0.336 0 0.001 0 0.001 0 0.002v-0 3.263c0 0.207 0.097 0.405 0.258 0.532l15.197 11.867-15.197 11.867c-0.165 0.127-0.258 0.325-0.258 0.532v3.263c0 0.283 0.325 0.439 0.545 0.266l19.030-14.864c0.317-0.249 0.519-0.633 0.519-1.064s-0.202-0.815-0.516-1.062l-0.003-0.002z"></path>

app/appearance/icons/ant/icon.json

@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.11.0"
+  "version": "1.12.0"
 }

app/appearance/icons/index.html

@@ -34,6 +34,24 @@
         </svg>
         iconWorkspace
     </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconCloudOff"></use>
+        </svg>
+        iconCloudOff
+    </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconCloudSync"></use>
+        </svg>
+        iconCloudSync
+    </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconCloudError"></use>
+        </svg>
+        iconCloudError
+    </div>
     <div>
         <svg>
             <use xlink:href="#iconLiandi"></use>
@@ -971,6 +989,6 @@
         iconSub
     </div>
 </div>
-<script src="material/icon.js"></script>
+<script src="ant/icon.js"></script>
 </body>
 </html>

app/appearance/icons/material/icon.js

@@ -1,5 +1,16 @@
 document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconCloudOff" viewBox="0 0 32 32">
+    <path d="M32 18.76c0-3.52-2.733-6.373-6.2-6.613-0.907-4.6-4.947-8.053-9.8-8.053-1.773 0-3.427 0.48-4.867 1.293l1.987 1.987c0.893-0.387 1.853-0.613 2.88-0.613 4.053 0 7.333 3.28 7.333 7.333v0.667h2c2.213 0 4 1.787 4 4 0 1.32-0.64 2.467-1.613 3.2l1.88 1.88c1.453-1.227 2.4-3.027 2.4-5.080zM5.88 3.907l-1.88 1.88 3.693 3.693h-0.56c-4.013 0.427-7.133 3.827-7.133 7.947 0 4.413 3.587 8 8 8h15.64l2.667 2.667 1.88-1.88-22.307-22.307zM8 22.76c-2.947 0-5.333-2.387-5.333-5.333s2.387-5.333 5.333-5.333h2.307l10.667 10.667h-12.973z"></path>
+  </symbol>
+  <symbol id="iconCloudSync" viewBox="0 0 32 32">
+    <path d="M28 20.768c-0.032 0-0.048 0-0.080 0.016-0.4-2.704-2.704-4.784-5.52-4.784-2.24 0-4.16 1.328-5.056 3.232-2.528 0.128-4.544 2.208-4.544 4.768 0 2.656 2.144 4.8 4.8 4.8l10.4-0.032c2.208 0 4-1.792 4-4s-1.792-4-4-4zM28.016 25.6v0h-10.416c-0.88 0-1.6-0.72-1.6-1.6s0.72-1.6 1.6-1.6h2v-0.4c0-1.552 1.248-2.8 2.8-2.8s2.8 1.248 2.8 2.8v2c0 0 2.8 0 2.816 0 0.448 0 0.8 0.352 0.8 0.8-0.016 0.432-0.368 0.8-0.8 0.8zM9.6 3.616v3.344c-3.728 1.328-6.4 4.864-6.4 9.040 0 2.832 1.248 5.344 3.2 7.104v-3.904h3.2v9.6h-9.6v-3.2h4.368c-2.672-2.336-4.368-5.76-4.368-9.6 0-5.968 4.080-10.96 9.6-12.384zM25.6 6.4h-4.368c2.288 2.016 3.856 4.816 4.256 8h-3.232c-0.368-2.176-1.488-4.080-3.056-5.504v3.904h-3.2v-9.6h9.6v3.2z"></path>
+  </symbol>
+  <symbol id="iconCloudError" viewBox="0 0 32 32">
+    <path d="M14.866 19.922c0-0.619 0.502-1.12 1.12-1.12s1.12 0.502 1.12 1.12c0 0.619-0.502 1.12-1.12 1.12s-1.12-0.502-1.12-1.12z"></path>
+    <path d="M14.866 10.958h2.241v6.723h-2.241z"></path>
+    <path d="M16 8c3.48 0 6.52 2.48 7.2 5.907l0.4 2 2.027 0.147c2.080 0.147 3.707 1.88 3.707 3.947 0 2.2-1.8 4-4 4h-17.333c-2.947 0-5.333-2.387-5.333-5.333 0-2.733 2.040-5.013 4.747-5.293l1.427-0.147 0.667-1.267c1.254-2.44 3.747-3.96 6.493-3.96zM16 5.333c-3.853 0-7.213 2.187-8.88 5.387-4 0.427-7.12 3.827-7.12 7.947 0 4.413 3.587 8 8 8h17.333c3.68 0 6.667-2.987 6.667-6.667 0-3.52-2.733-6.373-6.187-6.613-0.92-4.6-4.96-8.053-9.813-8.053z"></path>
+  </symbol>
   <symbol id="iconWorkspace" viewBox="0 0 32 32">
     <path d="M6.733 20.633c1.699 0 3.089 1.39 3.089 3.089s-1.39 3.089-3.089 3.089-3.089-1.39-3.089-3.089 1.39-3.089 3.089-3.089zM6.733 17.544c-3.398 0-6.178 2.78-6.178 6.178s2.78 6.178 6.178 6.178 6.178-2.78 6.178-6.178-2.78-6.178-6.178-6.178zM16 5.189c1.699 0 3.089 1.39 3.089 3.089s-1.39 3.089-3.089 3.089-3.089-1.39-3.089-3.089 1.39-3.089 3.089-3.089zM16 2.1c-3.398 0-6.178 2.78-6.178 6.178s2.78 6.178 6.178 6.178 6.178-2.78 6.178-6.178-2.78-6.178-6.178-6.178zM25.267 20.633c1.699 0 3.089 1.39 3.089 3.089s-1.39 3.089-3.089 3.089-3.089-1.39-3.089-3.089 1.39-3.089 3.089-3.089zM25.267 17.544c-3.398 0-6.178 2.78-6.178 6.178s2.78 6.178 6.178 6.178 6.178-2.78 6.178-6.178-2.78-6.178-6.178-6.178z"></path>
   </symbol>

app/appearance/icons/material/icon.json

@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.11.0"
+  "version": "1.12.0"
 }

app/src/dialog/processSystem.ts

@@ -311,3 +311,19 @@ export const downloadProgress = (data: { id: string, percent: number }) => {
         }
     }
 };
+
+export const processSync = (data: IWebSocketData) => {
+    const iconElement = document.querySelector("#barSync")
+    const useElement = iconElement.querySelector("use")
+    if (data.code === 0) {  // syncing
+        iconElement.classList.add("toolbar__item--active");
+        useElement.setAttribute("xlink:href", "#iconCloudSync")
+    } else if (data.code === 2) {    // error
+        iconElement.classList.add("toolbar__item--active");
+        useElement.setAttribute("xlink:href", "#iconCloudError")
+    } else if (data.code === 1) {   // success
+        iconElement.classList.remove("toolbar__item--active");
+        useElement.setAttribute("xlink:href", "#iconCloud")
+    }
+    iconElement.setAttribute("aria-label", data.msg);
+}

app/src/index.ts

@@ -12,7 +12,7 @@ import {addBaseURL, setNoteBook} from "./util/pathName";
 import {openFileById} from "./editor/util";
 import {
     bootSync,
-    downloadProgress,
+    downloadProgress, processSync,
     progressLoading,
     progressStatus,
     setTitle,
@@ -44,10 +44,10 @@ class App {
                 msgCallback: (data) => {
                     if (data) {
                         switch (data.cmd) {
-                            case"progress":
+                            case "progress":
                                 progressLoading(data);
                                 break;
-                            case"setLocalStorageVal":
+                            case "setLocalStorageVal":
                                 window.siyuan.storage[data.data.key] = data.data.val;
                                 break;
                             case "rename":
@@ -89,22 +89,17 @@ class App {
                                     }
                                 });
                                 break;
-                            case"statusbar":
+                            case "statusbar":
                                 progressStatus(data);
                                 break;
-                            case"downloadProgress":
+                            case "downloadProgress":
                                 downloadProgress(data.data);
                                 break;
-                            case"txerr":
+                            case "txerr":
                                 transactionError(data);
                                 break;
-                            case"syncing":
+                            case "syncing":
-                                if (data.code === 0) {
+                                processSync(data)
-                                    document.querySelector("#barSync").classList.add("toolbar__item--active");
-                                } else {
-                                    document.querySelector("#barSync").classList.remove("toolbar__item--active");
-                                }
-                                document.querySelector("#barSync").setAttribute("aria-label", data.msg);
                                 break;
                             case "refreshtheme":
                                 if (!window.siyuan.config.appearance.customCSS && data.data.theme.indexOf("custom.css") > -1) {

app/src/util/onGetConfig.ts

@@ -187,7 +187,7 @@ const initBar = () => {
     <svg class="toolbar__svg"><use xlink:href="#iconDown"></use></svg>
 </div>
 <div id="barSync" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.config.sync.stat || (window.siyuan.languages.syncNow + " " + updateHotkeyTip(window.siyuan.config.keymap.general.syncNow.custom))}">
-    <svg><use xlink:href="#iconCloud"></use></svg>
+    <svg><use xlink:href="#iconCloud${window.siyuan.config.sync.enabled ? "" : "Off"}"></use></svg>
 </div>
 <button id="barBack" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
     <svg><use xlink:href="#iconBack"></use></svg>