Polished About and started Settings page

Sadly updater is broken for electron v7 currently, so added temporary manual updater...
First implementation of store successful, next will be persistent data storage

package.json

@@ -1,7 +1,7 @@
 {
   "name": "open-gamers-library",
   "productName": "OGL",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Open Gamers' Library - Hoard, play and rate your games!",
   "license": "MIT",
   "copyright": "Copyright © 2020 Houby Studio",
@@ -51,14 +51,5 @@
     "vue-cli-plugin-vuetify": "^2.0.2",
     "vue-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.3.0"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,vue}": [
-      "vue-cli-service lint",
-      "git add"
-    ]
   }
 }

src/App.vue

@@ -23,7 +23,7 @@ export default {
 </script>
 
 <style>
-  ::-webkit-scrollbar {
-      display: none;
-  }
+::-webkit-scrollbar {
+  display: none;
+}
 </style>

src/background.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, BrowserWindow, dialog, shell, ipcMain } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import { autoUpdater } from 'electron-updater'
 const isDevelopment = process.env.NODE_ENV !== 'production'
@@ -9,6 +9,25 @@ const isDevelopment = process.env.NODE_ENV !== 'production'
 // be closed automatically when the JavaScript object is garbage collected.
 let win
 
+// Update available notifier - temporary as auto updates are broken on electron 7
+autoUpdater.on('update-available', () => {
+  dialog.showMessageBox({
+    type: 'info',
+    title: 'New Update Available',
+    message: 'New Update Available, do you want update now?\nYou can configure automatic updates in Settings',
+    buttons: ['Yes', 'No']
+  }).then(buttonIndex => {
+    if (buttonIndex.response === 0) {
+      shell.openExternal('https://github.com/houby-studio/open-gamers-library/releases/latest')
+    }
+  })
+})
+
+// Manual update checker
+ipcMain.on('check-for-updates', () => {
+  autoUpdater.checkForUpdates()
+})
+
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
@@ -30,9 +49,17 @@ function createWindow () {
     createProtocol('app')
     // Load the index.html when not in development
     win.loadURL('app://./index.html')
-    autoUpdater.checkForUpdatesAndNotify()
+
+    // autoUpdater.checkForUpdatesAndNotify() // Currently this is broken on electron 7
+    autoUpdater.checkForUpdates()
   }
 
+  // When using a href with _blank target in renderer, this makes it open in default browser
+  // win.webContents.on('new-window', function (event, url) {
+  //   event.preventDefault()
+  //   shell.openExternal(url)
+  // })
+
   win.on('closed', () => {
     win = null
   })
@@ -71,7 +98,6 @@ app.on('ready', async () => {
     // } catch (e) {
     //   console.error('Vue Devtools failed to install:', e.toString())
     // }
-
   }
   createWindow()
 })

src/components/Footer.vue

@@ -1,10 +1,19 @@
 <template>
-  <v-card height="150">
-    <v-footer fixed color="primary" dark class="font-weight-medium">
+    <v-footer v-if="!isHidden" fixed class="footer font-weight-medium">
       <v-col class="text-center" cols="12">
         <strong><v-icon>mdi-mushroom</v-icon> Houby Studio</strong>
         {{ new Date().getFullYear() }}
       </v-col>
     </v-footer>
-  </v-card>
 </template>
+
+<script>
+export default {
+  name: 'footer-bar',
+  computed: {
+    isHidden () {
+      return this.$store.state.footerIsHidden
+    }
+  }
+}
+</script>

src/components/Navigation.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-app-bar app color="primary" dark>
-    <div class="d-flex align-center">
+  <v-app-bar app>
+    <div v-if="!isHidden" class="d-flex align-center">
       <v-img
         alt="OGL Logo"
         class="shrink mr-2"
@@ -11,7 +11,7 @@
       />
       <v-toolbar-title d-xs-none>OGL</v-toolbar-title>
     </div>
-    <v-tabs show-arrows align-with-title centered grow background-color="primary">
+    <v-tabs show-arrows align-with-title centered grow>
       <v-tab to="/library">
         <v-icon>mdi-bookshelf</v-icon>Library
       </v-tab>
@@ -22,17 +22,16 @@
         <v-icon>mdi-account</v-icon>Profile
       </v-tab>
     </v-tabs>
-    <!-- <v-spacer></v-spacer> -->
 
     <v-menu offset-y bottom transition="scroll-y-transition">
       <template v-slot:activator="{ on }">
-        <v-btn dark icon v-on="on">
+        <v-btn icon v-on="on">
           <v-icon>mdi-dots-vertical</v-icon>
         </v-btn>
       </template>
 
       <v-list>
-        <v-list-item-group color="primary">
+        <v-list-item-group>
           <v-list-item v-for="item in navigation" :key="item.name" :to="item.link">
             <v-list-item-icon>
               <v-icon v-text="item.icon"></v-icon>
@@ -48,9 +47,8 @@
 </template>
 
 <script>
