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/keymap/header/keymap-header.component.ts

@@ -3,6 +3,7 @@ import {
     Component,
     ElementRef,
     EventEmitter,
+    HostListener,
     Input,
     OnChanges,
     Output,
@@ -16,6 +17,7 @@ import { Store } from '@ngrx/store';
 
 import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
+import * as util from '../../../util';
 
 const DEFAULT_TRASH_TITLE = '<span class="text-nowrap">Delete keymap</span>';
 
@@ -50,6 +52,11 @@ export class KeymapHeaderComponent implements OnChanges {
         }
     }
 
+    @HostListener('window:resize')
+    windowResize(): void {
+        this.calculateHeaderTextWidth(this.keymap.name);
+    }
+
     setDefault() {
         if (!this.keymap.isDefault) {
             this.store.dispatch(KeymapActions.setDefault(this.keymap.abbreviation));
@@ -103,8 +110,16 @@ export class KeymapHeaderComponent implements OnChanges {
         this.downloadClick.emit();
     }
 
+    calculateHeaderTextWidth(text): void {
+        const htmlInput = this.keymapName.nativeElement as HTMLInputElement;
+        const maxWidth = htmlInput.parentElement.offsetWidth - 530;
+        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
+        this.renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
+    }
+
     private setName(): void {
         this.renderer.setProperty(this.keymapName.nativeElement, 'value', this.keymap.name);
+        this.calculateHeaderTextWidth(this.keymap.name);
     }
 
     private setAbbreviation() {