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

ert78gb · mondalaci · commit 9885439b1021 · 2017-10-28T16:54:08.000+02:00
* 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
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -26,7 +26,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv", "s"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv", "s", "ch"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
diff --git a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html b/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html
@@ -7,6 +7,7 @@ <h1 class="col-xs-12 pane-title">
                    type="text"
                    (change)="editKeymapName($event.target.value)"
                    (keyup.enter)="name.blur()"
+                   (keyup)="calculateHeaderTextWidth($event.target.value)"
             /> keymap
             (<input #abbr cancelable
                     class="keymap__abbrev pane-title__abbrev"
diff --git a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts b/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() {
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.scss b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.scss
@@ -19,6 +19,7 @@
         a {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
+            user-select: none;
 
             &.selected {
                 font-style: italic;
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html
@@ -1,26 +1,30 @@
 <div class="macro-delay">
     <div class="row">
         <div class="col-xs-12">
-            <h4>Enter delay in seconds</h4>
+            <h4>Delay</h4>
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-4">
-          <input #macroDelayInput
-                 type="number" 
-                 min="0" 
-                 max="1000" 
-                 step="0.1" 
-                 placeholder="Delay amount" 
-                 class="form-control"
-                 [value]="delay"
-                 (change)="setDelay(macroDelayInput.value)">
+        <div class="col-xs-12">
+            <div class="form-group">
+                <input #macroDelayInput
+                       type="number"
+                       min="0"
+                       max="1000"
+                       step="0.1"
+                       placeholder="Delay amount"
+                       class="form-control"
+                       [ngModel]="delay"
+                       (ngModelChange)="setDelay(macroDelayInput.value)">
+                <label>seconds</label>
+            </div>
         </div>
     </div>
     <div class="row macro-delay__presets">
         <div class="col-xs-12">
-          <h6>Choose a preset</h6>
-          <button *ngFor="let delay of presets" class="btn btn-sm btn-default" (click)="setDelay(delay)">{{delay}}s</button>
+            <h6>Choose a preset</h6>
+            <button *ngFor="let delay of presets" class="btn btn-sm btn-default" (click)="setDelay(delay)">{{delay}}s
+            </button>
         </div>
     </div>
 </div>
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.scss b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.scss
@@ -14,3 +14,12 @@
         }
     }
 }
+
+.form-group {
+    margin-bottom: 0;
+}
+
+.form-control {
+    width: 16ch;
+    display: inline-block;
+}
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts
@@ -23,22 +23,31 @@ export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit
     @Input() macroAction: DelayMacroAction;
     @ViewChild('macroDelayInput') input: ElementRef;
 
-    delay: number;
     presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5];
 
+    get delay(): number {
+        return this._delay;
+    }
+
+    set delay(value: number) {
+        this._delay = value;
+        this.validate();
+    }
+
+    private _delay: number;
+
     constructor() { super(); }
 
     ngOnInit() {
         if (!this.macroAction) {
             this.macroAction = new DelayMacroAction();
         }
         this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY;
-        this.validate(); // initial validation as it has defaults
     }
 
     setDelay(value: number): void {
-        this.delay = value;
-        this.macroAction.delay = this.delay * 1000;
+        this._delay = value;
+        this.macroAction.delay = this._delay * 1000;
         this.validate();
     }
 
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
@@ -36,41 +36,68 @@
     <div class="col-xs-9 macro-mouse__actions" [ngSwitch]="activeTab">
         <div #tab *ngSwitchCase="TabName.Move">
             <h4>Move pointer</h4>
-            <p>Use negative values to move down or left from current position.</p>
             <div class="form-horizontal">
                 <div class="form-group">
-                    <label for="move-mouse-x">X</label>
-                    <input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"  (keyup)="validate()"> pixels
+                    <label for="move-mouse-x">X:</label>
+                    <input id="move-mouse-x"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['x']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
                 <div class="form-group">
-                    <label for="move-mouse-y">Y</label>
-                    <input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"  (keyup)="validate()"> pixels
+                    <label for="move-mouse-y">Y:</label>
+                    <input id="move-mouse-y"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['y']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
             </div>
         </div>
         <div #tab *ngSwitchCase="TabName.Scroll">
             <h4>Scroll</h4>
-            <p>Use negative values to move down or left from current position.</p>
             <div class="form-horizontal">
                 <div class="form-group">
-                    <label for="scroll-mouse-x">X</label>
-                    <input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']" (keyup)="validate()"> pixels
+                    <label for="scroll-mouse-x">X:</label>
+                    <input id="scroll-mouse-x"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['x']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
                 <div class="form-group">
