Add update available box (#2329)

* current stand * added update available button * improved update available icon * improved update available box * adding server side version * added backend * fixed text * added option handling * added field disabling * removed options * fixed terminology * removed unnecessary imports
2025-11-05 04:45:47 +01:00 · 2021-11-14 12:42:50 +00:00
parent fcc0a80f4e
commit 364ac331da
6 changed files with 148 additions and 2 deletions
--- a/src/public/app/widgets/buttons/update_available.js
+++ b/src/public/app/widgets/buttons/update_available.js
@@ -0,0 +1,70 @@
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+    <span class="bx bx-sync global-menu-button-update-available-button" title="Update available"></span>
+    <style>
+        .global-menu-button-update-available-button {
+            width: 21px !important;
+            height: 21px !important;
+            padding: 0 !important;
+            
+            border-radius: 8px;
+            transform: scale(0.9);
+            border: none;
+            opacity: 0.8;
+            
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .global-menu-button-wrapper:hover .global-menu-button-update-available-button {
+            opacity: 1;
+        }
+    </style>
+`
+const VERSION_CHANGE_COLOR_MAP = {
+    patch: "#666666",
+    minor: "#5bc625",
+    major: "#ec2f2f"
+}
+const VERSION_CHANGE_BACKGROUND_COLOR_MAP = Object.fromEntries(
+    Object.entries(
+        VERSION_CHANGE_COLOR_MAP).map(([key, value]) => [
+            key,
+            `${value}40`
+        ]
+    )
+)
+
+export default class UpdateAvailableWidget extends BasicWidget {
+    versionChange = undefined
+
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.setButton();
+    }
+
+    setButton() {
+        switch (this.versionChange) {
+            case "major":
+            case "minor":
+            case "patch":
+                this.$widget.show();
+                this.$widget.css({
+                    color: VERSION_CHANGE_COLOR_MAP[this.versionChange],
+                    backgroundColor: VERSION_CHANGE_BACKGROUND_COLOR_MAP[this.versionChange]
+                });
+                break;
+            default:
+                this.$widget.hide();
+        }
+    }
+
+    withVersionChange(versionChange) {
+        this.versionChange = versionChange;
+
+        return this;
+    }
+}