add update notification - fix #51 (#52)

forrest-app · Jul 27, 2016 · f4a6e14 · f4a6e14
1 parent 0417941
commit f4a6e14
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 31 deletions.
diff --git a/app/electron.js b/app/electron.js
@@ -5,14 +5,24 @@ const path                            = require( 'path' );
 const menu                            = require( './main/menu' );
 const fixPath                         = require( 'fix-path' );
 const windowStateKeeper               = require( 'electron-window-state' );
+const GitHubApi                       = require( 'github' );
+const github                          = new GitHubApi( {
+  protocol : 'https',
+  headers  : {
+    'user-agent' : 'Forrest - npm desktop client'
+  },
+  timeout : 5000
+} );
+
 
 // configuration for the available static windows
-const staticWindows = {
+const initialBgColor = '#f1f1f1';
+const staticWindows  = {
   about : {
     config : {
       height          : 625,
       width           : 475,
-      backgroundColor : '#f1f1f1',
+      backgroundColor : initialBgColor,
       titleBarStyle   : 'hidden',
       resizable       : false
     },
@@ -23,12 +33,23 @@ const staticWindows = {
     config : {
       height          : 400,
       width           : 800,
-      backgroundColor : '#f1f1f1',
+      backgroundColor : initialBgColor,
       titleBarStyle   : 'hidden',
       resizable       : false
     },
     hash              : '#!/help',
     initializedWindow : null
+  },
+  updateAvailable : {
+    config : {
+      height          : 300,
+      width           : 300,
+      backgroundColor : initialBgColor,
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/update-available',
+    initializedWindow : null
   }
 };
 
@@ -112,7 +133,7 @@ function createWindow( event, hash ) {
     width             : mainWindowState.width,
     x                 : mainWindowState.x,
     y                 : mainWindowState.y,
-    backgroundColor   : '#f1f1f1',
+    backgroundColor   : initialBgColor,
     minWidth          : 250,
     titleBarStyle     : 'hidden',
     'web-preferences' : {
@@ -159,6 +180,21 @@ function createWindow( event, hash ) {
   console.log( 'window opened' );
 }
 
+if ( process.env.NODE_ENV !== 'development' ) {
+  github.repos.getReleases(
+    { user : 'stefanjudis', repo : 'forrest' },
+    ( error, releases ) => {
+      if ( error ) {
+        return;
+      }
+
+      if ( releases.length && releases[ 0 ].tag_name !== `v${ app.getVersion() }` ) {
+        openStaticWindow( 'updateAvailable' );
+      }
+    }
+  );
+}
+
 app.on( 'ready', createWindow );
 
 app.on( 'window-all-closed', () => {

diff --git a/app/package.json b/app/package.json
@@ -12,7 +12,8 @@
     "vue": "^1.0.24",
     "vue-electron": "^1.0.0",
     "vue-router": "^0.7.13",
-    "vuex": "^0.6.3"
+    "vuex": "^0.6.3",
+    "github": "~2.3.0"
   },
   "author": "stefan judis <stefanjudis@gmail.com>",
   "license": "MIT"

diff --git a/app/src/App.vue b/app/src/App.vue
@@ -143,12 +143,12 @@
 
 <template>
   <header-bar
-    v-if="$route.name !== 'about-page' && $route.name !== 'help-page'">
+    v-if="! $route.isStatic">
   </header-bar>
   <main
     v-key-tracker
     :on-cmd-comma="handleCommandComma">
-    <settings v-if="showSettings && $route.name !== 'about-page' && $route.name !== 'help-page'"></settings>
+    <settings v-if="showSettings && ! $route.isStatic"></settings>
     <router-view v-on:activate="toggleSettings( false )"></router-view>
   </main>
 </template>

diff --git a/app/src/components/RepoListView/OpenRepoButton.vue b/app/src/components/RepoListView/OpenRepoButton.vue
@@ -1,25 +1,5 @@
-<style scoped>
-  button {
-    background-color : var(--npm-red);
-    display : block;
-
-    width : 100%;
-
-    border : none;
-
-    padding : .5em;
-
-    color       : var(--main-bg-color);
-    font-size   : inherit;
-    font-family : inherit;
-
-    margin-left  : auto;
-    margin-right : auto;
-  }
-</style>
-
 <template>
-  <button type="button" v-on:click="openFileDialog">Add new Project</button>
+  <button class="o-primaryBtn" type="button" v-on:click="openFileDialog">Add new Project</button>
 </template>
 
 <script>

diff --git a/app/src/components/UpdateAvailableView.vue b/app/src/components/UpdateAvailableView.vue
@@ -0,0 +1,76 @@
+<style lang="scss">
+  .c-updateAvailable {
+    padding : 1em;
+
+    text-align : center;
+  }
+</style>
+
+<template>
+  <div class="c-updateAvailable">
+    <div class="c-dragHandle"></div>
+    <div class="c-logo" transition="project">
+      <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>Forrest logo</title>
+        <defs>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#EEEBEB" offset="0%" />
+            <stop stop-color="#FCFBFB" offset="18.142%" />
+            <stop stop-color="#CFCFCF" offset="100%" />
+          </linearGradient>
+          <ellipse id="b" cx="161.175" cy="161.175" rx="161.175" ry="161.175" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1" />
+          </filter>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+            <stop stop-color="#344352" offset="0%" />
+            <stop stop-color="#2A333C" offset="100%" />
+          </linearGradient>
+          <ellipse id="e" cx="161.175" cy="161.175" rx="150.059" ry="150.059" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="f">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1" />
+            <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1" />
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"
+            />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowInnerInner1" />
+          </filter>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(4 3)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <use fill="url(#c)" xlink:href="#b" />
+          </g>
+          <g transform="translate(4 3)">
+            <use fill="url(#d)" xlink:href="#e" />
+            <use fill="#000" filter="url(#f)" xlink:href="#e" />
+          </g>
+          <g stroke-width="5">
+            <path d="M102.013 105.372l49.846 103.795H52.167l49.846-103.795zM87.06 209.167h29.908v10.38H87.059v-10.38zM215.235 209.167h29.908v10.38h-29.908v-10.38zm14.954-103.795l49.846 103.795h-99.692l49.846-103.795z"
+              stroke="#F1F1F1" />
+            <path d="M194.584 240.954h49.847L166.1 69.693l-78.33 171.261h49.847v14.843h56.966v-14.843z" stroke="#2A333C" fill="#CD3632"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+
+    <h1 class="o-headline-2">Forrest {{ version }}</h1>
+
+    <p class="o-paragraph u-marginTopSmall">There is a new version available.</p>
+    <p class="o-paragraph u-marginTopSmall">We're working on the auto update but for now you have to grab the new version at the <button class="o-linkBtn" type="button" v-open-external="'https://github.com/stefanjudis/forrest/releases'">releases page</button> yourself. :)</p>
+
+    <button class="o-primaryBtn u-marginTop" type="button" v-open-external="'https://github.com/stefanjudis/forrest/releases'">Download</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        version : this.$electron.remote.require( 'electron' ).app.getVersion()
+      };
+    }
+  };
+</script>
diff --git a/app/src/routes.js b/app/src/routes.js
@@ -9,10 +9,17 @@ export default {
   },
   '/about' : {
     component : require( './components/AboutView' ),
-    name      : 'about-page'
+    name      : 'about-page',
+    isStatic  : true
   },
   '/help' : {
     component : require( './components/HelpView' ),
-    name      : 'help-page'
+    name      : 'help-page',
+    isStatic  : true
+  },
+  '/update-available' : {
+    component : require( './components/UpdateAvailableView' ),
+    name      : 'update-available-page',
+    isStatic  : true
   }
 };
diff --git a/app/src/styles/objects/_buttons.scss b/app/src/styles/objects/_buttons.scss
@@ -12,4 +12,19 @@
 
   border : none;
   display : inline-block;
+}
+
+.o-primaryBtn {
+  display : block;
+  width : 100%;
+
+  padding : .5em;
+
+  color      : var(--main-bg-color);
+  background : var(--npm-red);
+
+  border : none;
+
+  font-size : 1em;
+  font-family : inherit;
 }
diff --git a/config.js b/config.js
@@ -11,7 +11,7 @@ const config = {
   vueDevTools : false,
   build       : {
     'app-version'        : pkg.version,
-    packagesToBeIncluded : [ 'fix-path', 'electron-window-state', 'ps-tree' ],
+    packagesToBeIncluded : [ 'fix-path', 'electron-window-state', 'ps-tree', 'github' ],
     overwrite            : true,
     asar                 : true,
     dmg                  : {