Add toggle navbar functionality

kamranahmedse · Oct 31, 2018 · 41e6564 · 41e6564
1 parent d483750
commit 41e6564
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 11 deletions.
diff --git a/public/electron.js b/public/electron.js
@@ -37,7 +37,6 @@ function createWindow() {
     mainWindow = null;
   });
 
-
   // Open the dev tools only for dev
   // and when the flag is not set
   if (isDev && !process.env.DEV_TOOLS) {

diff --git a/public/menu.js b/public/menu.js
@@ -74,8 +74,18 @@ function setMainMenu(mainWindow) {
       ]
     },
     {
-      label: 'Tools',
+      label: 'View',
       submenu: [
+        {
+          label: 'Toggle Navbar',
+          accelerator: 'CmdOrCtrl+Shift+L',
+          click() {
+            mainWindow.webContents.send('nav.toggle');
+          }
+        },
+        {
+          type: 'separator'
+        },
         {
           label: 'Developer Tools',
           accelerator: 'CmdOrCtrl+Alt+I',

diff --git a/readme.md b/readme.md
@@ -55,11 +55,12 @@ yarn start
 
 ## Shortcuts
 
-| **Shortcut**                    |    **Description**   |
-|---------------------------------|----------------------|
-| <kbd>CmdOrCtrl+Shift+Up</kbd>   | Increase Opacity     |
-| <kbd>CmdOrCtrl+Shift+Down</kbd> | Decrease Opacity     |
-| <kbd>CmdOrCtrl+Alt+I</kbd>      | Show Developer Tools |
+| **Shortcut**                    |    **Description**         |
+|---------------------------------|----------------------------|
+| <kbd>CmdOrCtrl+Shift+L</kbd>    | Toggle Navbar on WebPages  |
+| <kbd>CmdOrCtrl+Shift+Up</kbd>   | Increase Opacity           |
+| <kbd>CmdOrCtrl+Shift+Down</kbd> | Decrease Opacity           |
+| <kbd>CmdOrCtrl+Alt+I</kbd>      | Show Developer Tools       |
 
 ## Screenshots
 

diff --git a/src/components/settings/index.js b/src/components/settings/index.js
@@ -10,14 +10,16 @@ class Settings extends React.Component {
     opacity: ipcRenderer.sendSync('opacity.get')
   };
 
+  // Debounce the setter so to avoid bombarding
+  // electron with the opacity change requests
   setOpacity = debounce((opacity) => {
     ipcRenderer.send('opacity.set', opacity);
-  }, 500);
+  }, 400);
 
   onOpacityChange = (e) => {
     this.setState({
       opacity: e.target.value
-  });
+    });
 
     this.setOpacity(e.target.value);
   };

diff --git a/src/components/web-page/index.js b/src/components/web-page/index.js
@@ -1,15 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as NProgress from 'nprogress';
+
 import './style.scss';
 import NavBar from '../nav-bar';
 
+const { ipcRenderer } = window.require('electron');
+
 class WebPage extends React.Component {
   webView = React.createRef();
   state = {
     url: this.props.url,
+    showNav: true
   };
 
+  /**
+   * Configures the loader and binds it to
+   * the webview
+   */
   configureLoader() {
     NProgress.configure({
       easing: 'ease',
@@ -48,14 +56,31 @@ class WebPage extends React.Component {
     this.webView.current.goForward();
   };
 
+  bindNavBar() {
+    ipcRenderer.on('nav.toggle', () => {
+      this.setState(state => ({
+        showNav: !state.showNav
+      }));
+    });
+  }
+
   componentDidMount() {
     this.configureLoader();
+    this.bindNavBar();
   }
 
   render() {
     return (
       <div className='webpage'>
-        <NavBar url={ this.state.url } onUrl={ this.props.onUrl } onReload={ this.onReload } onBack={ this.onBack } onForward={ this.onForward }/>
+        {
+          this.state.showNav && <NavBar
+            url={ this.state.url }
+            onUrl={ this.props.onUrl }
+            onReload={ this.onReload }
+            onBack={ this.onBack }
+            onForward={ this.onForward }
+          />
+        }
         <webview
           ref={ this.webView }
           id="view"
@@ -73,4 +98,4 @@ WebPage.propTypes = {
   onUrl: PropTypes.func.isRequired
 };
 
-export default WebPage;
+export default WebPage;