Issue 388 - Device node (#397)

* Issue 388 - Device node (first version before review) (#388)

* fix: style linting issues

* review: revert the same padding size of the level 1 components on the sidebar

* feat(uhk-icon): Create uhk-icon set and fix USB device icon visibility in electron

* style: Use semicolon in js files

CONTRIBUTING.md

@@ -13,3 +13,11 @@ Contributors are most welcome and appreciated beyond words!
 3. We let you know if somebody is already working on the issue, and thank you for being awesome for considering to contribute.
 4. Send a pull request of your contribution. You're welcome to send the PR early on even if it's incomplete. This way, we'll be able to provide early feedback which will save time for everyone involved.
 5. Fix your PR if needed, and make sure that it passes continuous integration tests. If everything looks good we'll merge your PR, and pop a bottle of champagne to celebrate you!
+
+## Add icon to uhk-icon set
+
+1. Copy svg file(s) to packages/uhk-web/src/svgs/icons folder
+2. run `$ npm run sprites`
+
+The icon available as .uhk-icon-<filename without extension> css selector.
+

package-lock.json

@@ -1025,7 +1025,7 @@
       "dev": true,
       "requires": {
         "graceful-fs": "4.1.11",
-        "mkdirp": "0.5.0"
+        "mkdirp": "0.5.1"
       }
     },
     "co": {
@@ -2968,6 +2968,21 @@
             "ms": "0.7.1"
           }
         },
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
+          "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=",
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
         "ms": {
           "version": "0.7.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
@@ -4108,7 +4123,7 @@
       "requires": {
         "graceful-fs": "4.1.11",
         "inherits": "2.0.3",
-        "mkdirp": "0.5.0",
+        "mkdirp": "0.5.1",
         "rimraf": "2.6.1"
       }
     },
