feat(ui): macro ui improvement (#473)

* Remove the "Input the text you want to type with this macro action." sentence from the type text macro action.

* Move pointer and Scroll enhancement

* remove the extra vertical space above the mouse buttons

* macro delay enhancement

* not allow user select on a few elements

* fill the macro, keymap name the all space in the header

packages/uhk-web/src/app/components/macro/header/macro-header.component.html

@@ -7,7 +7,7 @@
                    type="text"
                    (change)="editMacroName($event.target.value)"
                    (keyup.enter)="macroName.blur()"
-            />
+                   (keyup)="calculateHeaderTextWidth($event.target.value)">
             <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
                data-toggle="tooltip"
                data-placement="bottom"

packages/uhk-web/src/app/components/macro/header/macro-header.component.scss

@@ -32,7 +32,6 @@
         border-bottom: 2px dotted #999;
         padding: 0;
         margin: 0 0.25rem;
-        width: 330px;
         text-overflow: ellipsis;
 
         &:focus {

packages/uhk-web/src/app/components/macro/header/macro-header.component.ts

@@ -3,6 +3,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
+    HostListener,
     Input,
     OnChanges,
     Renderer2,
@@ -13,7 +14,8 @@ import { Store } from '@ngrx/store';
 import { Macro } from 'uhk-common';
 
 import { MacroActions } from '../../../store/actions';
-import { AppState } from '../../../store/index';
+import { AppState } from '../../../store';
+import * as util from '../../../util';
 
 @Component({
     selector: 'macro-header',
@@ -43,6 +45,11 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
         }
     }
 
+    @HostListener('window:resize')
+    windowResize(): void {
+        this.calculateHeaderTextWidth(this.macro.name);
+    }
+
     removeMacro() {
         this.store.dispatch(MacroActions.removeMacro(this.macro.id));
     }
@@ -60,12 +67,20 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
         this.store.dispatch(MacroActions.editMacroName(this.macro.id, name));
     }
 
+    calculateHeaderTextWidth(text): void {
+        const htmlInput = this.macroName.nativeElement as HTMLInputElement;
+        const maxWidth = htmlInput.parentElement.offsetWidth * 0.8;
+        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
+        this.renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
+    }
+
     private setFocusOnName() {
         this.macroName.nativeElement.select();
     }
 
     private setName(): void {
         this.renderer.setProperty(this.macroName.nativeElement, 'value', this.macro.name);
+        this.calculateHeaderTextWidth(this.macro.name);
     }
 
 }