uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Seperate electron and web target building

Browse Source
This commit is contained in:
Farkas József
2017-01-20 02:03:27 +01:00
committed by József Farkas
parent 517aed1b1c
commit 983eb72892
276 changed files with 2154 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
shared/src/components/side-menu/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './side-menu.component';

70
shared/src/components/side-menu/side-menu.component.html Normal file
View File

@@ -0,0 +1,70 @@
<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."></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">
<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">
<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>

149
shared/src/components/side-menu/side-menu.component.scss Normal file
View File

@@ -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;
}
}
}
}

75
shared/src/components/side-menu/side-menu.component.ts Normal file
View File

@@ -0,0 +1,75 @@
import { Component, Renderer, animate, state, style, transition, trigger } from '@angular/core';
import { Store } from '@ngrx/store';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Keymap } from '../../config-serializer/config-items/Keymap';
import { Macro } from '../../config-serializer/config-items/Macro';
import { AppState } from '../../store';
import { MacroActions } from '../../store/actions';
import { getKeymapEntities, getMacroEntities } from '../../store/reducers';
@Component({
animations: [
trigger('toggler', [
state('inactive', style({
height: '0px'
})),
state('active', style({
height: '*'
})),
transition('inactive <=> active', animate('500ms ease-out'))
])
],
selector: 'side-menu',
template: require('./side-menu.component.html'),
styles: [require('./side-menu.component.scss')]
})
export class SideMenuComponent {
private keymaps$: Observable<Keymap[]>;
private macros$: Observable<Macro[]>;
private 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(getKeymapEntities())
.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(getMacroEntities())
.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));
});
}
toggleHide(event: Event, type: string) {
let 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());
}
}