@@ -6152,9 +6167,9 @@
       "dev": true
     },
     "mkdirp": {
-      "version": "0.5.0",
+      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "dev": true,
       "requires": {
         "minimist": "0.0.8"
@@ -6257,7 +6272,7 @@
         "glob": "7.1.2",
         "graceful-fs": "4.1.11",
         "minimatch": "3.0.4",
-        "mkdirp": "0.5.0",
+        "mkdirp": "0.5.1",
         "nopt": "3.0.6",
         "npmlog": "4.1.2",
         "osenv": "0.1.4",
@@ -9091,7 +9106,7 @@
         "loader-runner": "2.3.0",
         "loader-utils": "0.2.17",
         "memory-fs": "0.4.1",
-        "mkdirp": "0.5.0",
+        "mkdirp": "0.5.1",
         "node-libs-browser": "2.0.0",
         "source-map": "0.5.7",
         "supports-color": "3.2.3",

package.json

@@ -35,6 +35,7 @@
     "exports-loader": "^0.6.3",
     "file-loader": "^0.10.0",
     "lerna": "^2.0.0",
+    "mkdirp": "0.5.1",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
     "standard-version": "^4.2.0",

packages/uhk-web/src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { deviceRoutes } from './components/device';
 import { addOnRoutes } from './components/add-on';
 import { keymapRoutes } from './components/keymap';
 import { macroRoutes } from './components/macro';
@@ -29,6 +30,7 @@ const appRoutes: Routes = [
         component: MainPage,
         canActivate: [UhkDeviceDisconnectedGuard],
         children: [
+            ...deviceRoutes,
             ...keymapRoutes,
             ...macroRoutes,
             ...addOnRoutes,

packages/uhk-web/src/app/components/device/device.routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+import { DeviceSettingsComponent } from './settings/device-settings.component';
+
+export const deviceRoutes: Routes = [
+    {
+        path: '',
+        redirectTo: 'device',
+        pathMatch: 'full'
+    },
+    {
+        path: 'device/settings',
+        component: DeviceSettingsComponent
+    }
+];

packages/uhk-web/src/app/components/device/index.ts

@@ -0,0 +1,2 @@
+export * from './settings/device-settings.component';
+export * from './device.routes';

packages/uhk-web/src/app/components/device/settings/device-settings.component.html

@@ -0,0 +1,4 @@
+<h1>
+    <i class="fa fa-cog"></i>
+    <span>Device settings...</span>
+</h1>

packages/uhk-web/src/app/components/device/settings/device-settings.component.scss

@@ -0,0 +1,5 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+}

packages/uhk-web/src/app/components/device/settings/device-settings.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'device-settings',
+    templateUrl: './device-settings.component.html',
+    styleUrls: ['./device-settings.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class DeviceSettingsComponent {
+
+    constructor() {}
+
+}

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -1,67 +1,77 @@
 <ul class="menu--top">
-    <li class="sidebar__level-1--item">
+    <li class="sidebar__level-0--item">
-        <div class="sidebar__level-1">
+        <div class="sidebar__level-0">
-            <i class="fa fa-keyboard-o"></i> Keymaps
+            <i class="uhk-icon uhk-icon-0401-usb-stick rotate-right"></i> UHK 60
-            <a [routerLink]="['/keymap/add']" class="btn btn-default pull-right btn-sm">
+            <a [routerLink]="['/device/settings']" class="btn btn-default pull-right btn-sm">
-                <i class="fa fa-plus"></i>
+                    <i class="fa fa-cog"></i>
-            </a>
+                </a>
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'keymap')"></i>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'device')"></i>
         </div>
-        <ul [@toggler]="animation['keymap']">
+        <ul [@toggler]="animation['device']">
-            <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
+
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+            <li class="sidebar__level-1--item">
-                    <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
+                <div class="sidebar__level-1">
-                    <i *ngIf="keymap.isDefault"
+                    <i class="fa fa-keyboard-o"></i> Keymaps
-                       class="fa fa-star sidebar__fav"
+                    <a [routerLink]="['/keymap/add']" class="btn btn-default pull-right btn-sm">
-                       title="This is the default keymap which gets activated when powering the keyboard."
+                                    <i class="fa fa-plus"></i>
-                       data-toggle="tooltip"
+                                </a>
-                       data-placement="bottom"></i>
+                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'keymap')"></i>
                 </div>
+                <ul [@toggler]="animation['keymap']">
+                    <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
+                            <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav" title="This is the default keymap which gets activated when powering the keyboard."
+                                data-toggle="tooltip" data-placement="bottom"></i>
+                        </div>
+                    </li>
+                </ul>
             </li>
-        </ul>
+            <li class="sidebar__level-1--item">
-    </li>
+                <div class="sidebar__level-1">
-    <li class="sidebar__level-1--item">
+                    <i class="fa fa-play"></i> Macros
-        <div class="sidebar__level-1">
+                    <a (click)="addMacro()" class="btn btn-default pull-right btn-sm">
-            <i class="fa fa-play"></i> Macros
+                                    <i class="fa fa-plus"></i>
-            <a (click)="addMacro()" class="btn btn-default pull-right btn-sm">
+                                </a>
-                <i class="fa fa-plus"></i>
+                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
-            </a>
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
-        </div>
-        <ul [@toggler]="animation['macro']">
-            <li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
                 </div>
+                <ul [@toggler]="animation['macro']">
+                    <li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
+                        </div>
+                    </li>
+                </ul>
             </li>
-        </ul>
+            <li class="sidebar__level-1--item" *ngIf="showAddonMenu$ | async">
-    </li>
+                <div class="sidebar__level-1">
-    <li class="sidebar__level-1--item" *ngIf="showAddonMenu$ | async">
+                    <i class="fa fa-puzzle-piece"></i> Add-on modules
-        <div class="sidebar__level-1">
+                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'addon')"></i>
-            <i class="fa fa-puzzle-piece"></i> Add-on modules
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'addon')"></i>
-        </div>
-        <ul [@toggler]="animation['addon']">
-            <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a>
-                </div>
-            </li>
-            <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/add-on', 'Trackball']">Trackball</a>
-                </div>
-            </li>
-            <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a>
-                </div>
-            </li>
-            <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a>
                 </div>
+                <ul [@toggler]="animation['addon']">
+                    <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a>
+                        </div>
+                    </li>
+                    <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/add-on', 'Trackball']">Trackball</a>
+                        </div>
+                    </li>
+                    <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a>
+                        </div>
+                    </li>
+                    <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a>
+                        </div>
+                    </li>
+                </ul>
             </li>
