new version overlay

background.js

@@ -30,3 +30,7 @@ chrome.app.runtime.onLaunched.addListener(function() {
     win.onClosed.addListener(closeSerialPorts);
   });
 });
+
+chrome.runtime.onInstalled.addListener(function(evt){
+  chrome.storage.local.set({newVersion: 'newVersion'});
+});

client.js

@@ -71,6 +71,7 @@ function onRender(err){
 
   const {
     newFile,
+    showNewVersionOverlay,
     changeFile,
     changeProject
   } = handlers;
@@ -88,6 +89,7 @@ function onRender(err){
       } else {
         newFile();
       }
+      showNewVersionOverlay();
     })
     .catch(console.error.bind(console));
 }

manifest.json

@@ -7,7 +7,8 @@
   "permissions": [
     "serial",
     "unlimitedStorage",
-    "syncFileSystem"
+    "syncFileSystem",
+    "storage"
   ],
   "icons": {
     "16": "icons/icon16.png",

src/constants/overlay-states.js

@@ -7,6 +7,7 @@ const overlayStates = {
   DOWNLOAD_OVERLAY: 'DOWNLOAD_OVERLAY',
   PROJECTS_OVERLAY: 'PROJECTS_OVERLAY',
   OVERWRITE_OVERLAY: 'OVERWRITE_OVERLAY',
+  NEW_VERSION_OVERLAY: 'NEW_VERSION_OVERLAY',
   DELETE_FILE_OVERLAY: 'DELETE_FILE_OVERLAY',
   DELETE_PROJECT_OVERLAY: 'DELETE_PROJECT_OVERLAY'
 };

src/creators/index.js

@@ -8,6 +8,7 @@ const creators = {
   showDownloadOverlay: require('./show-download-overlay'),
   showProjectsOverlay: require('./show-projects-overlay'),
   showOverwriteOverlay: require('./show-overwrite-overlay'),
+  showNewVersionOverlay: require('./show-new-version-overlay'),
   showSaveOverlay: require('./show-save-overlay'),
   showHelpOverlay: require('./show-help-overlay'),
   hideOverlay: require('./hide-overlay'),

src/creators/show-new-version-overlay.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const {
+  SHOW_OVERLAY
+} = require('../constants/action-types');
+
+const {
+  NEW_VERSION_OVERLAY
+} = require('../constants/overlay-states');
+
+function showHelpOverlay(){
+  return {
+    type: SHOW_OVERLAY,
+    payload: {
+      state: NEW_VERSION_OVERLAY
+    }
+  };
+}
+
+module.exports = showHelpOverlay;

src/plugins/handlers.js

@@ -265,6 +265,16 @@ function handlers(app, opts, done){
     store.dispatch(creators.showDeleteFileOverlay());
   }
 
+  function showNewVersionOverlay(){
+    chrome.storage.local.get('newVersion', function(val) {
+      if(val.newVersion){
+        chrome.storage.local.remove('newVersion', function() {
+          store.dispatch(creators.showNewVersionOverlay());
+        });
+      }
+    });
+  }
+
   function hideOverlay(){
     store.dispatch(creators.hideOverlay());
   }
@@ -596,6 +606,7 @@ function handlers(app, opts, done){
     // overlay methods
     showHelpOverlay,
     showSaveOverlay,
+    showNewVersionOverlay,
     showDownloadOverlay,
     showProjectsOverlay,
     showDeleteFileOverlay,

src/plugins/overlays.js

@@ -4,6 +4,7 @@ const React = require('react');
 
 const HelpOverlay = require('../views/help-overlay');
 const SaveOverlay = require('../views/save-overlay');
+const NewVersionOverlay = require('../views/new-version-overlay');
 const ProjectOverlay = require('../views/project-overlay');
 const DownloadOverlay = require('../views/download-overlay');
 const OverwriteOverlay = require('../views/overwrite-overlay');
@@ -19,6 +20,7 @@ const {
   DOWNLOAD_OVERLAY,
   PROJECTS_OVERLAY,
   OVERWRITE_OVERLAY,
+  NEW_VERSION_OVERLAY,
   DELETE_FILE_OVERLAY,
   DELETE_PROJECT_OVERLAY
 } = require('../constants/overlay-states');
@@ -48,6 +50,9 @@ function overlays(app, opts, done){
       case OVERWRITE_OVERLAY:
         renderOverlay(<OverwriteOverlay store={store} handlers={handlers} />);
         break;
+      case NEW_VERSION_OVERLAY:
+        renderOverlay(<NewVersionOverlay handlers={handlers} />);
+        break;
       case DOWNLOAD_OVERLAY:
         renderOverlay(<DownloadOverlay store={store} handlers={handlers} />);
         break;

src/views/new-version-overlay.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const React = require('react');
+const Button = require('react-material/components/Button');
+
+const Overlay = require('../components/overlay');
+const OverlayTitle = require('../components/overlay-title');
+const OverlayFooter = require('../components/overlay-footer');
+
+const contentStyle = {
+  position: 'relative'
+};
+
+const releaseNotesLink = 'https://github.com/parallaxinc/Parallax-IDE/releases';
+const installationNotesLink = 'https://www.parallax.com/downloads/parallax-ide-chrome';
+
+class NewVersionOverlay extends React.Component {
+
+  render(){
+
+    const {
+      handlers
+    } = this.props;
+
+    const {
+      hideOverlay
+    } = handlers;
+
+    const {
+      name,
+      version
+    } = chrome.runtime.getManifest();
+
+    return (
+      <Overlay>
+        <OverlayTitle>{name} Automatically Updated to v{version}</OverlayTitle>
+        <div style={contentStyle}>
+          You are now running a new release of {name}!
+        </div>
+        <div style={contentStyle}>
+          See <a href={releaseNotesLink} target="_blank">Release Notes</a> and <a href={installationNotesLink} target="_blank">Installation Notes</a> for more details.
+        </div>
+        <OverlayFooter>
+          <Button onClick={hideOverlay}>OK</Button>
+        </OverlayFooter>
+      </Overlay>
+    );
+  }
+}
+
+module.exports = NewVersionOverlay;