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

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">
-        <div class="sidebar__level-1">
-            <i class="fa fa-keyboard-o"></i> Keymaps
-            <a [routerLink]="['/keymap/add']" class="btn btn-default pull-right btn-sm">
-                <i class="fa fa-plus"></i>
-            </a>
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'keymap')"></i>
+    <li class="sidebar__level-0--item">
+        <div class="sidebar__level-0">
+            <i class="uhk-icon uhk-icon-0401-usb-stick rotate-right"></i> UHK 60
+            <a [routerLink]="['/device/settings']" class="btn btn-default pull-right btn-sm">
+                    <i class="fa fa-cog"></i>
+                </a>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'device')"></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>
+        <ul [@toggler]="animation['device']">
+
+            <li class="sidebar__level-1--item">
+                <div class="sidebar__level-1">
+                    <i class="fa fa-keyboard-o"></i> Keymaps
+                    <a [routerLink]="['/keymap/add']" class="btn btn-default pull-right btn-sm">
+                                    <i class="fa fa-plus"></i>
+                                </a>
+                    <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>
-    <li class="sidebar__level-1--item">
-        <div class="sidebar__level-1">
-            <i class="fa fa-play"></i> Macros
-            <a (click)="addMacro()" class="btn btn-default pull-right btn-sm">
-                <i class="fa fa-plus"></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>
+            <li class="sidebar__level-1--item">
+                <div class="sidebar__level-1">
+                    <i class="fa fa-play"></i> Macros
+                    <a (click)="addMacro()" class="btn btn-default pull-right btn-sm">
+                                    <i class="fa fa-plus"></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>
+                    </li>
+                </ul>
             </li>
-        </ul>
-    </li>
-    <li class="sidebar__level-1--item" *ngIf="showAddonMenu$ | async">
-        <div class="sidebar__level-1">
-            <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>
+            <li class="sidebar__level-1--item" *ngIf="showAddonMenu$ | async">
+                <div class="sidebar__level-1">
+                    <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>
+                    </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/assets/images/icon-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/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}}