+
         </ul>
     </li>
 </ul>

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -27,8 +27,15 @@ ul {
 }
 
 .sidebar {
-    &__level-1 {
+    &__level-0 {
         padding: 0.5rem 1rem;
+    }
+    &__level-1 {
+        padding: 0.5rem 1rem 0.5rem 2rem;
+    }
+
+    &__level-0 ,
+    &__level-1 {
         font-size: 2rem;
         line-height: 3rem;
         cursor: default;
@@ -48,11 +55,6 @@ ul {
             }
         }
 
-        .sidebar__name {
-            width: 100%;
-            display: block;
-        }
-
         .fa-chevron-up,
         .fa-chevron-down {
             margin-right: 1rem;
@@ -111,6 +113,7 @@ ul {
     }
 
     // General hover over menu items.
+    &__level-0,
     &__level-1,
     &__level-2 {
         &:hover {

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -41,6 +41,7 @@ export class SideMenuComponent {
 
     constructor(private store: Store<AppState>, private renderer: Renderer) {
         this.animation = {
+            device: 'active',
             keymap: 'active',
             macro: 'active',
             addon: 'active'

packages/uhk-web/src/app/web.module.ts

@@ -15,6 +15,7 @@ import { Select2Module } from 'ng2-select2/ng2-select2';
 import { MainAppComponent } from './app.component';
 import { AddOnComponent } from './components/add-on';
 import { KeyboardSliderComponent } from './components/keyboard/slider';
+import { DeviceSettingsComponent } from './components/device';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
 import {
@@ -106,6 +107,7 @@ import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.gua
 @NgModule({
     declarations: [
         MainAppComponent,
+        DeviceSettingsComponent,
         KeymapEditComponent,
         KeymapHeaderComponent,
         NotificationComponent,

packages/uhk-web/src/styles.scss

@@ -3,6 +3,21 @@
 @import '~angular-notifier/styles';
 @import '~font-awesome/scss/font-awesome';
 @import './styles/tooltip';
+@import './styles/uhk-icons/uhk-icon';
+
+.uhk-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-size: auto 100%;
+    vertical-align: text-bottom;
+}
+
+.rotate-right {
+    -ms-transform: rotate(90deg); /* IE 9 */
+    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
+    transform: rotate(90deg); // svg not aligned properly
+}
 
 .select2-container--default .select2-selection--single .select2-selection__rendered {
     line-height: 26px;

packages/uhk-web/src/styles/_variables.scss

@@ -1,4 +1,5 @@
 $fa-font-path : '../node_modules/font-awesome/fonts';
+$uhk-icon-path: 'styles/uhk-icons/uhk-css.svg';
 
 $dark-grey: #ccc;
 

packages/uhk-web/src/styles/uhk-icons/uhk-css.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" viewBox="0 0 16 16" id="icon-0401-usb-stick" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM8.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/><path d="M11.5 5H11V.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5V5h-.5a.5.5 0 0 0-.5.5v9.375c1 1.5 8 1.5 9 0V5.5a.5.5 0 0 0-.5-.5zM5 13.5a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0v6zM10 5H5V1h5v4z"/></svg></svg>

packages/uhk-web/src/styles/uhk-icons/uhk-icon.scss

@@ -0,0 +1,8 @@
+%svg-common {
+    background: url($uhk-icon-path) no-repeat;
+}
+
+.uhk-icon-0401-usb-stick {
+    @extend %svg-common;
+    background-position: 0 0;
+}

packages/uhk-web/src/svgs/icons/0401-usb-stick.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M6.5 2c-0.276 0-0.5 0.224-0.5 0.5v1c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-1c0-0.276-0.224-0.5-0.5-0.5z"></path>
+<path fill="#000000" d="M8.5 2c-0.276 0-0.5 0.224-0.5 0.5v1c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-1c0-0.276-0.224-0.5-0.5-0.5z"></path>
+<path fill="#000000" d="M11.5 5h-0.5v-4.5c0-0.276-0.224-0.5-0.5-0.5h-6c-0.276 0-0.5 0.224-0.5 0.5v4.5h-0.5c-0.276 0-0.5 0.224-0.5 0.5v9.375c1 1.5 8 1.5 9 0v-9.375c0-0.276-0.224-0.5-0.5-0.5zM5 13.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-6c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v6zM10 5h-5v-4h5v4z"></path>
+</svg>

packages/uhk-web/src/svgs/icons/scss-template.mustache

@@ -0,0 +1,10 @@
+%{{commonName}} {
+    background: url($uhk-icon-path) no-repeat;
+}
+{{#shapes}}
+
+{{#selector.shape}}{{expression}}{{^last}},{{/last}}{{/selector.shape}} {
+    @extend %{{commonName}};
+    background-position: {{position.relative.xy}};
+}
+{{/shapes}}

scripts/generate-svg-sprites.js

@@ -2,8 +2,8 @@ const SVGSpriter = require('svg-sprite');
 const path = require('path');
 const mkdirp = require('mkdirp');
 const fs = require('fs');
-const config = {
+let config = {
-    "dest": "packages/web/src/assets/",
+    'dest': 'packages/uhk-web/src/assets/',
     log: 'verbose',
     'shape': {
         'id': {
@@ -17,18 +17,68 @@ const config = {
             'inline': true,
             'dest': './',
             'sprite': 'compiled_sprite.svg',
-            bust:false
+            bust: false
         }
     }
 };
-const spriter = new SVGSpriter(config);
 
-// Register some SVG files with the spriter
+let spriter = new SVGSpriter(config);
-addInputSvgs(path.join(__dirname, '../packages/web/src/svgs'));
 
+// Register Keyboard SVG files with the spriter
+addInputSvgs(path.join(__dirname, '../packages/uhk-web/src/svgs/keyboard'));
 // Compile the sprite
-spriter.compile(function (error, result, cssData) {
+spriter.compile(writeResultFiles);
 
+// Register scss icon
+config = {
+    'dest': 'packages/uhk-web/src/styles/uhk-icons/',
+    log: 'verbose',
+    'shape': {
+        'id': {
+            'generator': function (name) {
+                return 'icon-' + path.basename(name).slice(0, -4);
+            }
+        }
+    },
+    'mode': {
+        'css': {
+            'dest': './',
+            prefix: '.uhk-%s',
+            sprite: 'uhk-css.svg',
+            bust: false,
+            render: {
+                scss: {
+                    template: './packages/uhk-web/src/svgs/icons/scss-template.mustache',
+                    dest: './uhk-icon.scss'
+                }
+            },
+            dimensions: false
+        }
+    }
+};
+
+spriter = new SVGSpriter(config);
+addInputSvgs(path.join(__dirname, '../packages/uhk-web/src/svgs/icons'));
+spriter.compile(writeResultFiles);
+
+// Helper functions
+function addInputSvgs (dir) {
+    fs.readdirSync(dir).forEach(file => {
+        const fullPath = path.join(dir, file);
+        const stat = fs.statSync(fullPath);
+        if (stat.isDirectory()) {
+            return addInputSvgs(fullPath);
+        }
+        if (path.extname(file) === '.svg') {
+            spriter.add(fullPath, file, fs.readFileSync(fullPath, {encoding: 'utf-8'}));
+        }
+    });
+}
+
+function writeResultFiles (error, result) {
+    if (error) {
+        return console.error(error);
+    }
     // Run through all configured output modes
     for (const mode in result) {
 
@@ -38,18 +88,4 @@ spriter.compile(function (error, result, cssData) {
             fs.writeFileSync(result[mode][type].path, result[mode][type].contents);
         }
     }
-});
-
-function addInputSvgs(dir) {
-    fs.readdirSync(dir).forEach(file => {
-        const fullPath = path.join(dir, file);
-        const stat = fs.statSync(fullPath);
-        if (stat.isDirectory()) {
-            return addInputSvgs(fullPath)
-        }
-        if (path.extname(file) === '.svg') {
-            spriter.add(fullPath, file, fs.readFileSync(fullPath, { encoding: 'utf-8' }));
-        }
-    });
-
 }