sync status widget WIP

Author: zadam

package-lock.json

@@ -49,19 +49,19 @@
     "image-type": "4.1.0",
     "ini": "2.0.0",
     "is-animated": "^2.0.1",
-    "is-svg": "4.2.2",
+    "is-svg": "4.3.1",
     "jimp": "0.16.1",
     "jsdom": "16.5.1",
     "mime-types": "2.1.29",
     "multer": "1.4.2",
     "node-abi": "2.21.0",
-    "open": "8.0.2",
+    "open": "8.0.3",
     "portscanner": "2.2.0",
     "rand-token": "1.0.1",
     "request": "^2.88.2",
     "rimraf": "3.0.2",
     "sanitize-filename": "1.6.3",
-    "sanitize-html": "2.3.2",
+    "sanitize-html": "2.3.3",
     "sax": "1.2.4",
     "semver": "7.3.4",
     "serve-favicon": "2.5.0",
@@ -83,11 +83,11 @@
     "electron-packager": "15.2.0",
     "electron-rebuild": "2.3.5",
     "esm": "3.2.25",
-    "jasmine": "3.6.4",
+    "jasmine": "3.7.0",
     "jsdoc": "3.6.6",
     "lorem-ipsum": "2.0.3",
     "rcedit": "3.0.0",
-    "webpack": "5.25.0",
+    "webpack": "5.27.0",
     "webpack-cli": "4.5.0"
   },
   "optionalDependencies": {

package.json

@@ -33,6 +33,7 @@ import ImagePropertiesWidget from "../widgets/type_property_widgets/image_proper
 import NotePropertiesWidget from "../widgets/type_property_widgets/note_properties.js";
 import NoteIconWidget from "../widgets/note_icon.js";
 import SearchResultWidget from "../widgets/search_result.js";
+import SyncStatusWidget from "../widgets/sync_status.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -141,6 +142,7 @@ export default class DesktopMainWindowLayout {
             .child(new FlexContainer('row').overflowing()
                 .css('height', '36px')
                 .child(new GlobalMenuWidget())
+                .child(new SyncStatusWidget())
                 .child(new TabRowWidget())
                 .child(new TitleBarButtonsWidget()))
             .child(new StandardTopWidget()

src/public/app/layouts/desktop_main_window_layout.js

@@ -63,7 +63,7 @@ const TPL = `
         <span class="caret"></span>
     </button>
     <div class="dropdown-menu dropdown-menu-right">
-        <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button">Re-render note</a>
+        <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
         <div class="dropdown-item protect-button">
             Protect the note
         

src/public/app/widgets/note_actions.js

@@ -0,0 +1,58 @@
+import BasicWidget from "./basic_widget.js";
+import utils from "../services/utils.js";
+import syncService from "../services/sync.js";
+
+const TPL = `
+<div class="sync-status-wrapper">
+    <style>
+    .sync-status-wrapper {
+        height: 35px;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--main-border-color);
+    }
+    
+    .sync-status {
+        height: 34px;
+        box-sizing: border-box;
+    }
+    
+    .sync-status button {
+        margin-right: 5px;
+        margin-left: 5px;
+        height: 34px;
+        border: none;
+        font-size: 180%;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    
+    .sync-status button span {
+        position: relative;
+        top: -5px;
+    }
+    
+    .sync-status button:hover {
+        background-color: var(--hover-item-background-color);
+    }
+    
+    .sync-status .dropdown-menu {
+        width: 20em;
+    }
+    </style>
+
+    <div class="sync-status">
+        <button type="button" class="btn btn-sm" title="Sync status">
+            <span class="bx bx-badge-check"></span>
+<!--            <span class="bx bx-cloud-upload"></span>-->
+<!--            <span class="bx bx-sync bx-spin bx-flip-horizontal"></span>-->
+        </button>
+    </div>
+</div>
+`;
+
+export default class SyncStatusWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+    }
+}