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,3 +1,4 @@
+<uhk-header>
     <div class="row">
         <h1 class="col-xs-12 pane-title">
             <i class="fa fa-keyboard-o"></i>
@@ -34,6 +35,8 @@
                data-original-title="Duplicate keymap"
                (click)="duplicateKeymap()"
             ></i>
-        <i class="fa fa-download keymap__download pull-right" title="Download keymap" (click)="onDownloadIconClick()"></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,3 +1,4 @@
+<uhk-header>
     <div class="row">
         <h1 class="col-xs-12 pane-title">
             <i class="fa fa-play"></i>
@@ -22,3 +23,4 @@
             ></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>

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,