Seperate electron and web target building

shared/src/components/keymap/header/keymap-header.component.html

@@ -0,0 +1,38 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-keyboard-o"></i>
+        <input #name cancelable
+                class="keymap__name pane-title__name"
+                type="text"
+                value="{{ keymap.name }}"
+                (change)="editKeymapName($event.target.value)"
+                (keyup.enter)="name.blur()"
+        /> keymap
+        (<input #abbr cancelable
+                class="keymap__abbrev pane-title__abbrev"
+                type="text"
+                value="{{ keymap.abbreviation }}"
+                (change)="editKeymapAbbr($event.target.value)"
+                (keyup.enter)="abbr.blur()"
+                [attr.maxLength]="3"
+        />)
+        <i class="fa keymap__is-default"
+           [ngClass]="{'fa-star-o': !keymap.isDefault, 'fa-star': keymap.isDefault}"
+           [title]="starTitle"
+           (click)="setDefault()"
+        ></i>
+        <i class="glyphicon glyphicon-trash keymap__remove pull-right" [title]="trashTitle"
+            [class.disabled]="!deletable"
+            data-toggle="tooltip"
+            data-placement="left"
+            data-original-title="Remove keymap"
+            (click)="removeKeymap()"
+        ></i>
+        <i class="fa fa-files-o keymap__duplicate pull-right" title=""
+           data-toggle="tooltip"
+           data-placement="left"
+           data-original-title="Duplicate keymap"
+           (click)="duplicateKeymap()"
+        ></i>
+    </h1>
+</div>

shared/src/components/keymap/header/keymap-header.component.scss

@@ -0,0 +1,71 @@
+@import '../../../global-styles';
+
+:host {
+    display: block;
+}
+
+.keymap {
+    &__is-default {
+
+        &.fa-star-o {
+            cursor: pointer;
+
+            &:hover {
+                color: $icon-hover;
+            }
+        }
+    }
+
+    &__remove {
+        font-size: 0.75em;
+        top: 8px;
+
+        &:not(.disabled):hover {
+            cursor: pointer;
+            color: $icon-hover-delete;
+        }
+
+        &.disabled {
+            opacity: 0.25;
+        }
+    }
+
+    &__duplicate {
+        font-size: 0.75em;
+        top: 7px;
+        margin-right: 15px;
+        position: relative;
+
+        &:hover {
+            cursor: pointer;
+            color: $icon-hover;
+        }
+    }
+}
+
+.pane-title {
+    margin-bottom: 1em;
+
+    &__name,
+    &__abbrev {
+        border: none;
+        border-bottom: 2px dotted #999;
+        padding: 0;
+        margin: 0 0.25rem;
+
+        &:focus {
+            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
+            border-color: transparent;
+        }
+    }
+
+    &__name {
+        width: 290px;
+        text-overflow: ellipsis;
+    }
+
+    &__abbrev {
+        width: 90px;
+        text-align: center;
+    }
+}

shared/src/components/keymap/header/keymap-header.component.ts

@@ -0,0 +1,90 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    Renderer,
+    SimpleChanges,
+    ViewChild
+} from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { Keymap } from '../../../config-serializer/config-items/Keymap';
+
+import { AppState } from '../../../store';
+import { KeymapActions } from '../../../store/actions';
+
+@Component({
+    selector: 'keymap-header',
+    template: require('./keymap-header.component.html'),
+    styles: [require('./keymap-header.component.scss')],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class KeymapHeaderComponent implements OnChanges {
+    @Input() keymap: Keymap;
+    @Input() deletable: boolean;
+
+    @ViewChild('name') keymapName: ElementRef;
+    @ViewChild('abbr') keymapAbbr: ElementRef;
+
+    private starTitle: string;
+    private trashTitle: string;
+
+    constructor(private store: Store<AppState>, private renderer: Renderer) { }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['keymap']) {
+            this.setKeymapTitle();
+        }
+        if (changes['deletable']) {
+            this.setTrashTitle();
+        }
+    }
+
+    setDefault() {
+        if (!this.keymap.isDefault) {
+            this.store.dispatch(KeymapActions.setDefault(this.keymap.abbreviation));
+        }
+    }
+
+    removeKeymap() {
+        if (this.deletable) {
+            this.store.dispatch(KeymapActions.removeKeymap(this.keymap.abbreviation));
+        }
+    }
+
+    duplicateKeymap() {
+        this.store.dispatch(KeymapActions.duplicateKeymap(this.keymap));
+    }
+
+    editKeymapName(name: string) {
+        if (name.length === 0) {
+            this.renderer.setElementProperty(this.keymapName.nativeElement, 'value', this.keymap.name);
+            return;
+        }
+
+        this.store.dispatch(KeymapActions.editKeymapName(this.keymap.abbreviation, name));
+    }
+
+    editKeymapAbbr(newAbbr: string) {
+        if (newAbbr.length !== 3) {
+            this.renderer.setElementProperty(this.keymapAbbr.nativeElement, 'value', this.keymap.abbreviation);
+            return;
+        }
+
+        newAbbr = newAbbr.toUpperCase();
+        this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.abbreviation, newAbbr));
+    }
+
+    setKeymapTitle(): void {
+        this.starTitle = this.keymap.isDefault
+            ? 'This is the default keymap which gets activated when powering the keyboard.'
+            : 'Makes this keymap the default keymap which gets activated when powering the keyboard.';
+    }
+
+    setTrashTitle(): void {
+        this.trashTitle = this.deletable ? '' : 'The last keymap cannot be deleted.';
+    }
+}