-
 export default {
-  name: 'Navigation',
+  name: 'navigation-bar',
   data: function () {
     return {
       navigation: [
@@ -59,6 +57,11 @@ export default {
         { name: 'Quit', icon: 'mdi-bolnisi-cross', link: '/quit' }
       ]
     }
+  },
+  computed: {
+    isHidden () {
+      return this.$store.state.logoIsHidden
+    }
   }
 }
 </script>

src/store/index.js

@@ -1,12 +1,22 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { remote } from 'electron'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    version: remote.app.getVersion(),
+    footerIsHidden: false,
+    logoIsHidden: false
   },
   mutations: {
+    hideFooter (state) {
+      state.footerIsHidden = !state.footerIsHidden
+    },
+    hideLogo (state) {
+      state.logoIsHidden = !state.logoIsHidden
+    }
   },
   actions: {
   },

src/updater.js

@@ -0,0 +1,60 @@
+/**
+ * updater.js
+ *
+ * Please use manual update only when it is really required, otherwise please use recommended non-intrusive auto update.
+ *
+ * Import steps:
+ * 1. create `updater.js` for the code snippet
+ * 2. require `updater.js` for menu implementation, and set `checkForUpdates` callback from `updater` for the click property of `Check Updates...` MenuItem.
+ */
+const { dialog } = require('electron')
+const { autoUpdater } = require('electron-updater')
+
+let updater
+autoUpdater.autoDownload = false
+
+autoUpdater.on('error', (error) => {
+  dialog.showErrorBox('Error: ', error == null ? 'unknown' : (error.stack || error).toString())
+})
+
+autoUpdater.on('update-available', () => {
+  dialog.showMessageBox({
+    type: 'info',
+    title: 'Found Updates',
+    message: 'Found updates, do you want update now?',
+    buttons: ['Sure', 'No']
+  }, (buttonIndex) => {
+    if (buttonIndex === 0) {
+      autoUpdater.downloadUpdate()
+    } else {
+      updater.enabled = true
+      updater = null
+    }
+  })
+})
+
+autoUpdater.on('update-not-available', () => {
+  dialog.showMessageBox({
+    title: 'No Updates',
+    message: 'Current version is up-to-date.'
+  })
+  updater.enabled = true
+  updater = null
+})
+
+autoUpdater.on('update-downloaded', () => {
+  dialog.showMessageBox({
+    title: 'Install Updates',
+    message: 'Updates downloaded, application will be quit for update...'
+  }, () => {
+    setImmediate(() => autoUpdater.quitAndInstall())
+  })
+})
+
+// export this to MenuItem click callback
+function checkForUpdates (menuItem, focusedWindow, event) {
+  updater = menuItem
+  updater.enabled = false
+  autoUpdater.checkForUpdates()
+}
+module.exports.checkForUpdates = checkForUpdates

src/views/About.vue

@@ -8,40 +8,22 @@
               <h1>About</h1>
             </v-card-title>
             <v-card-subtitle>
-              Made with <v-icon>mdi-heart</v-icon>
+              Made with <v-icon>mdi-heart</v-icon> for <v-icon>mdi-gamepad-variant</v-icon>
             </v-card-subtitle>
             <v-card-text>
               <v-row>
                 <v-col cols="12" md="6">
                   <p>OGL Version {{ version }}</p>
-                  <span>Scheme</span>
-                  <v-switch v-model="$vuetify.theme.dark" primary label="Dark" />
+                  <p><a href="https://github.com/houby-studio/open-gamers-library/releases/latest" target="_blank"><v-icon>mdi-github-circle</v-icon>GitHub Releases</a></p>
                 </v-col>
-                <v-col cols="12" md="6">
-                  <span>Drawer</span>
-                  <v-radio-group v-model="primaryDrawer.type" column>
-                    <v-radio
-                      v-for="drawer in drawers"
-                      :key="drawer"
-                      :label="drawer"
-                      :value="drawer.toLowerCase()"
-                      primary
-                    />
-                  </v-radio-group>
-                  <v-switch v-model="primaryDrawer.clipped" label="Clipped" primary />
-                  <v-switch v-model="primaryDrawer.floating" label="Floating" primary />
-                  <v-switch v-model="primaryDrawer.mini" label="Mini" primary />
-                </v-col>
-                <v-col cols="12" md="6">
-                  <span>Footer</span>
-                  <v-switch label="Inset" primary />
+                <v-col>
+                  <p>Originally made as a small project, which turned out to be a small project. From gamer for gamers.</p>
                 </v-col>
               </v-row>
             </v-card-text>
             <v-card-actions>
               <v-spacer />
-              <v-btn text>Cancel</v-btn>
-              <v-btn text color="primary">Submit</v-btn>
+              <v-btn text color="primary" @click="checkUpdates">Check For Updates</v-btn>
             </v-card-actions>
           </v-card>
         </v-col>
@@ -51,7 +33,7 @@
 </template>
 
 <script>
-import { remote } from 'electron'
+import { ipcRenderer } from 'electron'
 
 export default {
   name: 'profile',
@@ -66,8 +48,23 @@ export default {
       clipped: false,
       floating: false,
       mini: false
-    },
-    version: remote.app.getVersion()
-  })
+    }
+  }),
+  methods: {
+    checkUpdates: function () {
+      ipcRenderer.send('check-for-updates')
+    }
+  },
+  computed: {
+    version () {
+      return this.$store.state.version
+    }
+  }
 }
 </script>
+
+<style>
+  a {
+    text-decoration: none;
+  }
+</style>