Tray Menu + Splash Screen (#80)

* Added splash screen + tray menu

* Fix lint errors

* Added docs

* Added more docs + new ext

README.md

@@ -49,6 +49,34 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
+## Run dev mode + dameon process
+On production builds the app tries to launch the daemon process from the resources builds. This behavior is disabled on dev mode, so you can run the daemon separately. If you want to run the daemon process from the app on dev mode you need to pass two env variables:
+- `DEV_DAEMON=true` to allow execute the daemon on dev mode
+- `DAEMON_PATH=/path/to/the/bin/daemon` this one points to the daemon bin on your machine
+
+Also, if the daemon requires additional env variables, you need to pass those envs as well:
+
+`DEV_DAEMON=true DAEMON_PATH=/path/to/the/bin/daemon SOME_DAEMON_ENV=foo yarn electron:dev`
+
+You can also download the latest version of the daemon directly into the resource folder (same way as CI does). To do that you can run `yarn download-daemon`
+
+## Build app locally
+The default behavior of the build process it's to try to sign the application. If you are not exporting the ENV variables required to sign the application, the build process is going to fail. If you want to skip the signing process in order to be able to run the build process locally you can pass the `CSC_IDENTITY_AUTO_DISCOVERY=false` env variable, so the sign step is going to be ignored
+
+example:
+`CSC_IDENTITY_AUTO_DISCOVERY=false yarn electron-pack --mac`  
+
+if you want to run a build that was not signed, you need to pass an additional env variable before executing the app (to skip check for updates). Please read the next section
+
+## Run build not signed
+If you have a build not signed, you need to disable the "check-updates" events, otherwise, the app is going to break. To do that you just need to launch the app from the command line passing an env variable `SKIP_AUTOUPDATE=true`
+
+so let's say that you have installed the app on your `Applications` folder (OSX), you just need to run the following command:
+
+`SKIP_AUTOUPDATE=true open /Applications/Space.app/Contents/MacOS/Space`
+
+also you can pass additional env variables if you needed (to pass env variables required by the daemon for example)
+
 # Release
 For the release process, will be just necessary to create and merge a PR from `develop` to `master` branch, but before creating that PR, it will be required two previous actions:
 * Create a PR to `develop`, to update the app version based on semantic versioning, and push the tag as `v<APP_VERSION>`.

package.json

@@ -176,7 +176,9 @@
       "icon": "build/icon.png",
       "hardenedRuntime": true,
       "gatekeeperAssess": false,
-      "electronLanguages": ["en"],
+      "electronLanguages": [
+        "en"
+      ],
       "entitlements": "./build/entitlements.mac.plist",
       "entitlementsInherit": "./build/entitlements.mac.plist"
     },

public/electron-app.js

@@ -1,13 +1,15 @@
 require('dotenv').config();
 
-const { app } = require('electron');
+const { app, Tray } = require('electron');
 const isDev = require('electron-is-dev');
 
 const DaemonProcess = require('./electron/daemon');
 const registerEvents = require('./electron/events');
 const createMainWindow = require('./electron/window/main');
 const createSplashWindow = require('./electron/window/splash');
+const { getMenuOptions, trayIcon } = require('./electron/tray-menu');
 
+let appIcon;
 let mainWindow;
 let destroyStream = () => {};
 
