Add hide call sidebar option

package.json

@@ -1,6 +1,6 @@
 {
  "name": "voice-desktop-app",
- "version": "1.2.7",
+ "version": "1.2.8",
  "description": "An electron shell wrapper for the google voice app",
  "main": "src/main.js",
  "build": {

src/constants.js

@@ -26,6 +26,7 @@ const DEFAULT_SETTING_SHOW_MENU_BAR   = true;
 const DEFAULT_SETTING_THEME           = 'default';
 const DEFAULT_SETTING_START_MINIMIZED = false;
 const DEFAULT_SETTING_EXIT_ON_CLOSE   = false;
+const DEFAULT_HIDE_DIALER_SIDEBAR     = false;
 
 module.exports = {
     // Strings
@@ -51,5 +52,6 @@ module.exports = {
     DEFAULT_SETTING_SHOW_MENU_BAR,   // Whether the MenuBar of the main application window should be visible
     DEFAULT_SETTING_THEME,           // Default theme to apply
     DEFAULT_SETTING_START_MINIMIZED, // Whether the application should start minimized to the system notification area
-    DEFAULT_SETTING_EXIT_ON_CLOSE    // Whether the application should terminate when the user closes the main application window
+    DEFAULT_SETTING_EXIT_ON_CLOSE,   // Whether the application should terminate when the user closes the main application window
+    DEFAULT_HIDE_DIALER_SIDEBAR      // Whether the dialer sidebar should be hidden or not
 };

src/main.js

@@ -5,7 +5,7 @@ const AutoLaunch = require('auto-launch')
 const contextMenu = require('electron-context-menu');
 const BadgeGenerator = require('./badge_generator');
 const path = require('path');
-const ThemeInjector = require('./utils/themeInjector');
+const CSSInjector = require('./utils/cssInjector');
 const Store = require('electron-store');
 const Url = require('url');
 
@@ -23,7 +23,7 @@ const DEFAULT_HEIGHT = 900;
 // Globals
 let lastNotification = 0;
 let badgeGenerator;
-let themeInjector;
+let cssInjector;
 let tray;
 let win;            // The main application window
 let settingsWindow; // When not null, the "Settings" window, which is currently open
@@ -172,8 +172,10 @@ function createWindow() {
     win.webContents.on('did-finish-load', () => {
         // Re-apply the theme last selected by the user.
         const theme = store.get('prefs.theme') || constants.DEFAULT_SETTING_THEME;
-        themeInjector = new ThemeInjector(app, win);
-        themeInjector.inject(theme);
+        const hideDialerSidebar = store.get('prefs.hideDialerSidebar') || constants.DEFAULT_HIDE_DIALER_SIDEBAR;
+        cssInjector = new CSSInjector(app, win);
+        cssInjector.injectTheme(theme);
+        cssInjector.showHideDialerSidebar(hideDialerSidebar);
     });
 
     // Create our system notification area icon.
@@ -481,7 +483,7 @@ ipcMain.on('pref-change-theme', (event, theme) => {
     console.log(`Theme changed to: ${theme}`);
 
     // Apply the selected them and then save the selection to the user's settings store.
-    themeInjector.inject(theme);
+    cssInjector.injectTheme(theme);
     const prefs = store.get('prefs') || {};
     prefs.theme = theme;
     store.set('prefs', prefs);
@@ -540,4 +542,16 @@ ipcMain.on('pref-change-exit-on-close', (e, exitOnClose) => {
     const prefs = store.get('prefs') || {};
     prefs.exitOnClose = exitOnClose;
     store.set('prefs', prefs);
+});
+
+// Called when the "hide dialer sidebar" checkbox has been checked/unchecked.
+ipcMain.on('pref-change-hide-dialer-sidebar', (e, hideDialerSidebar) => {
+    console.log(`Hide dialer sidebar changed to: ${hideDialerSidebar}`);
+
+    // Apply the new value and then save it to the user's settings store.
+    const prefs = store.get('prefs') || {};
+    prefs.hideDialerSidebar = hideDialerSidebar;
+
+    cssInjector.showHideDialerSidebar(hideDialerSidebar);
+    store.set('prefs', prefs);
 });

src/pages/customize.js

@@ -82,6 +82,15 @@
         ipcRenderer.send('pref-change-exit-on-close', checked);
     });
 
+    // Set the "hide dialer sidebar" checkbox based on the user's currently selected
+    // preference.  Notify the main process whenever the preference changes.
+    const hideDialerSidebar = document.getElementById('hide-dialer-sidebar');
+    hideDialerSidebar.checked = (prefs.hideDialerSidebar != undefined) ? prefs.hideDialerSidebar : constants.DEFAULT_HIDE_DIALER_SIDEBAR;
+    hideDialerSidebar.addEventListener('change', (e) => {
+        const checked = e.target.checked;
+        ipcRenderer.send('pref-change-hide-dialer-sidebar', checked);
+    });
+
     // Close the window if the user clicks the "Close" button.
     const closeButton = document.getElementById('close-button');
     closeButton.addEventListener('click', (e) => {

src/utils/themeInjector.js → src/utils/cssInjector.js

@@ -4,14 +4,29 @@ const path = require('path');
 
 const BASE = `base.scss`;
 const MAPPINGS = `mappings.scss`;
+const HIDE_DIALER_SIDEBAR_CSS = `gv-call-sidebar { display: none }`;
 
 module.exports = class Injector {
     constructor(app, win) {
         this.win = win;
         this.app = app;
     }
 
-    inject(theme) {
+    showHideDialerSidebar(hide) {
+        if (!this.win) return;
+
+        if (hide) {
+            this.win.webContents.insertCSS(HIDE_DIALER_SIDEBAR_CSS).then(key => {
+                this.sidebarStyleKey = key;
+            });
+        } else {
+            if (this.sidebarStyleKey) {
+                this.win.webContents.removeInsertedCSS(this.sidebarStyleKey);
+            }
+        }
+    }
+
+    injectTheme(theme) {
         if (this.styleKey) {
             this.win.webContents.removeInsertedCSS(this.styleKey);
             this.styleKey = null;
@@ -24,6 +39,7 @@ module.exports = class Injector {
                 const result = sass.renderSync({data});
                 const styles = result.css.toString().replace(/;/g, ' !important;');
                 if (this.win) {
+                    console.log(styles);
                     this.win.webContents.insertCSS(styles).then(key => {
                         this.styleKey = key;
                     });