Improve auto update

Add titles to status bar buttons
Bump version to 1.0.7

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()
 }

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', () => {

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)",

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>

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>

src/components/StatusBar.vue

@@ -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>

src/components/UpdateStatusItem.vue

@@ -5,6 +5,7 @@
                 updateAvailable: false,
                 updateDownloaded: false,
                 downloading: false,
+                checkingForUpdate: false,
                 updateProgress: {
                     percent: 0.0,
                     transferred: 0.0,
@@ -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")
@@ -43,9 +46,13 @@
                 }
             })
             
-            setInterval(() => {
+            // check for update now
-                this.checkForUpdateIntervalId = window.heynote.autoUpdate.checkForUpdates()
+            this.checkForUpdate()
-            }, 1000 * 3600 * 24)
+
+            // check for updates every 8 hours
+            this.checkForUpdateIntervalId = setInterval(() => {
+                this.checkForUpdate()
+            }, 1000 * 3600 * 8)
         },
 
         beforeUnmount() {
@@ -55,45 +62,78 @@
         },
 
         computed: {
-            updateAvailableTitle() {
+            statusText() {
-                return "Update to version " + this.version + " (current version: " + this.currentVersion + ")"
+                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() {
+            statusTitle() {
-                return "Click to restart and update Heynote "
+                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() {
+            className() {
-                return this.updateProgress.percent.toFixed(0)
+                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() {
+            onClick() {
-                window.heynote.autoUpdate.startDownload()
+                if (this.downloading || this.checkingForUpdate) {
-                this.downloading = true
+                    return
+                } else if (this.updateDownloaded) {
+                    window.heynote.autoUpdate.installAndRestart()
+                } else if (this.updateAvailable) {
+                    this.downloading = true
+                    window.heynote.autoUpdate.startDownload()
+                } else {
+                    this.checkForUpdate()
+                }
             },
 
-            installAndRestart() {
+            checkForUpdate() {
-                window.heynote.autoUpdate.installAndRestart()
+                this.checkingForUpdate = true
-            },
+                window.heynote.autoUpdate.checkForUpdates()
+            }
         },
         
     }
 </script>
 
 <template>
-    <div v-if="downloading" class="status-block clickable update-status-block">
+    <div :class="className" @click="onClick" :title="statusTitle">
-        <span class="icon-update"></span>
+        <span :class="iconClassName"></span>
-        Downloading update… {{ updateProgressPercent }}%
+        {{  statusText }}
-    </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>
 </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
+            top: 4px
-            width: 16px
+            width: 14px
-            height: 22px
+            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>