@@ -20,7 +22,6 @@ const enableDevDaemon = process.env.DEV_DAEMON === 'true';
  */
 app.on('window-all-closed', () => {
   destroyStream();
-  daemon.stop();
 
   if (process.platform !== 'darwin' || app.newUpdate) {
     app.quit();
@@ -30,17 +31,29 @@ app.on('window-all-closed', () => {
 app.on('activate', () => {
   if (!mainWindow) {
     mainWindow = createMainWindow();
+
+    destroyStream = registerEvents({
+      app,
+      isDev,
+      mainWindow,
+    });
   } else {
     mainWindow.show();
   }
 });
 
 app.on('before-quit', () => {
+  daemon.stop();
   app.quitting = true;
 });
 
 app.on('ready', () => {
   mainWindow = createSplashWindow();
+
+  const contextMenu = getMenuOptions(app, 'pending');
+
+  appIcon = new Tray(trayIcon);
+  appIcon.setContextMenu(contextMenu);
 });
 
 /**
@@ -71,6 +84,11 @@ daemon.on('ready', () => {
     isDev,
     mainWindow,
   });
+
+  if (appIcon) {
+    const contextMenu = getMenuOptions(app, 'ready');
+    appIcon.setContextMenu(contextMenu);
+  }
 });
 
 /**

public/electron/events/index.js

@@ -23,7 +23,7 @@ const registerEvents = ({
   registerAddItemsSubscribe(mainWindow);
   registerGenerateKeyPairEvents(mainWindow);
 
-  if (!isDev) {
+  if (!isDev && process.env.SKIP_AUTOUPDATE !== 'true') {
     registerAppUpdate({ app, mainWindow });
   }
 

public/electron/tray-menu/index.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const { Menu } = require('electron');
+
+const iconsPath = path.join(__dirname, '..', '..', 'assets', 'icons');
+const trayIcon = path.join(iconsPath, 'trayTemplate.png');
+
+const statusOptions = {
+  pending: {
+    label: 'Initializing Space Daemon',
+    type: 'normal',
+    enabled: false,
+    icon: path.join(iconsPath, 'pending.png'),
+  },
+  ready: {
+    label: 'Space Daemon Running',
+    type: 'normal',
+    enabled: false,
+    icon: path.join(iconsPath, 'ready.png'),
+  },
+  failed: {
+    label: 'Space Daemon Error',
+    type: 'normal',
+    enabled: false,
+    icon: path.join(iconsPath, 'failed.png'),
+  },
+};
+
+const getMenuOptions = (app, status = 'pending') => {
+  const statusOption = statusOptions[status] || statusOptions.pending;
+
+  return Menu.buildFromTemplate([
+    statusOption,
+    {
+      type: 'separator',
+    },
+    {
+      label: 'Quit Space',
+      type: 'normal',
+      click: () => app.quit(),
+    },
+  ]);
+};
+
+module.exports = {
+  trayIcon,
+  getMenuOptions,
+};

public/electron/window/splash.js

@@ -1,16 +1,18 @@
 const path = require('path');
+const isDev = require('electron-is-dev');
 const { BrowserWindow } = require('electron');
 
-const isMac = process.platform === 'darwin';
-
-// TODO remove window buttons, add loading html file
 const createWindow = () => {
+  const url = isDev
+    ? 'http://localhost:3000/#/splash'
+    : `file://${path.join(__dirname, '../../../build/index.html#/splash')}`;
+
   const win = new BrowserWindow({
     width: 400,
     height: 400,
+    frame: false,
     minWidth: 400,
     minHeight: 400,
-    titleBarStyle: isMac ? 'hiddenInset' : undefined,
     icon: path.join(__dirname, '..', '..', 'icon.png'),
     webPreferences: {
       webSecurity: false,
@@ -19,6 +21,8 @@ const createWindow = () => {
     },
   });
 
+  win.loadURL(url);
+
   return win;
 };
 

src/App.js

@@ -16,6 +16,7 @@ import {
 import Modal from '@shared/components/Modal';
 import store from './store';
 import Auth from './views/Auth';
+import Splash from './views/Splash';
 import Storage from './views/Storage';
 import ModalView from './views/Modal';
 import PrivateRoute from './shared/components/PrivateRoute';
@@ -39,6 +40,9 @@ const App = () => (
             <Route path="/auth">
               <Auth />
             </Route>
+            <Route path="/splash">
+              <Splash />
+            </Route>
             <PrivateRoute path="/storage">
               <Storage />
             </PrivateRoute>

src/UI/FileIcon/constants.js

@@ -24,6 +24,11 @@ export const MAP_EXT_TO_FILE_TYPE = {
   pdf: PDF,
   zip: ZIP,
   doc: WORD,
+  odt: WORD,
+  rtf: WORD,
+  tex: WORD,
+  txt: WORD,
+  wpd: WORD,
   qt: VIDEO,
   docx: WORD,
   jpg: IMAGE,
@@ -53,6 +58,9 @@ export const MAP_EXT_TO_FILE_TYPE = {
   folder: FOLDER,
   ppt: POWERPOINT,
   pptx: POWERPOINT,
+  key: POWERPOINT,
+  odp: POWERPOINT,
+  pps: POWERPOINT,
   default: DEFAULT,
 };
 

src/views/Splash/Splash.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import useStyles from './styles';
+
+const { PUBLIC_URL } = process.env;
+
+const Splash = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <img
+        src={`${PUBLIC_URL}/assets/images/space.svg`}
+        alt="space logo"
+      />
+      <div className={classes.orbit}>
+        <div className={classes.moon} />
+      </div>
+    </div>
+  );
+};
+
+export default Splash;

src/views/Splash/index.js

@@ -0,0 +1 @@
+export { default } from './Splash';

src/views/Splash/styles.js

@@ -0,0 +1,58 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const { PUBLIC_URL } = process.env;
+
+export default makeStyles({
+  root: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    backgroundSize: 'cover',
+    justifyContent: 'center',
+    backgroundImage: `url(${PUBLIC_URL}/assets/images/auth_background.svg)`,
+  },
+  orbit: {
+    width: 230,
+    height: 230,
+    position: 'absolute',
+    borderRadius: '50%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: 'solid 1px #434343',
+    animation: '$orbit 12s linear infinite',
+  },
+  moon: {
+    width: 30,
+    height: 30,
+    position: 'relative',
+    top: '-15px',
+    left: 'calc(50% - 15px)',
+    backgroundColor: '#a2a2a2',
+    borderRadius: '50%',
+    boxShadow: 'inset -7px -7px 0 #8c8c8c',
+    '&:before': {
+      content: '""',
+      borderRadius: '50%',
+      width: 8,
+      height: 8,
+      backgroundColor: '#949494',
+      display: 'inline-block',
+      margin: '9px 13px',
+    },
+    '&:after': {
+      content: '""',
+      borderRadius: '50%',
+      width: 7,
+      height: 7,
+      backgroundColor: '#949494',
+      display: 'block',
+      margin: '-24px 4px',
+    },
+  },
+  '@keyframes orbit': {
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+});