Settings improvements (#88)

* Organize Settings in different tabs * Add setting for turning off/on auto updates. * Remove debug log * Use a better variable name (systemTheme -> themeSetting) * Store theme setting for Heynote webapp in local storage
heyman · Dec 28, 2023 · 6022356 · 6022356
1 parent 77ed45c
commit 6022356
Show file tree

Hide file tree

Showing 9 changed files with 277 additions and 136 deletions.
diff --git a/electron/config.js b/electron/config.js
@@ -25,6 +25,7 @@ const schema = {
             "emacsMetaKey": { "enum": [null, "alt", "meta"], default: null },
             "showLineNumberGutter": {type: "boolean", default:true},
             "showFoldGutter": {type: "boolean", default:true},
+            "autoUpdate": {type: "boolean", default: true},
             "allowBetaVersions": {type: "boolean", default: false},
             "enableGlobalHotkey": {type: "boolean", default: false},
             "globalHotkey": {type: "string", default: "CmdOrCtrl+Shift+H"},
@@ -49,6 +50,7 @@ const defaults = {
         emacsMetaKey: "meta",
         showLineNumberGutter: true,
         showFoldGutter: true,
+        autoUpdate: true,
         allowBetaVersions: false,
         enableGlobalHotkey: false,
         globalHotkey: "CmdOrCtrl+Shift+H",

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -21,7 +21,7 @@
                 languageAuto: true,
                 theme: window.heynote.themeMode.initial,
                 initialTheme: window.heynote.themeMode.initial,
-                systemTheme: 'system',
+                themeSetting: 'system',
                 development: window.location.href.indexOf("dev=1") !== -1,
                 showLanguageSelector: false,
                 showSettings: false,
@@ -32,7 +32,7 @@
         mounted() {
             window.heynote.themeMode.get().then((mode) => {
                 this.theme = mode.computed
-                this.systemTheme = mode.theme
+                this.themeSetting = mode.theme
             })
             const onThemeChange = (theme) => {
                 this.theme = theme
@@ -69,12 +69,12 @@
                 let newTheme
                 // when the "system" theme is used, make sure that the first click always results in amn actual theme change
                 if (this.initialTheme === "light") {
-                    newTheme = this.systemTheme === "system" ? "dark" : (this.systemTheme === "dark" ? "light" : "system")
+                    newTheme = this.themeSetting === "system" ? "dark" : (this.themeSetting === "dark" ? "light" : "system")
                 } else {
-                    newTheme = this.systemTheme === "system" ? "light" : (this.systemTheme === "light" ? "dark" : "system")
+                    newTheme = this.themeSetting === "system" ? "light" : (this.themeSetting === "light" ? "dark" : "system")
                 }
                 window.heynote.themeMode.set(newTheme)
-                this.systemTheme = newTheme
+                this.themeSetting = newTheme
                 this.$refs.editor.focus()
             },
 
@@ -129,7 +129,8 @@
             :language="language" 
             :languageAuto="languageAuto"
             :theme="theme"
-            :systemTheme="systemTheme"
+            :themeSetting="themeSetting"
+            :autoUpdate="settings.autoUpdate"
             :allowBetaVersions="settings.allowBetaVersions"
             @toggleTheme="toggleTheme"
             @openLanguageSelector="openLanguageSelector"

diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
@@ -13,7 +13,8 @@
             "language", 
             "languageAuto",
             "theme",
-            "systemTheme",
+            "themeSetting",
+            "autoUpdate",
             "allowBetaVersions",
         ],
 
@@ -84,9 +85,13 @@
         >
             <span class="icon icon-format"></span>
         </div>
-        <UpdateStatusItem v-if="updatesEnabled" :allowBetaVersions="allowBetaVersions" />
+        <UpdateStatusItem 
+            v-if="updatesEnabled" 
+            :autoUpdate="autoUpdate"
+            :allowBetaVersions="allowBetaVersions"
+        />
         <div class="status-block theme clickable" @click="$emit('toggleTheme')" title="Toggle dark/light mode">
-            <span :class="'icon ' + systemTheme"></span>
+            <span :class="'icon ' + themeSetting"></span>
         </div>
     </div>
 </template>

diff --git a/src/components/UpdateStatusItem.vue b/src/components/UpdateStatusItem.vue
@@ -1,6 +1,7 @@
 <script>
     export default {
         props: [
+            "autoUpdate",
             "allowBetaVersions",
         ],
         
@@ -16,7 +17,6 @@
                     total: 0.0,
                     bytesPerSecond: 0.0,
                 },
-                
                 checkForUpdateIntervalId: null,
             }
         },
@@ -50,14 +50,6 @@
                     this.updateProgress = progress
                 }
             })
-            
-            // check for update now
-            this.checkForUpdate()
-
-            // check for updates every 8 hours
-            this.checkForUpdateIntervalId = setInterval(() => {
-                this.checkForUpdate()
-            }, 1000 * 3600 * 8)
         },
 
         beforeUnmount() {
@@ -67,11 +59,27 @@
         },
 
         watch: {
-            allowBetaVersions: {
-                handler: function (newValue) {
-                    this.checkForUpdate()
+            autoUpdate: {
+                immediate: true,
+                handler(autoUpdate) {
+                    if (this.checkForUpdateIntervalId) {
+                        clearInterval(this.checkForUpdateIntervalId)
+                    }
+                    if (autoUpdate) {
+                        // check for update now
+                        this.checkForUpdate()
+                        
+                        // check for updates every 8 hours
+                        this.checkForUpdateIntervalId = setInterval(() => {
+                            this.checkForUpdate()
+                        }, 1000 * 3600 * 8)
+                    }
                 },
-            }
+            },
+
+            allowBetaVersions(newValue) {
+                this.checkForUpdate()
+            },
         },
 
         computed: {