Add shortcut for devtools, some styling.

src/common/constants.ts

@@ -10,6 +10,7 @@ export const SET_INPUT_DEVICE_ID = 'SET_INPUT_DEVICE_ID';
 export const SET_GAIN = 'SET_GAIN';
 export const TOGGLE_NORMALIZATION = 'TOGGLE_NORMALIZATION';
 export const TOGGLE_FULLSCREEN = 'TOGGLE_FULLSCREEN';
+export const TOGGLE_DEVTOOLS = 'TOGGLE_DEVTOOLS';
 
 /**
  * App settings

src/main/index.ts

@@ -70,3 +70,7 @@ ipcMain.on(TOGGLE_FULLSCREEN, () => {
     fullscreen = !fullscreen;
     mainWindow.setFullScreen(fullscreen);
 });
+
+ipcMain.on(TOGGLE_FULLSCREEN, () => {
+    mainWindow.webContents.toggleDevTools();
+});

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SKQW",
-  "version": "0.0.1",
+  "version": "1.0.0-alpha.1",
   "description": "Audio Visualizer",
   "main": "index.js",
   "scripts": {

src/render/app.component.ts

@@ -1,7 +1,7 @@
 import {Component, ChangeDetectorRef, ViewChild, HostListener} from '@angular/core';
 import {
     START_ANALYZER, SAMPLE, REQUEST_DEVICE_LIST, RECEIVE_DEVICE_LIST, SET_INPUT_DEVICE_ID,
-    SET_GAIN, TOGGLE_NORMALIZATION, MAX_GAIN, MIN_GAIN, TOGGLE_FULLSCREEN
+    SET_GAIN, TOGGLE_NORMALIZATION, MAX_GAIN, MIN_GAIN, TOGGLE_FULLSCREEN, TOGGLE_DEVTOOLS
 } from '../common/constants';
 import {Visualizer} from './components/visualizer/visualizer.component';
 import {SettingsPanel} from './components/settings-panel/settings-panel.component';
@@ -47,11 +47,6 @@ export class App {
                 this.state.setGain(data.gain);
             }
         });
-        storage.get('gain', (err, data) => {
-            if (data.gain) {
-                this.state.setGain(data.gain);
-            }
-        });
     }
 
     ngOnInit(): void {
@@ -112,6 +107,10 @@ export class App {
             // Handle alt + F - toggle fullscreen.
             ipcRenderer.send(TOGGLE_FULLSCREEN);
         }
+        if (e.ctrlKey=== true && e.shiftKey && e.which === 73) {
+            // Handle ctrl + shift + i - toggle devtools.
+            ipcRenderer.send(TOGGLE_DEVTOOLS);
+        }
         if (e.which === 38) {
             // increase the gain
             const newValue = this.state.getValue().gain + 1;

src/render/components/settings-group/settings-group.component.html

@@ -5,7 +5,7 @@
        </div>
     </div>
 
-    <div class="group-content" [style.maxHeight.px]="contentHeight">
+    <div class="group-content">
         <div class="content-wrapper" #wrapper>
             <ng-content></ng-content>
         </div>

src/render/components/settings-group/settings-group.component.ts

@@ -10,35 +10,13 @@ export class SettingsGroup {
     @Input() groupTitle: string;
     @Input() visible: boolean = false;
     @ViewChild('wrapper') wrapper: ElementRef;
-    private contentHeight: number = 0;
     private icon_caret = require('!!svg-inline!../../../assets/icons/keyboard_arrow_down.svg');
-
-    ngAfterViewInit(): void {
-        if (this.visible) {
-            setTimeout(() => this.contentHeight = outerHeight(this.wrapper.nativeElement), 10);
-        }
-    }
 
     toggle(): void {
         if (this.visible) {
-            this.contentHeight = 0;
             this.visible = false;
         } else {
-            this.contentHeight = outerHeight(this.wrapper.nativeElement);
             this.visible = true;
         }
     }
 }
-
-/**
- * Returns the height of an element including padding and margins.
- */
-function outerHeight(element: HTMLElement): number {
-    let style = window.getComputedStyle(element);
-    let height = element.offsetHeight;
-    let margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
-    let padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
-    let border = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-    return height + margin + padding + border + 10;
-}
-

src/render/components/settings-group/settings-group.scss

@@ -32,6 +32,10 @@
     padding: 3px 0 0 6px;
   }
 
+  &.visible .group-content {
+    max-height: 500px;
+  }
+
   > .group-content {
 
     max-height: 0;

src/render/components/settings-panel/settings-panel.component.html

@@ -36,12 +36,13 @@
 
         <settings-group groupTitle="Keyboard Shortcuts">
             <ul class="shortcuts">
-                <li><code>▲</code> - Increase gain</li>
-                <li><code>▼</code> - Decrease gain</li>
-                <li><code>►</code> - Load next visualization</li>
-                <li><code>◄</code> - Load previous visualization</li>
-                <li><code>alt</code> + <code>r</code> - Reload current visualization</li>
-                <li><code>alt</code> + <code>f</code> - Toggle full screen mode</li>
+                <li><code>▲</code> <span class="key">Increase gain</span></li>
+                <li><code>▼</code> <span class="key">Decrease gain</span></li>
+                <li><code>►</code> <span class="key">Load next visualization</span></li>
+                <li><code>◄</code> <span class="key">Load previous visualization</span></li>
+                <li><code>alt</code> + <code>r</code> <span class="key">Reload current visualization</span></li>
+                <li><code>alt</code> + <code>f</code> <span class="key">Toggle full screen mode</span></li>
+                <li><code>ctrl</code> + <code>shift</code> + <code>i</code> <span class="key">Toggle developer tools</span></li>
             </ul>
         </settings-group>
 

src/render/components/settings-panel/settings-panel.scss

@@ -56,8 +56,13 @@ ul.shortcuts {
   code {
     color: #333;
     padding: 2px 6px;
-    background-color: rgba(200, 200, 200, 0.8);
+    background-color: rgba(150, 150, 150, 0.8);
     border-radius: 2px;
-    border: 1px solid rgb(150, 150, 150);
+    border: 1px solid rgb(100, 100, 100);
+    font-weight: bold;
+  }
+
+  .key {
+    margin-left: 15px;
   }
 }