Added header component for macro

src/app.module.ts

@@ -7,8 +7,6 @@ import { StoreModule } from '@ngrx/store';
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Component } from 'ng2-select2/ng2-select2';
 
-import { ContenteditableDirective } from './directives/contenteditable';
-
 import { AddOnComponent } from './components/add-on';
 import { KeymapAddComponent, KeymapComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
@@ -17,6 +15,7 @@ import {
     MacroAddComponent,
     MacroComponent,
     MacroDelayTabComponent,
+    MacroHeaderComponent,
     MacroItemComponent,
     MacroKeyTabComponent,
     MacroMouseTabComponent,
@@ -105,6 +104,7 @@ const storeConfig = {
         CaptureKeystrokeButtonComponent,
         IconComponent,
         MacroComponent,
+        MacroHeaderComponent,
         MacroAddComponent,
         MacroItemComponent,
         MacroActionEditorComponent,
@@ -112,7 +112,6 @@ const storeConfig = {
         MacroKeyTabComponent,
         MacroMouseTabComponent,
         MacroTextTabComponent,
-        ContenteditableDirective,
         AddOnComponent,
         SettingsComponent
     ],

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

@@ -0,0 +1,21 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-play"></i>
+        <input class="pane-title__name"
+               value="{{ macro.name }}"
+               (change)="editMacroName($event.target.value)"
+        />
+        <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>

src/components/macro/header/macro-header.component.scss

@@ -0,0 +1,43 @@
+@import '../../../main-app/global-styles';
+
+.macro {
+    &__remove {
+        font-size: 0.75em;
+        top: 8px;
+
+        &:hover {
+            cursor: pointer;
+            color: $icon-hover-delete;
+        }
+    }
+
+    &__duplicate {
+        font-size: 0.75em;
+        top: 7px;
+        margin-right: 15px;
+        position: relative;
+
+        &:hover {
+            cursor: pointer;
+            color: $icon-hover;
+        }
+    }
+}
+
+.pane-title {
+    margin-bottom: 1em;
+
+    &__name {
+        border: none;
+        border-bottom: 2px dotted #999;
+        padding: 0;
+        margin: 0 0.25rem;
+        width: 330px;
+        text-overflow: ellipsis;
+
+        &:focus {
+            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
+            border-color: transparent;
+        }
+    }
+}

src/components/macro/header/macro-header.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+import { Macro } from '../../../config-serializer/config-items/Macro';
+
+@Component({
+    selector: 'macro-header',
+    template: require('./macro-header.component.html'),
+    styles: [require('./macro-header.component.scss')]
+})
+export class MacroHeaderComponent {
+    @Input() macro: Macro;
+
+    constructor() { }
+
+    removeMacro() {
+        // TODO implement
+    }
+
+    duplicateMacro() {
+        // TODO implement
+    }
+
+    /* tslint:disable:no-unused-variable */
+    editMacroName(name: string) {
+        // TODO implement
+    }
+}

src/components/macro/index.ts

@@ -1,5 +1,6 @@
 export * from './macro.component';
 export * from './add/macro-add.component';
+export * from './header/macro-header.component';
 export * from './macro.routes';
 export * from './item';
 export * from './action-editor';

src/components/macro/macro.component.html

@@ -1,14 +1,4 @@
-<div class="row">
+<macro-header [macro]="macro"></macro-header>
-    <h1 class="col-xs-12 pane-title">
-        <i class="fa fa-play"></i>
-        <span class="macro__name pane-title__name"
-                #macroNameInput
-                contenteditable="true"
-                [contenteditableUpdateOnEnter]="true"
-                [(contenteditableModel)]="macro.name"
-                (contenteditableModelChange)="onNameChange()">{{macro.name}}</span>
-    </h1>
-</div>
 <div class="row list-container">
     <div class="col-xs-10 col-xs-offset-1 list-group">
         <div class="macro-actions-container" [dragula]="'macroActions'" [dragulaModel]="macro.macroActions.elements">

src/components/macro/macro.component.ts

@@ -21,7 +21,6 @@ export class MacroComponent implements OnInit, OnDestroy {
     @ViewChildren(MacroItemComponent) macroItems: QueryList<MacroItemComponent>;
 
     private macro: Macro;
-
     private routeSubscription: Subscription;
     private hasChanges: boolean = false;
 
@@ -58,10 +57,6 @@ export class MacroComponent implements OnInit, OnDestroy {
         throw new Error('Macro not found');
     }
 
-    saveMacro() {
-        // @todo Save macro to keyboard
-    }
-
     addAction() {
         this.hideOtherActionEditors(this.macro.macroActions.elements.length);
         this.macro.macroActions.elements.push(undefined);
@@ -81,10 +76,6 @@ export class MacroComponent implements OnInit, OnDestroy {
         });
     }
 
-    onNameChange() {
-        this.hasChanges = true;
-    }
-
     onEditAction(index: number) {
         // Hide other editors when clicking edit button of a macro action
         this.hideOtherActionEditors(index);

src/directives/contenteditable/contenteditable.directive.ts

@@ -1,45 +0,0 @@
-import { Directive, ElementRef, EventEmitter, Input, OnChanges, Output, Renderer, SimpleChanges } from '@angular/core';
-
-const KEY_ENTER = 13;
-
-@Directive({
-  selector: '[contenteditableModel]',
-  host: {
-    '(blur)': 'onBlur()',
-    '(keypress)': 'onKeypress($event)'
-  }
-})
-export class ContenteditableDirective implements OnChanges {
-  @Input('contenteditableModel') model: any;
-  @Input('contenteditableUpdateOnEnter') updateOnEnter: boolean;
-  @Output('contenteditableModelChange') update = new EventEmitter();
-
-  private lastViewModel: any;
-
-  constructor(private elRef: ElementRef, private renderer: Renderer) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes[this.lastViewModel]) {
-      this.lastViewModel = this.model;
-      this.refreshView();
-    }
-  }
-
-  onKeypress(event: any) {
-    if (this.updateOnEnter && (event.which === KEY_ENTER)) {
-      // Finish editing when Enter pressed
-      this.renderer.invokeElementMethod(this.elRef.nativeElement, 'blur');
-      return false;
-    }
-  }
-
-  onBlur() {
-    let value = this.elRef.nativeElement.innerText;
-    this.lastViewModel = value;
-    this.update.emit(value);
-  }
-
-  private refreshView() {
-    this.elRef.nativeElement.innerText = this.model;
-  }
-}

src/directives/contenteditable/index.ts

@@ -1 +0,0 @@
-export { ContenteditableDirective } from './contenteditable.directive';

src/main-app/global-styles.scss

@@ -1 +1,2 @@
 $icon-hover: #337ab7;
+$icon-hover-delete: #900;