Improve auto update

Add titles to status bar buttons Bump version to 1.0.7
2024-11-21 15:33:14 +01:00 · 2023-03-07 01:45:23 +01:00 · 2023-03-07 01:45:23 +01:00 · 93bf1e9036
commit 93bf1e9036
parent 1df255032c
7 changed files with 106 additions and 44 deletions
--- a/electron/main/auto-update.ts
+++ b/electron/main/auto-update.ts
@ -65,11 +65,12 @@ ipcMain.handle(UPDATE_INSTALL_AND_RESTART, () => {

 ipcMain.handle(UPDATE_CHECK_FOR_UPDATES, () => {
    autoUpdater.checkForUpdates()
+    // for development, the autoUpdater will not work, so we need to trigger the event manually
+    if (process.env.NODE_ENV === "development") {
+        window?.webContents.send(UPDATE_NOT_AVAILABLE_EVENT)
+    }
 })

-export function checkForUpdates(win) {
+export function initializeAutoUpdate(win) {
    window = win
-    
-    // check for updates
-    autoUpdater.checkForUpdates()
 }
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@ -9,7 +9,7 @@ import { WINDOW_CLOSE_EVENT, SETTINGS_CHANGE_EVENT } from '../constants';
 import CONFIG from "../config"
 import { onBeforeInputEvent } from "../keymap"
 import { isMac } from '../detect-platform';
-import { checkForUpdates } from './auto-update';
+import { initializeAutoUpdate } from './auto-update';


 // The built directory structure
@ -138,7 +138,7 @@ async function createWindow() {
 }

 app.whenReady().then(createWindow).then(async () => {
-    checkForUpdates(win)
+    initializeAutoUpdate(win)
 })

 app.on('window-all-closed', () => {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "Heynote",
-  "version": "1.0.6",
+  "version": "1.0.7",
  "main": "dist-electron/main/index.js",
  "description": "A dedicated scratch pad",
  "author": "Jonatan Heyman (https://heyman.info)",
--- a/public/icons/download.svg
+++ b/public/icons/download.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M23.995 13.089c.001-.03.005-.059.005-.089a8 8 0 0 0-8-8c-3.814 0-6.998 2.671-7.8 6.242C5.208 12.038 3 14.757 3 18a7 7 0 0 0 7 7h13a5.997 5.997 0 0 0 .995-11.911zM16 21V11" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" class="stroke-000000"></path><path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m12 17 4 4 4-4" class="stroke-000000"></path></svg>
--- a/public/icons/update.svg
+++ b/public/icons/update.svg
@ -1 +1 @@
-<svg viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M23.995 13.089c.001-.03.005-.059.005-.089a8 8 0 0 0-8-8c-3.814 0-6.998 2.671-7.8 6.242C5.208 12.038 3 14.757 3 18a7 7 0 0 0 7 7h13a5.997 5.997 0 0 0 .995-11.911zM16 21V11" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" class="stroke-000000"></path><path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m12 17 4 4 4-4" class="stroke-000000"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 3v2a5 5 0 0 0-3.54 8.54l-1.41 1.41A7 7 0 0 1 10 3zm4.95 2.05A7 7 0 0 1 10 17v-2a5 5 0 0 0 3.54-8.54l1.41-1.41zM10 20l-4-4 4-4v8zm0-12V0l4 4-4 4z" fill="#ffffff" class="fill-000000"></path></svg>
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@ -20,7 +20,7 @@
        },

        mounted() {
-            
+
        },

        computed: {
@ -46,11 +46,11 @@
            Ln <span class="num">{{ line }}</span>
            Col <span class="num">{{ column }}</span>
        </div>
-        <UpdateStatusItem />
        <div class="spacer"></div>
        <div 
            @click="$emit('openLanguageSelector')"
            class="status-block lang clickable"
+            title="Change language for current block"
        >
            {{ languageName }} 
            <span v-if="languageAuto" class="auto">(auto)</span>
@ -63,7 +63,8 @@
        >
            <span class="icon icon-format"></span>
        </div>
-        <div class="status-block theme clickable" @click="$emit('toggleTheme')">
+        <UpdateStatusItem />
+        <div class="status-block theme clickable" @click="$emit('toggleTheme')" title="Toggle dark/light mode">
            <span :class="'icon ' + systemTheme"></span>
        </div>
    </div>
--- a/src/components/UpdateStatusItem.vue
+++ b/src/components/UpdateStatusItem.vue
@ -5,13 +5,14 @@
                updateAvailable: false,
                updateDownloaded: false,
                downloading: false,
+                checkingForUpdate: false,
                updateProgress: {
                    percent: 0.0,
                    transferred: 0.0,
                    total: 0.0,
                    bytesPerSecond: 0.0,
                },
-
+                
                checkForUpdateIntervalId: null,
            }
        },
@ -20,12 +21,14 @@
            window.heynote.autoUpdate.callbacks({
                updateAvailable: (info) => {
                    //console.log("updateAvailable", info)
+                    this.checkingForUpdate = false
                    this.updateAvailable = true
                    this.currentVersion = info.currentVersion
                    this.version = info.version
                },
                updateNotAvailable: () => {
                    //console.log("updateNotAvailable")
+                    this.checkingForUpdate = false
                },
                updateDownloaded: () => {
                    //console.log("updateDownloaded")
@ -42,10 +45,14 @@
                    this.updateProgress = progress
                }
            })
+            
+            // check for update now
+            this.checkForUpdate()

-            setInterval(() => {
-                this.checkForUpdateIntervalId = window.heynote.autoUpdate.checkForUpdates()
-            }, 1000 * 3600 * 24)
+            // check for updates every 8 hours
+            this.checkForUpdateIntervalId = setInterval(() => {
+                this.checkForUpdate()
+            }, 1000 * 3600 * 8)
        },

        beforeUnmount() {
@ -55,45 +62,78 @@
        },

        computed: {
-            updateAvailableTitle() {
-                return "Update to version " + this.version + " (current version: " + this.currentVersion + ")"
+            statusText() {
+                if (this.downloading) {
+                    return "Downloading update… " + this.updateProgress.percent.toFixed(0) + "%"
+                } else if (this.updateDownloaded) {
+                    return "Update & Restart"
+                } else if (this.updateAvailable) {
+                    return "New version available!"
+                } else {
+                    return ""
+                }
            },

-            restartTitle() {
-                return "Click to restart and update Heynote "
+            statusTitle() {
+                if (this.downloading) {
+                    return ""
+                } else if (this.updateDownloaded) {
+                    return "Click to restart and update Heynote"
+                } else if (this.updateAvailable) {
+                    return "Update to version " + this.version + " (current version: " + this.currentVersion + ")"
+                } else {
+                    return "Check for updates"
+                }
            },

-            updateProgressPercent() {
-                return this.updateProgress.percent.toFixed(0)
-            }
+            className() {
+                return "status-block update-status-block" + 
+                    (!this.downloading ? " clickable" : "") +
+                    (this.statusText === "" ? " empty" : "")
+            },
+
+            iconClassName() {
+                if (this.checkingForUpdate) {
+                    return "icon-update spinning"
+                } else if (this.downloading) {
+                    return "icon-update spinning"
+                } else if (this.updateDownloaded) {
+                    return "icon-update icon-download "
+                } else if (this.updateAvailable) {
+                    return "icon-update icon-download"
+                } else {
+                    return "icon-update"
+                }
+            },
        },

        methods: {
-            startDownload() {
-                window.heynote.autoUpdate.startDownload()
-                this.downloading = true
+            onClick() {
+                if (this.downloading || this.checkingForUpdate) {
+                    return
+                } else if (this.updateDownloaded) {
+                    window.heynote.autoUpdate.installAndRestart()
+                } else if (this.updateAvailable) {
+                    this.downloading = true
+                    window.heynote.autoUpdate.startDownload()
+                } else {
+                    this.checkForUpdate()
+                }
            },

-            installAndRestart() {
-                window.heynote.autoUpdate.installAndRestart()
-            },
+            checkForUpdate() {
+                this.checkingForUpdate = true
+                window.heynote.autoUpdate.checkForUpdates()
+            }
        },
        
    }
 </script>

 <template>
-    <div v-if="downloading" class="status-block clickable update-status-block">
-        <span class="icon-update"></span>
-        Downloading update… {{ updateProgressPercent }}%
-    </div>
-    <div v-else-if="updateDownloaded" class="status-block clickable update-status-block" @click="installAndRestart" :title="restartTitle">
-        <span class="icon-update"></span>
-        Update &amp; Restart
-    </div>
-    <div v-else-if="updateAvailable" class="status-block clickable update-status-block" :title="updateAvailableTitle" @click="startDownload">
-        <span class="icon-update"></span>
-        New version available!
+    <div :class="className" @click="onClick" :title="statusTitle">
+        <span :class="iconClassName"></span>
+        {{  statusText }}
    </div>
 </template>

@ -102,21 +142,40 @@
        @media (prefers-color-scheme: dark)
            @content
    
+    @keyframes spin
+        from
+            transform: rotate(0deg)
+        to
+            transform: rotate(360deg)
+    
    .status .status-block.update-status-block
        position: relative
-        padding-left: 30px
+        padding-left: 28px
+        &.empty
+            padding-left: 24px

        .icon-update
            display: block
            position: absolute
            left: 10px
-            top: 0
-            width: 16px
-            height: 22px
+            top: 4px
+            width: 14px
+            height: 14px
            +dark-mode
                opacity: 0.9
-            background-size: 16px
+            background-size: 14px
            background-repeat: no-repeat
            background-position: center center
            background-image: url("icons/update.svg")
+            &.icon-download
+                background-image: url("icons/download.svg")
+                width: 16px
+                height: 16px
+                background-size: 16px
+                top: 3px
+            &.spinning
+                animation-name: spin
+                animation-duration: 2000ms
+                animation-iteration-count: infinite
+                animation-timing-function: linear
 </style>
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M23.995 13.089c.001-.03.005-.059.005-.089a8 8 0 0 0-8-8c-3.814 0-6.998 2.671-7.8 6.242C5.208 12.038 3 14.757 3 18a7 7 0 0 0 7 7h13a5.997 5.997 0 0 0 .995-11.911zM16 21V11" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" class="stroke-000000"></path><path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m12 17 4 4 4-4" class="stroke-000000"></path></svg>