feat: notify user about updates (#410)

* fix: dialogs animations * feat: notify user about updates
wexond · Feb 29, 2020 · 458b799 · 458b799
1 parent af57852
commit 458b799
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 26 deletions.
diff --git a/src/main/dialogs/extension-popup.ts b/src/main/dialogs/extension-popup.ts
@@ -19,7 +19,7 @@ export class ExtensionPopup extends Dialog {
       bounds: {
         width: 512,
         height: 512,
-        y: 34,
+        y: 30,
       },
       devtools: false,
       webPreferences: {

diff --git a/src/main/services/auto-updater.ts b/src/main/services/auto-updater.ts
@@ -3,17 +3,28 @@ import { ipcMain } from 'electron';
 import { WindowsManager } from '../windows-manager';
 
 export const runAutoUpdaterService = (windowsManager: WindowsManager) => {
-  ipcMain.on('update-install', () => {
-    autoUpdater.quitAndInstall();
+  let updateAvailable = false;
+
+  ipcMain.on('install-update', () => {
+    if (process.env.NODE_ENV !== 'development') {
+      autoUpdater.quitAndInstall(true, true);
+    }
+  });
+
+  ipcMain.handle('is-update-available', () => {
+    return updateAvailable;
   });
 
   ipcMain.on('update-check', () => {
     autoUpdater.checkForUpdates();
   });
 
-  autoUpdater.on('update-downloaded', ({ version }) => {
+  autoUpdater.on('update-downloaded', () => {
+    updateAvailable = true;
+
     for (const window of windowsManager.list) {
-      window.webContents.send('update-available', version);
+      window.webContents.send('update-available');
+      window.dialogs.menuDialog.webContents.send('update-available');
     }
   });
 };
diff --git a/src/renderer/views/app/components/Toolbar/index.tsx b/src/renderer/views/app/components/Toolbar/index.tsx
@@ -146,7 +146,14 @@ const RightButtons = observer(() => {
       )}
       <Separator />
       {store.isIncognito && <ToolbarButton icon={icons.incognito} size={18} />}
-      <ToolbarButton onMouseDown={onMenuClick} icon={icons.more} size={18} />
+      <ToolbarButton
+        badge={store.updateAvailable}
+        badgeRight={10}
+        badgeTop={8}
+        onMouseDown={onMenuClick}
+        icon={icons.more}
+        size={18}
+      />
     </Buttons>
   );
 });

diff --git a/src/renderer/views/app/store/index.ts b/src/renderer/views/app/store/index.ts
@@ -6,7 +6,6 @@ import { AddTabStore } from './add-tab';
 import { ipcRenderer } from 'electron';
 import { ExtensionsStore } from './extensions';
 import { SettingsStore } from './settings';
-import { extensionsRenderer } from 'electron-extensions/renderer';
 import { getCurrentWindow } from '../utils/windows';
 import { StartupTabsStore } from './startup-tabs';
 import { getTheme } from '~/utils/themes';
@@ -39,10 +38,7 @@ export class Store {
   public isHTMLFullscreen = false;
 
   @observable
-  public updateInfo = {
-    available: false,
-    version: '',
-  };
+  public updateAvailable = false;
 
   @observable
   public navigationState = {
@@ -104,9 +100,8 @@ export class Store {
       this.isHTMLFullscreen = fullscreen;
     });
 
-    ipcRenderer.on('update-available', (e, version: string) => {
-      this.updateInfo.version = version;
-      this.updateInfo.available = true;
+    ipcRenderer.on('update-available', () => {
+      this.updateAvailable = true;
     });
 
     ipcRenderer.on('download-started', (e, item) => {

diff --git a/src/renderer/views/menu/components/QuickMenu/index.tsx b/src/renderer/views/menu/components/QuickMenu/index.tsx
@@ -62,6 +62,10 @@ const goToWebUIPage = (name: string) => () => {
   store.hide();
 };
 
+const onUpdateClick = () => {
+  ipcRenderer.send('install-update');
+};
+
 export const QuickMenu = observer(() => {
   return (
     <div
@@ -72,6 +76,15 @@ export const QuickMenu = observer(() => {
     >
       <Content>
         <MenuItems>
+          {store.updateAvailable && (
+            <>
+              <MenuItem onClick={onUpdateClick}>
+                <Icon icon={icons.fire}></Icon>
+                <MenuItemTitle>Update {remote.app.name}</MenuItemTitle>
+              </MenuItem>
+              <Line />
+            </>
+          )}
           <MenuItem onClick={onDarkClick}>
             <Icon icon={icons.night} />
             <MenuItemTitle>Night mode</MenuItemTitle>

diff --git a/src/renderer/views/menu/store/index.ts b/src/renderer/views/menu/store/index.ts
@@ -6,11 +6,19 @@ export class Store extends DialogStore {
   @observable
   public alwaysOnTop = false;
 
+  @observable
+  public updateAvailable = false;
+
   public constructor() {
     super();
-    ipcRenderer.on('visible', (e, flag) => {
+    ipcRenderer.on('visible', async (e, flag) => {
       this.visible = flag;
       this.alwaysOnTop = remote.getCurrentWindow().isAlwaysOnTop();
+      this.updateAvailable = await ipcRenderer.invoke('is-update-available');
+    });
+
+    ipcRenderer.on('update-available', () => {
+      this.updateAvailable = true;
     });
   }
 

diff --git a/src/renderer/views/search/components/App/style.ts b/src/renderer/views/search/components/App/style.ts
@@ -5,8 +5,8 @@ import { ITheme } from '~/interfaces';
 import { DialogStyle } from '~/renderer/mixins/dialogs';
 
 export const StyledApp = styled(DialogStyle)`
-  ${({ visible, theme }: { visible: boolean; theme?: ITheme }) => css`
-    transform: translateY(${visible ? 0 : -5}px);
+  margin-top: 10px;
+  ${({ theme }: { theme?: ITheme }) => css`
     box-shadow: 0 0 0 2px
         ${theme['searchBox.input.lightForeground'] ? BLUE_500 : BLUE_300},
       ${shadows(4)};

diff --git a/src/renderer/views/tabgroup/components/App/style.ts b/src/renderer/views/tabgroup/components/App/style.ts
@@ -3,6 +3,7 @@ import { ITheme } from '~/interfaces';
 import { DialogStyle } from '~/renderer/mixins/dialogs';
 
 export const StyledApp = styled(DialogStyle)`
+  margin-top: 10px;
   padding: 16px;
 `;
 

diff --git a/static/pages/extension-popup.html b/static/pages/extension-popup.html
@@ -20,12 +20,11 @@
 
       .app {
         margin: 8px;
-        margin-top: 3px;
+        margin-top: 10px;
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
         overflow: hidden;
         position: relative;
-        transition: 0.35s opacity,
-          0.35s transform cubic-bezier(0.1, 0.9, 0.2, 1);
+        transition: 0.3s opacity, 0.3s transform;
         background-color: white;
         width: fit-content;
         transform: translateY(-10px);

diff --git a/webpack.config.js b/webpack.config.js
@@ -57,13 +57,15 @@ if (process.env.START === '1') {
     apply: compiler => {
       compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
         if (electronProcess) {
-          if (process.platform === 'win32') {
-            execSync(`taskkill /pid ${electronProcess.pid} /f /t`);
-          } else {
-            electronProcess.kill();
-          }
+          try {
+            if (process.platform === 'win32') {
+              execSync(`taskkill /pid ${electronProcess.pid} /f /t`);
+            } else {
+              electronProcess.kill();
+            }
 
-          electronProcess = null;
+            electronProcess = null;
+          } catch (e) {}
         }
 
         electronProcess = spawn('npm', ['start'], {