uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Disable button when action is not valid in popover (#244)

Browse Source 
Resolves #161
This commit is contained in:
Nejc Zdovc
2016-12-31 13:19:20 +01:00
committed by József Farkas
parent cc9081fe81
commit 52fd854e92
10 changed files with 91 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/popover/popover.component.html
View File

@@ -47,16 +47,36 @@
</ul>
</div>
<div [ngSwitch]="activeTab">
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction" [currentLayer]="currentLayer"></layer-tab>
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab>
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
[longPressEnabled]="true"
(validAction)="keyActionValid=$event"
></keypress-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
[currentLayer]="currentLayer"
(validAction)="keyActionValid=$event"
></layer-tab>
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
(validAction)="keyActionValid=$event"
></mouse-tab>
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
(validAction)="keyActionValid=$event"
></macro-tab>
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
[keymaps]="keymaps$ | async"
(validAction)="keyActionValid=$event"
></keymap-tab>
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"
(validAction)="keyActionValid=$event"
></none-tab>
</div>
<div class="popover-action">
<button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
<button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
<button class="btn btn-sm btn-primary" [class.disabled]="!keyActionValid" type="button" (click)="onRemapKey()"> Remap Key </button>
</div>
</div>
<div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

18
src/components/popover/popover.component.ts
View File

@@ -79,6 +79,7 @@ export class PopoverComponent implements OnChanges {
@ViewChild('popover') popoverHost: ElementRef;
public tabName = TabName;
public keyActionValid: boolean;
private activeTab: TabName;
private keymaps$: Observable<Keymap[]>;
private leftArrow: boolean = false;
@@ -134,16 +135,19 @@ export class PopoverComponent implements OnChanges {
}
onRemapKey(): void {
try {
let keyAction = this.selectedTab.toKeyAction();
this.remap.emit(keyAction);
} catch (e) {
// TODO: show error dialog
console.error(e);
if (this.keyActionValid) {
try {
let keyAction = this.selectedTab.toKeyAction();
this.remap.emit(keyAction);
} catch (e) {
// TODO: show error dialog
console.error(e);
}
}
}
@HostListener('keydown.escape') onEscape(): void {
@HostListener('keydown.escape')
onEscape(): void {
this.cancel.emit();
}

6
src/components/popover/tab/keymap/keymap-tab.component.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { Select2OptionData } from 'ng2-select2/ng2-select2';
@@ -12,7 +12,7 @@ import { Tab } from '../tab';
styles: [require('./keymap-tab.component.scss')],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class KeymapTabComponent implements OnInit, OnChanges, Tab {
export class KeymapTabComponent extends Tab implements OnInit, OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() keymaps: Keymap[];
@@ -20,6 +20,7 @@ export class KeymapTabComponent implements OnInit, OnChanges, Tab {
private selectedKeymap: Keymap;
constructor() {
super();
this.keymapOptions = [];
}
@@ -38,6 +39,7 @@ export class KeymapTabComponent implements OnInit, OnChanges, Tab {
ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction);
this.validAction.emit(true);
}
// TODO: change to the correct type when the wrapper has added it.

19
src/components/popover/tab/keypress/keypress-tab.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, OnChanges } from '@angular/core';
import { Component, Input, EventEmitter, OnChanges, Output } from '@angular/core';
import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
@@ -12,7 +12,7 @@ import { MapperService } from '../../../../services/mapper.service';
template: require('./keypress-tab.component.html'),
styles: [require('./keypress-tab.component.scss')]
})
export class KeypressTabComponent implements OnChanges, Tab {
export class KeypressTabComponent extends Tab implements OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() longPressEnabled: boolean;
@@ -30,6 +30,7 @@ export class KeypressTabComponent implements OnChanges, Tab {
private selectedLongPressIndex: number;
constructor(private mapper: MapperService) {
super();
this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
this.scanCodeGroups = [{
@@ -58,13 +59,15 @@ export class KeypressTabComponent implements OnChanges, Tab {
ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction);
this.validAction.emit(this.keyActionValid());
}
keyActionValid(keystrokeAction?: KeystrokeAction): boolean {
if (!keystrokeAction) {
keystrokeAction = this.toKeyAction();
}
return keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0;
return (keystrokeAction) ? (keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0) : false;
}
onKeysCapture(event: {code: number, left: boolean[], right: boolean[]}) {
@@ -76,6 +79,7 @@ export class KeypressTabComponent implements OnChanges, Tab {
this.leftModifierSelects = event.left;
this.rightModifierSelects = event.right;
this.validAction.emit(this.keyActionValid());
}
fromKeyAction(keyAction: KeyAction): boolean {
@@ -120,11 +124,9 @@ export class KeypressTabComponent implements OnChanges, Tab {
? undefined
: this.mapper.modifierMapper(this.selectedLongPressIndex);
if (!this.keyActionValid(keystrokeAction)) {
throw new Error('KeyAction is invalid!');
if (this.keyActionValid(keystrokeAction)) {
return keystrokeAction;
}
return keystrokeAction;
}
scanCodeTemplateResult: Select2TemplateFunction = (state: Select2OptionData): JQuery | string => {
@@ -149,6 +151,8 @@ export class KeypressTabComponent implements OnChanges, Tab {
toggleModifier(right: boolean, index: number) {
let modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
modifierSelects[index] = !modifierSelects[index];
this.validAction.emit(this.keyActionValid());
}
onLongpressChange(event: {value: string}) {
@@ -157,5 +161,6 @@ export class KeypressTabComponent implements OnChanges, Tab {
onScancodeChange(event: {value: string}) {
this.scanCode = +event.value;
this.validAction.emit(this.keyActionValid());
}
}

7
src/components/popover/tab/layer/layer-tab.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
@@ -9,7 +9,7 @@ import { Tab } from '../tab';
template: require('./layer-tab.component.html'),
styles: [require('./layer-tab.component.scss')]
})
export class LayerTabComponent implements OnChanges, Tab {
export class LayerTabComponent extends Tab implements OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() currentLayer: number;
@@ -45,6 +45,7 @@ export class LayerTabComponent implements OnChanges, Tab {
private layer: LayerName;
constructor() {
super();
this.toggle = false;
this.layer = LayerName.mod;
}
@@ -57,6 +58,8 @@ export class LayerTabComponent implements OnChanges, Tab {
if (changes['currentLayer']) {
this.isNotBase = this.currentLayer > 0;
}
this.validAction.emit(true);
}
keyActionValid(): boolean {

6
src/components/popover/tab/macro/macro-tab.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
import { Store } from '@ngrx/store';
@@ -19,7 +19,7 @@ import { getMacroEntities } from '../../../../store/reducers/macro';
template: require('./macro-tab.component.html'),
styles: [require('./macro-tab.component.scss')]
})
export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestroy {
@Input() defaultKeyAction: KeyAction;
private macros: Macro[];
@@ -28,6 +28,7 @@ export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
private subscription: Subscription;
constructor(private store: Store<AppState>) {
super();
this.subscription = store.let(getMacroEntities())
.subscribe((macros: Macro[]) => this.macros = macros);
this.macroOptions = [];
@@ -45,6 +46,7 @@ export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction);
this.validAction.emit(true);
}
// TODO: change to the correct type when the wrapper has added it.

8
src/components/popover/tab/mouse/mouse-tab.component.html
View File

@@ -86,20 +86,20 @@
<p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
</div>
<div class="btn-group btn-group-lg" role="group">
<div class="btn btn-default"
<button class="btn btn-default"
[class.btn-primary]="mouseActionParam === MouseActionParam.decelerate"
(click)="setMouseActionParam(MouseActionParam.decelerate)"
>
-
<span>Decelerate</span>
</div>
<div class="btn btn-default"
</button>
<button class="btn btn-default"
[class.btn-primary]="mouseActionParam === MouseActionParam.accelerate"
(click)="setMouseActionParam(MouseActionParam.accelerate)"
>
+
<span>Accelerate</span>
</div>
</button>
</div>
<div class="help-text--mouse-speed last-help text-left">
<p>You can set the multiplier in the <a [routerLink]="['/settings']" title="Settings">settings</a>.</p>

16
src/components/popover/tab/mouse/mouse-tab.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, OnChanges } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { KeyAction, MouseAction, MouseActionParam } from '../../../../config-serializer/config-items/key-action';
import { Tab } from '../tab';
@@ -8,7 +8,7 @@ import { Tab } from '../tab';
template: require('./mouse-tab.component.html'),
styles: [require('./mouse-tab.component.scss')]
})
export class MouseTabComponent implements OnChanges, Tab {
export class MouseTabComponent extends Tab implements OnChanges {
@Input() defaultKeyAction: KeyAction;
private mouseActionParam: MouseActionParam;
@@ -21,12 +21,14 @@ export class MouseTabComponent implements OnChanges, Tab {
private pages: string[];
constructor() {
super();
this.selectedPageIndex = 0;
this.pages = ['Move', 'Scroll', 'Click', 'Speed'];
}
ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction);
this.validAction.emit(this.keyActionValid());
}
keyActionValid(): boolean {
@@ -37,12 +39,14 @@ export class MouseTabComponent implements OnChanges, Tab {
if (!(keyAction instanceof MouseAction)) {
return false;
}
let mouseAction: MouseAction = <MouseAction>keyAction;
this.mouseActionParam = mouseAction.mouseAction;
if (mouseAction.mouseAction === MouseActionParam.moveUp) {
this.selectedPageIndex = 0;
}
switch (mouseAction.mouseAction) {
case MouseActionParam.moveDown:
case MouseActionParam.moveUp:
@@ -68,13 +72,11 @@ export class MouseTabComponent implements OnChanges, Tab {
default:
return false;
}
return true;
}
toKeyAction(): MouseAction {
if (!this.keyActionValid()) {
throw new Error('KeyAction is not valid. No selected mouse action!');
}
let mouseAction: MouseAction = new MouseAction();
mouseAction.mouseAction = this.mouseActionParam;
return mouseAction;
@@ -85,12 +87,14 @@ export class MouseTabComponent implements OnChanges, Tab {
console.error(`Invalid index error: ${index}`);
return;
}
this.selectedPageIndex = index;
this.mouseActionParam = undefined;
this.validAction.emit(false);
}
setMouseActionParam(mouseActionParam: MouseActionParam) {
this.mouseActionParam = mouseActionParam;
this.validAction.emit(true);
}
}

8
src/components/popover/tab/none/none-tab.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, EventEmitter, OnChanges, Output } from '@angular/core';
import { Tab } from '../tab';
@@ -7,7 +7,11 @@ import { Tab } from '../tab';
template: require('./none-tab.component.html'),
styles: [require('./none-tab.component.scss')]
})
export class NoneTabComponent implements Tab {
export class NoneTabComponent extends Tab implements OnChanges {
ngOnChanges(event: any) {
this.validAction.emit(true);
}
keyActionValid(): boolean {
return true;
}

12
src/components/popover/tab/tab.ts
View File

@@ -1,7 +1,11 @@
import { EventEmitter, Output } from '@angular/core';
import { KeyAction } from '../../../config-serializer/config-items/key-action';
export interface Tab {
keyActionValid(): boolean;
fromKeyAction(keyAction: KeyAction): boolean;
toKeyAction(): KeyAction;
export abstract class Tab {
@Output() validAction = new EventEmitter<boolean>();
abstract keyActionValid(): boolean;
abstract fromKeyAction(keyAction: KeyAction): boolean;
abstract toKeyAction(): KeyAction;
}