refactore: create feature modules (#387)
* add @angular/cli to the project * increase nodejs version -> 8.2.1 * add lerna * merge web and shared module * move electron module into packages as uhk-agent Electron agent functionality is not working * delete symlinker * convert private properties to public of component if used in html * revert uhk-message.component * fix component path * fix the correct name of the uhk-message.component.scss * building web and electron module * delete uhk-renderer package * handle device connect disconnect state * add privilege detection * fix set privilege functionality * turn back download keymap functionality * add bootstrap, select2 js and fix null pointer exception * turn back upload data to keyboard * fix send keymap * fix test-serializer * add missing package.json * merging * fix appveyor build * fix linting * turn back electron storage service * commit the missing electron-datastorage-repository * update node to 8.3.0 in .nvmrc and log node version in appveyor build * set exact version number in appveyor build * vertical align privilege and missing device components * set back node version to 8 in appveyor * move node-usb dependency from usb dir to root maybe it is fix the appveyor build * revert usb to root * fix electron builder script * fix electron builder script * turn off electron devtools * remove CTRL+U functionality * fix CTRL+o * fix lint error * turnoff store freeze * start process when got `Error: EPERM: operation not permitted` error * move files from root usb dir -> packages/usb
This commit is contained in:
Róbert Kiss
committed by
László Monda
László Monda
parent
97770f67c0
commit
0f558e4132
1
packages/uhk-web/src/app/components/side-menu/index.ts
Normal file
1
packages/uhk-web/src/app/components/side-menu/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './side-menu.component';
|
||||
@@ -0,0 +1,74 @@
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<ul class="menu--bottom" *ngIf="runInElectron$ | async">
|
||||
<li class="sidebar__level-1--item" [routerLinkActive]="['active']">
|
||||
<a class="sidebar__level-1" [routerLink]="['/settings']">
|
||||
<i class="fa fa-gear"></i> Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,149 @@
|
||||
:host {
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #ccc;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// General list styles for the sidebar-menu.
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
&__level-1 {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
.fa-chevron-up,
|
||||
.fa-chevron-down {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&--item {
|
||||
margin-top: 0;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__name {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fa-chevron-up,
|
||||
.fa-chevron-down {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
top: 0.5rem;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&__level-2 {
|
||||
|
||||
&--item {
|
||||
padding: 0 20px 0 0;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
|
||||
.fa-star {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// General "right side" icon theming.
|
||||
.fa.pull-right {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 15px 0 30px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// General hover over menu items.
|
||||
&__level-1,
|
||||
&__level-2 {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
}
|
||||
|
||||
&__fav {
|
||||
position: absolute;
|
||||
right: 19px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu--bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.sidebar {
|
||||
&__level-1 {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Component, Renderer } from '@angular/core';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/let';
|
||||
|
||||
import { Keymap } from '../../config-serializer/config-items/keymap';
|
||||
import { Macro } from '../../config-serializer/config-items/macro';
|
||||
|
||||
import { AppState, showAddonMenu, runningInElectron } from '../../store';
|
||||
import { MacroActions } from '../../store/actions';
|
||||
import { getKeymaps, getMacros } from '../../store/reducers/user-configuration';
|
||||
|
||||
@Component({
|
||||
animations: [
|
||||
trigger('toggler', [
|
||||
state('inactive', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('active', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('inactive <=> active', animate('500ms ease-out'))
|
||||
])
|
||||
],
|
||||
selector: 'side-menu',
|
||||
templateUrl: './side-menu.component.html',
|
||||
styleUrls: ['./side-menu.component.scss']
|
||||
})
|
||||
export class SideMenuComponent {
|
||||
showAddonMenu$: Observable<boolean>;
|
||||
runInElectron$: Observable<boolean>;
|
||||
|
||||
keymaps$: Observable<Keymap[]>;
|
||||
macros$: Observable<Macro[]>;
|
||||
animation: { [key: string]: 'active' | 'inactive' };
|
||||
|
||||
constructor(private store: Store<AppState>, private renderer: Renderer) {
|
||||
this.animation = {
|
||||
keymap: 'active',
|
||||
macro: 'active',
|
||||
addon: 'active'
|
||||
};
|
||||
|
||||
this.keymaps$ = store.let(getKeymaps())
|
||||
.map(keymaps => keymaps.slice()) // Creating a new array reference, because the sort is working in place
|
||||
.do((keymaps: Keymap[]) => {
|
||||
keymaps.sort((first: Keymap, second: Keymap) => first.name.localeCompare(second.name));
|
||||
});
|
||||
|
||||
this.macros$ = store.let(getMacros())
|
||||
.map(macros => macros.slice()) // Creating a new array reference, because the sort is working in place
|
||||
.do((macros: Macro[]) => {
|
||||
macros.sort((first: Macro, second: Macro) => first.name.localeCompare(second.name));
|
||||
});
|
||||
|
||||
this.showAddonMenu$ = this.store.select(showAddonMenu);
|
||||
this.runInElectron$ = this.store.select(runningInElectron);
|
||||
}
|
||||
|
||||
toggleHide(event: Event, type: string) {
|
||||
const header: DOMTokenList = (<Element>event.target).classList;
|
||||
let show = false;
|
||||
|
||||
if (header.contains('fa-chevron-down')) {
|
||||
show = true;
|
||||
this.animation[type] = 'active';
|
||||
} else {
|
||||
this.animation[type] = 'inactive';
|
||||
}
|
||||
|
||||
this.renderer.setElementClass(event.target, 'fa-chevron-up', show);
|
||||
this.renderer.setElementClass(event.target, 'fa-chevron-down', !show);
|
||||
}
|
||||
|
||||
addMacro() {
|
||||
this.store.dispatch(MacroActions.addMacro());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user