refactor: Create uhk-header component (#354)

Create a header wrapper component that will contains the undo
notification component.

electron/src/app.module.ts

@@ -105,7 +105,8 @@ import { ElectronErrorHandlerService } from './services/electron-error-handler.s
 import { AppUpdateRendererService } from './services/app-update-renderer.service';
 import { reducer } from './store';
 import { AutoUpdateSettings } from './shared/components/auto-update-settings/auto-update-settings';
-import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-config';
+import { angularNotifierConfig } from './shared/models/angular-notifier-config';
+import { UhkHeader } from './shared/components/uhk-header/uhk-header';
 
 @NgModule({
     declarations: [
@@ -163,7 +164,8 @@ import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-
         TooltipDirective,
         SafeStylePipe,
         UpdateAvailableComponent,
-        AutoUpdateSettings
+        AutoUpdateSettings,
+        UhkHeader
     ],
     imports: [
         BrowserModule,

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

@@ -1,39 +1,42 @@
-<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"
+<uhk-header>
+    <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>
-        <i class="fa fa-download keymap__download pull-right" title="Download keymap" (click)="onDownloadIconClick()"></i>
-    </h1>
-</div>
+            <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>
+            <i class="fa fa-download keymap__download pull-right" title="Download keymap"
+               (click)="onDownloadIconClick()"></i>
+        </h1>
+    </div>
+</uhk-header>

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

@@ -1,24 +1,26 @@
-<div class="row">
-    <h1 class="col-xs-12 pane-title">
-        <i class="fa fa-play"></i>
-        <input #macroName cancelable
-                class="pane-title__name"
-                type="text"
-                value="{{ macro.name }}"
-               (change)="editMacroName($event.target.value)"
-               (keyup.enter)="macroName.blur()"
-        />
-        <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
-           data-toggle="tooltip"
-           data-placement="left"
-           data-original-title="Remove macro"
-           (click)="removeMacro()"
-        ></i>
-        <i class="fa fa-files-o macro__duplicate pull-right" title=""
-           data-toggle="tooltip"
-           data-placement="left"
-           data-original-title="Duplicate macro"
-           (click)="duplicateMacro()"
-        ></i>
-    </h1>
-</div>
+<uhk-header>
+    <div class="row">
+        <h1 class="col-xs-12 pane-title">
+            <i class="fa fa-play"></i>
+            <input #macroName cancelable
+                   class="pane-title__name"
+                   type="text"
+                   value="{{ macro.name }}"
+                   (change)="editMacroName($event.target.value)"
+                   (keyup.enter)="macroName.blur()"
+            />
+            <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
+               data-toggle="tooltip"
+               data-placement="left"
+               data-original-title="Remove macro"
+               (click)="removeMacro()"
+            ></i>
+            <i class="fa fa-files-o macro__duplicate pull-right" title=""
+               data-toggle="tooltip"
+               data-placement="left"
+               data-original-title="Duplicate macro"
+               (click)="duplicateMacro()"
+            ></i>
+        </h1>
+    </div>
+</uhk-header>

shared/src/components/macro/not-found/macro-not-found.component.html

@@ -1,3 +1,4 @@
+<uhk-header></uhk-header>
 <div class="not-found">
     You don't have any macros. Try to add one!
-</div>
+</div>

shared/src/components/uhk-header/uhk-header.html

@@ -0,0 +1,3 @@
+<div>
+    <ng-content></ng-content>
+</div>

shared/src/components/uhk-header/uhk-header.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'uhk-header',
+    templateUrl: './uhk-header.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UhkHeader {
+}

web/src/app.module.ts

@@ -86,7 +86,8 @@ import { DefaultUserConfigurationService } from './shared/services/default-user-
 import { reducer } from './shared/store/reducers/index';
 import { LogService } from './shared/services/logger.service';
 import { AutoUpdateSettings } from './shared/components/auto-update-settings/auto-update-settings';
-import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-config';
+import { angularNotifierConfig } from './shared/models/angular-notifier-config';
+import { UhkHeader } from './shared/components/uhk-header/uhk-header';
 
 @NgModule({
     declarations: [
@@ -139,7 +140,8 @@ import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-
         CancelableDirective,
         TooltipDirective,
         SafeStylePipe,
-        AutoUpdateSettings
+        AutoUpdateSettings,
+        UhkHeader
     ],
     imports: [
         BrowserModule,