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
This commit is contained in:
Attila Csanyi
committed by
László Monda
László Monda
parent
accdf5facd
commit
c135aed7c9
15
packages/uhk-web/src/app/components/device/device.routes.ts
Normal file
15
packages/uhk-web/src/app/components/device/device.routes.ts
Normal file
@@ -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
|
||||
}
|
||||
];
|
||||
2
packages/uhk-web/src/app/components/device/index.ts
Normal file
2
packages/uhk-web/src/app/components/device/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './settings/device-settings.component';
|
||||
export * from './device.routes';
|
||||
@@ -0,0 +1,4 @@
|
||||
<h1>
|
||||
<i class="fa fa-cog"></i>
|
||||
<span>Device settings...</span>
|
||||
</h1>
|
||||
@@ -0,0 +1,5 @@
|
||||
:host {
|
||||
overflow-y: auto;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -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() {}
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user