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

src/public/app/dialogs/options/appearance.js

@@ -1,6 +1,7 @@
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
 import appContext from "../../services/app_context.js";
+import convertUtils from "../../services/convert_utils.js";
 
 const FONT_FAMILIES = [
     { value: "theme", label: "Theme defined" },
@@ -28,6 +29,12 @@ const FONT_FAMILIES = [
 ];
 
 const TPL = `
+<style>
+    .disabled-form-label {
+        opacity: 0.5;
+    }
+</style>
+
 <p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
 
 <form>

src/public/app/layouts/desktop_layout.js

@@ -45,6 +45,7 @@ import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
 import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js";
 import MermaidWidget from "../widgets/mermaid.js";
 import BookmarkButtons from "../widgets/bookmark_buttons.js";
+import UpdateAvailableWidget from "../widgets/buttons/update_available.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {

src/public/app/services/convert_utils.js

@@ -0,0 +1,7 @@
+function parseBoolean(value) {
+    return value.toLowerCase() === "true";
+}
+
+export default {
+    parseBoolean
+}

src/public/app/widgets/buttons/global_menu.js

@@ -1,5 +1,7 @@
 import BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
+import UpdateAvailableWidget from "./update_available.js";
+const axios = require("axios");
 
 const TPL = `
 <div class="dropdown global-menu dropright">
@@ -19,16 +21,30 @@ const TPL = `
         background-position: 50% 45%;
         width: 100%;
         height: 100%;
+        
+        position: relative;
     }
     
     .global-menu-button:hover {
         background-image: url("images/icon-color.png");
     }
+    
+    .global-menu-button-update-available {
+        position: absolute;
+        right: -30px;
+        bottom: -30px;
+        width: 100%;
+        height: 100%;
+            
+        pointer-events: none;
+    }
     </style>
 
     <button type="button" data-toggle="dropdown" data-placement="right"
             aria-haspopup="true" aria-expanded="false" 
-            class="icon-action global-menu-button" title="Menu"></button>
+            class="icon-action global-menu-button" title="Menu">
+        <div class="global-menu-button-update-available"></div>
+    </button>
 
     <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item options-button" data-trigger-command="showOptions">
@@ -89,6 +105,11 @@ const TPL = `
             About Trilium Notes
         </a>
 
+        <a class="dropdown-item show-about-dialog-button">
+            <span class="bx bx-sync"></span>
+            Update to newest version
+        </a>
+
         <a class="dropdown-item logout-button" data-trigger-command="logout">
             <span class="bx bx-log-out"></span>
             Logout
@@ -96,8 +117,23 @@ const TPL = `
     </div>
 </div>
 `;
+const RELEASES_API_URL = "https://api.github.com/repos/zadam/trilium/releases/latest";
+const CURRENT_VERSION = process.env.npm_package_version;
 
 export default class GlobalMenuWidget extends BasicWidget {
+    static getVersionChange(oldVersion, newVersion) {
+        const [oldMajor, oldMinor, oldPatch] = oldVersion.split(".").map(Number);
+        const [newMajor, newMinor, newPatch] = newVersion.split(".").map(Number);
+
+        if (newMajor !== oldMajor) {
+            return "major";
+        } else if (newMinor !== oldMinor) {
+            return "minor";
+        } else if (newPatch !== oldPatch) {
+            return "patch";
+        }
+    }
+
     doRender() {
         this.$widget = $(TPL);
 
@@ -114,7 +150,32 @@ export default class GlobalMenuWidget extends BasicWidget {
         this.$widget.find(".open-dev-tools-button").toggle(isElectron);
         this.$widget.find(".switch-to-mobile-version-button").toggle(!isElectron);
 
+
         this.$widget.on('click', '.dropdown-item',
             () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
+
+        this.loadUpdateAvailable();
+    }
+
+    async loadUpdateAvailable() {
+        const newVersion = await this.fetchNewVersion();
+
+        if (!newVersion) {
+            return;
+        }
+
+        const versionChange = "major";
+
+        this.$widget.find(".global-menu-button-update-available").append(
+            new UpdateAvailableWidget()
+                .withVersionChange(versionChange)
+                .render()
+        )
+    }
+
+    async fetchNewVersion() {
+        const {data} = await axios.get(RELEASES_API_URL);
+
+        return data.tag_name.substring(1);
     }
 }

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;
+    }
+}

src/services/options_init.js

@@ -90,7 +90,7 @@ const defaultOptions = [
     { name: 'dailyBackupEnabled', value: 'true', isSynced: false },
     { name: 'weeklyBackupEnabled', value: 'true', isSynced: false },
     { name: 'monthlyBackupEnabled', value: 'true', isSynced: false },
-    { name: 'maxContentWidth', value: '1200', isSynced: false },
+    { name: 'maxContentWidth', value: '1200', isSynced: false }
 ];
 
 function initStartupOptions() {