-                    <label for="scroll-mouse-y">Y</label>
-                    <input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']" (keyup)="validate()"> pixels
+                    <label for="scroll-mouse-y">Y:</label>
+                    <input id="scroll-mouse-y"
+                           type="number"
+                           class="form-control"
+                           [(ngModel)]="macroAction['y']"
+                           (keyup)="validate()"
+                           min="-9999"
+                           max="9999"
+                           maxlength="4"> pixels
                 </div>
             </div>
         </div>
         <div #tab *ngIf="activeTab === TabName.Click || activeTab === TabName.Hold || activeTab === TabName.Release">
             <h4 *ngIf="activeTab === TabName.Click">Click mouse button</h4>
             <h4 *ngIf="activeTab === TabName.Hold">Hold mouse button</h4>
             <h4 *ngIf="activeTab === TabName.Release">Release mouse button</h4>
-            <div class="btn-group macro-mouse__buttons">
+            <div class="btn-group">
                 <button *ngFor="let buttonLabel of buttonLabels; let buttonIndex = index"
                         class="btn btn-default"
                         [class.btn-primary]="hasButton(buttonIndex)"
-                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}</button>
+                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}
+                </button>
             </div>
         </div>
     </div>
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.scss b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.scss
@@ -15,11 +15,6 @@
         padding-left: 3rem;
         padding-bottom: 1rem;
     }
-
-    &__buttons {
-        margin-top: 3rem;
-        margin-bottom: 1rem;
-    }
 }
 
 .fa {
@@ -38,6 +33,6 @@
 
     .form-control {
         display: inline-block;
-        width: 60%;
+        width: 10ch;
     }
 }
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
@@ -26,7 +26,7 @@ enum TabName {
         '../../macro-action-editor.component.scss',
         './macro-mouse.component.scss'
     ],
-    host: { 'class': 'macro__mouse' }
+    host: {'class': 'macro__mouse'}
 })
 export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: MouseMacroAction;
@@ -130,14 +130,14 @@ export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit
         switch (this.macroAction.constructor) {
             case MoveMouseMacroAction:
             case ScrollMouseMacroAction:
-                const { x, y } = this.macroAction as MoveMouseMacroAction;
-                return x !== undefined && x !== null && y !== undefined && y !== null;
+                const {x, y} = this.macroAction as MoveMouseMacroAction;
+                return x !== undefined && x !== null && y !== undefined && y !== null &&
+                    (x !== 0 || y !== 0) && x < 10000 && x > -10000 && y < 10000 && y > -10000;
             case MouseButtonMacroAction:
-                const { mouseButtonsMask } = this.macroAction as MouseButtonMacroAction;
+                const {mouseButtonsMask} = this.macroAction as MouseButtonMacroAction;
                 return !!mouseButtonsMask;
             default:
                 return true;
         }
-    }
-
+    };
 }
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html
@@ -1,6 +1,5 @@
 <div>
     <h4>Type text</h4>
-    <p>Input the text you want to type with this macro action.</p>
     <textarea #macroTextInput name="macro-text" (change)="onTextChange()"
     (keyup)="validate()" class="macro__text-input">{{ macroAction?.text }}</textarea>
 </div>
diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html
@@ -7,7 +7,7 @@ <h1 class="col-xs-12 pane-title">
                    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"
diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss b/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 {
diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts b/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);
     }
 
 }
diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss b/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
@@ -31,6 +31,7 @@
         flex-shrink: 0;
         border: 0;
         border-bottom: 1px solid #ddd;
+        user-select: none;
 
         icon {
             margin: 0 5px;
diff --git a/packages/uhk-web/src/app/util/html-helper.ts b/packages/uhk-web/src/app/util/html-helper.ts
@@ -0,0 +1,17 @@
+let canvas: HTMLCanvasElement;
+
+export function getContentWidth(style: CSSStyleDeclaration, text: string): number {
+    if (!text) {
+        return 0;
+    }
+
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+    }
+
+    const context = canvas.getContext('2d');
+    context.font = style.font;
+    const metrics = context.measureText(text);
+
+    return metrics.width;
+}
diff --git a/packages/uhk-web/src/app/util/index.ts b/packages/uhk-web/src/app/util/index.ts
@@ -0,0 +1 @@
+export * from './html-helper';

Original file line number	Diff line number	Diff line change
`@@ -14,3 +14,12 @@`
`14`	`14`	`}`
`15`	`15`	`}`
`16`	`16`	`}`
	`17`	`+`
	`18`	`+.form-group {`
	`19`	`+ margin-bottom: 0;`
	`20`	`+}`
	`21`	`+`
	`22`	`+.form-control {`
	`23`	`+ width: 16ch;`
	`24`	`+ display: inline-block;`
	`25`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -15,11 +15,6 @@`
`15`	`15`	`padding-left: 3rem;`
`16`	`16`	`padding-bottom: 1rem;`
`17`	`17`	`}`
`18`		`-`
`19`		`- &__buttons {`
`20`		`- margin-top: 3rem;`
`21`		`- margin-bottom: 1rem;`
`22`		`- }`
`23`	`18`	`}`
`24`	`19`
`25`	`20`	`.fa {`
`@@ -38,6 +33,6 @@`
`38`	`33`
`39`	`34`	`.form-control {`
`40`	`35`	`display: inline-block;`
`41`		`- width: 60%;`
	`36`	`+ width: 10ch;`
`42`	`37`	`}`
`43`	`38`	`}`