Add navigation bar (#248)

webcatalog · Apr 25, 2019 · 0b43ed8 · 0b43ed8
1 parent 739aa61
commit 0b43ed8
Show file tree

Hide file tree

Showing 20 changed files with 4,176 additions and 3,385 deletions.
diff --git a/package.json b/package.json
@@ -57,9 +57,9 @@
     "classnames": "2.2.6",
     "concurrently": "4.1.0",
     "cross-env": "5.2.0",
-    "electron": "4.1.4",
+    "electron": "4.1.5",
     "electron-builder": "20.39.0",
-    "eslint": "5.12.0",
+    "eslint": "5.16.0",
     "eslint-config-airbnb": "17.1.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
@@ -68,7 +68,7 @@
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-redux": "6.0.1",
-    "react-scripts": "2.1.8",
+    "react-scripts": "3.0.0",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",
     "replace-in-file": "3.4.4",

diff --git a/template/package.json b/template/package.json
@@ -18,7 +18,7 @@
   "author": "Quang Lam <[email protected]>",
   "dependencies": {
     "@sentry/electron": "0.17.1",
-    "electron": "4.1.4",
+    "electron": "4.1.5",
     "electron-is-dev": "1.1.0",
     "electron-settings": "3.2.0",
     "electron-spellchecker": "1.1.2",
@@ -39,7 +39,7 @@
     "classnames": "2.2.6",
     "concurrently": "4.1.0",
     "cross-env": "5.2.0",
-    "eslint": "5.12.0",
+    "eslint": "5.16.0",
     "eslint-config-airbnb": "17.1.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
@@ -49,7 +49,7 @@
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-redux": "6.0.1",
-    "react-scripts": "2.1.8",
+    "react-scripts": "3.0.0",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",
     "typeface-roboto": "0.0.54",

diff --git a/template/public/electron.js b/template/public/electron.js
@@ -62,6 +62,7 @@ if (!gotTheLock) {
     global.appJson = appJson;
 
     global.showSidebar = getPreference('sidebar');
+    global.showNavigationBar = getPreference('navigationBar');
 
     commonInit();
 

diff --git a/template/public/libs/create-menu.js b/template/public/libs/create-menu.js
@@ -110,8 +110,9 @@ function createMenu() {
 
               view.setBounds({
                 x: global.showSidebar ? 68 : 0,
-                y: FIND_IN_PAGE_HEIGHT,
-                height: contentSize[1] - FIND_IN_PAGE_HEIGHT,
+                y: global.showNavigationBar ? FIND_IN_PAGE_HEIGHT + 36 : FIND_IN_PAGE_HEIGHT,
+                height: global.showNavigationBar ? contentSize[1] - FIND_IN_PAGE_HEIGHT - 36
+                  : contentSize[1] - FIND_IN_PAGE_HEIGHT,
                 width: global.showSidebar ? contentSize[0] - 68 : contentSize[0],
               });
             }
@@ -224,8 +225,10 @@ function createMenu() {
 
             if (win != null) {
               const activeWorkspace = getActiveWorkspace();
-              const homeUrl = activeWorkspace.homeUrl || appJson.url;
-              win.getBrowserView().webContents.loadURL(homeUrl);
+              const contents = win.getBrowserView().webContents;
+              contents.loadURL(activeWorkspace.homeUrl || appJson.url);
+              win.send('update-can-go-back', contents.canGoBack());
+              win.send('update-can-go-forward', contents.canGoForward());
             }
           },
         },
@@ -235,8 +238,13 @@ function createMenu() {
           click: () => {
             const win = mainWindow.get();
 
-            if (win != null && win.getBrowserView().webContents.canGoBack()) {
-              win.getBrowserView().webContents.goBack();
+            if (win != null) {
+              const contents = win.getBrowserView().webContents;
+              if (contents.canGoBack()) {
+                contents.goBack();
+                win.send('update-can-go-back', contents.canGoBack());
+                win.send('update-can-go-forward', contents.canGoForward());
+              }
             }
           },
         },
@@ -246,8 +254,13 @@ function createMenu() {
           click: () => {
             const win = mainWindow.get();
 
-            if (win != null && win.getBrowserView().webContents.canGoForward()) {
-              win.getBrowserView().webContents.goForward();
+            if (win != null) {
+              const contents = win.getBrowserView().webContents;
+              if (contents.canGoForward()) {
+                contents.goForward();
+                win.send('update-can-go-back', contents.canGoBack());
+                win.send('update-can-go-forward', contents.canGoForward());
+              }
             }
           },
         },

diff --git a/template/public/libs/preferences.js b/template/public/libs/preferences.js
@@ -12,6 +12,7 @@ const defaultPreferences = {
   cssCodeInjection: null,
   errorMonitoring: true,
   jsCodeInjection: null,
+  navigationBar: false,
   rememberLastPageVisited: false,
   shareWorkspaceBrowsingData: false,
   sidebar: Boolean(appJson.mailtoHandler),

diff --git a/template/public/libs/views.js b/template/public/libs/views.js
@@ -28,9 +28,9 @@ const extractDomain = (fullUrl) => {
 
 const addView = (browserWindow, workspace) => {
   const {
-    unreadCountBadge,
     rememberLastPageVisited,
     shareWorkspaceBrowsingData,
+    unreadCountBadge,
   } = getPreferences();
 
   const view = new BrowserView({
@@ -48,9 +48,9 @@ const addView = (browserWindow, workspace) => {
     const contentSize = browserWindow.getContentSize();
     view.setBounds({
       x: global.showSidebar ? 68 : 0,
-      y: 0,
+      y: global.showNavigationBar ? 36 : 0,
       width: global.showSidebar ? contentSize[0] - 68 : contentSize[0],
-      height: contentSize[1],
+      height: global.showNavigationBar ? contentSize[1] - 36 : contentSize[1],
     });
     view.setAutoResize({
       width: true,
@@ -85,6 +85,21 @@ const addView = (browserWindow, workspace) => {
     }
   });
 
+  view.webContents.on('did-navigate', () => {
+    if (getWorkspace(workspace.id).active) {
+      sendToAllWindows('update-can-go-back', view.webContents.canGoBack());
+      sendToAllWindows('update-can-go-forward', view.webContents.canGoForward());
+    }
+  });
+
+
+  view.webContents.on('did-navigate-in-page', () => {
+    if (getWorkspace(workspace.id).active) {
+      sendToAllWindows('update-can-go-back', view.webContents.canGoBack());
+      sendToAllWindows('update-can-go-forward', view.webContents.canGoForward());
+    }
+  });
+
   view.webContents.on('new-window', (e, nextUrl) => {
     const curDomain = extractDomain(appJson.url);
     const nextDomain = extractDomain(nextUrl);
@@ -167,9 +182,9 @@ const setActiveView = (browserWindow, id) => {
   const contentSize = browserWindow.getContentSize();
   view.setBounds({
     x: global.showSidebar ? 68 : 0,
-    y: 0,
+    y: global.showNavigationBar ? 36 : 0,
     width: global.showSidebar ? contentSize[0] - 68 : contentSize[0],
-    height: contentSize[1],
+    height: global.showNavigationBar ? contentSize[1] - 36 : contentSize[1],
   });
   view.setAutoResize({
     width: true,

diff --git a/template/public/listeners/index.js b/template/public/listeners/index.js
@@ -47,10 +47,6 @@ const loadListeners = () => {
     shell.openExternal(url);
   });
 
-  ipcMain.on('request-open-webcatalog', () => {
-    shell.openItem('/Applications/WebCatalog 14.app');
-  });
-
   // Find In Page
   ipcMain.on('request-find-in-page', (e, text, forward) => {
     const contents = mainWindow.get().getBrowserView().webContents;
@@ -73,9 +69,9 @@ const loadListeners = () => {
 
       view.setBounds({
         x: global.showSidebar ? 68 : 0,
-        y: 0,
-        height: contentSize[1],
+        y: global.showNavigationBar ? 36 : 0,
         width: global.showSidebar ? contentSize[0] - 68 : contentSize[0],
+        height: global.showNavigationBar ? contentSize[1] - 36 : contentSize[1],
       });
     }
   });
@@ -215,8 +211,50 @@ const loadListeners = () => {
     loadURL(url, id);
   });
 
-  ipcMain.on('request-go-home', (e, id) => {
-    loadURL(appJson.url, id);
+  ipcMain.on('request-go-home', () => {
+    const win = mainWindow.get();
+
+    if (win != null) {
+      const activeWorkspace = getActiveWorkspace();
+      const contents = win.getBrowserView().webContents;
+      contents.loadURL(activeWorkspace.homeUrl || appJson.url);
+      win.send('update-can-go-back', contents.canGoBack());
+      win.send('update-can-go-forward', contents.canGoForward());
+    }
+  });
+
+  ipcMain.on('request-go-back', () => {
+    const win = mainWindow.get();
+
+    if (win != null) {
+      const contents = win.getBrowserView().webContents;
+      if (contents.canGoBack()) {
+        contents.goBack();
+        win.send('update-can-go-back', contents.canGoBack());
+        win.send('update-can-go-forward', contents.canGoForward());
+      }
+    }
+  });
+
+  ipcMain.on('request-go-forward', () => {
+    const win = mainWindow.get();
+
+    if (win != null) {
+      const contents = win.getBrowserView().webContents;
+      if (contents.canGoForward()) {
+        contents.goForward();
+        win.send('update-can-go-back', contents.canGoBack());
+        win.send('update-can-go-forward', contents.canGoForward());
+      }
+    }
+  });
+
+  ipcMain.on('request-reload', () => {
+    const win = mainWindow.get();
+
+    if (win != null) {
+      win.getBrowserView().webContents.reload();
+    }
   });
 };
 

diff --git a/...te/src/components/sidebar/find-in-page.js → template/src/components/main/find-in-page.js b/...te/src/components/sidebar/find-in-page.js → template/src/components/main/find-in-page.js
@@ -23,6 +23,7 @@ const styles = theme => ({
     zIndex: 1,
     height: 41, // need to have fixed height
     borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
+    width: '100%',
   },
   infoContainer: {
     flex: 1,

diff --git a/template/src/components/sidebar/index.js → template/src/components/main/index.js b/template/src/components/sidebar/index.js → template/src/components/main/index.js
@@ -11,6 +11,7 @@ import connectComponent from '../../helpers/connect-component';
 
 import WorkspaceSelector from './workspace-selector';
 import FindInPage from './find-in-page';
+import NavigationBar from './navigation-bar';
 
 import {
   requestShowPreferencesWindow,
@@ -57,16 +58,19 @@ const styles = theme => ({
   contentRoot: {
     flex: 1,
     display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
   },
 });
 
 const getWorkspacesAsList = workspaces => Object.values(workspaces)
   .sort((a, b) => a.order - b.order);
 
-const Sidebar = ({
+const Main = ({
   classes,
   didFailLoad,
   isLoading,
+  navigationBar,
   sidebar,
   workspaces,
 }) => (
@@ -105,14 +109,17 @@ const Sidebar = ({
             <WorkspaceSelector id="add" onClick={requestCreateWorkspace} />
           )}
         </div>
+        {!navigationBar && (
         <div className={classes.end}>
           <IconButton aria-label="Preferences" onClick={requestShowPreferencesWindow}>
             <SettingsIcon />
           </IconButton>
         </div>
+        )}
       </div>
     )}
     <div className={classes.contentRoot}>
+      {navigationBar && <NavigationBar />}
       <FindInPage />
       <div className={classes.innerContentRoot}>
         {didFailLoad && (
@@ -136,23 +143,25 @@ const Sidebar = ({
   </div>
 );
 
-Sidebar.propTypes = {
+Main.propTypes = {
   classes: PropTypes.object.isRequired,
   didFailLoad: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  navigationBar: PropTypes.bool.isRequired,
   sidebar: PropTypes.bool.isRequired,
   workspaces: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = state => ({
   didFailLoad: state.general.didFailLoad,
   isLoading: state.general.isLoading,
+  navigationBar: state.preferences.navigationBar,
   sidebar: state.preferences.sidebar,
   workspaces: state.workspaces,
 });
 
 export default connectComponent(
-  Sidebar,
+  Main,
   mapStateToProps,
   null,
   styles,