From 559fec139fa90de42b9cb0d1a5097c4549c4a051 Mon Sep 17 00:00:00 2001 From: Attila Csanyi Date: Fri, 16 Jun 2017 15:06:12 +0200 Subject: [PATCH] Issue 201 - Mark selected key with blue (#290) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * issue-201: initial try * revert: remove first solution related changes * feature: change the colour of selected key to blue (empty key selection case not covered) * typescript: prevent errors in editors due to missing tsconfig for shared * cleanup: remove unused import * fix: solve empty key case, pass down selected layerId, moduleId and keyId * cleanup: remove console.log statement * cleanup: remove extra line * review: animation delay shorter, exactly as short as the animation delay of the popover * review: prevent remaining signature blue when click twice on a key in rapid succession * review: right signature colour after blending (http://colorblendy.com/#!/multiply/4099e5/cccccc) * review comments fixes * review: use simplified condition with help of ‘?’ --- .../slider/keyboard-slider.component.html | 2 ++ .../slider/keyboard-slider.component.ts | 1 + .../svg/keyboard/svg-keyboard.component.html | 2 ++ .../svg/keyboard/svg-keyboard.component.ts | 2 ++ .../svg-keyboard-key.component.html | 1 + .../svg-keyboard-key.component.ts | 8 ++++++ .../svg/module/svg-module.component.html | 1 + .../svg/module/svg-module.component.ts | 2 ++ .../svg/wrap/svg-keyboard-wrap.component.html | 1 + .../svg/wrap/svg-keyboard-wrap.component.ts | 4 ++- shared/src/tsconfig.json | 27 +++++++++++++++++++ 11 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 shared/src/tsconfig.json diff --git a/shared/src/components/keyboard/slider/keyboard-slider.component.html b/shared/src/components/keyboard/slider/keyboard-slider.component.html index 3b328de7..b77f45c1 100644 --- a/shared/src/components/keyboard/slider/keyboard-slider.component.html +++ b/shared/src/components/keyboard/slider/keyboard-slider.component.html @@ -3,6 +3,8 @@ [moduleConfig]="layer.modules" [keybindAnimationEnabled]="keybindAnimationEnabled" [capturingEnabled]="capturingEnabled" + [selectedKey]="selectedKey" + [selected]="selectedKey?.layerId === index" (keyClick)="keyClick.emit($event)" (keyHover)="keyHover.emit($event)" (capture)="capture.emit($event)" diff --git a/shared/src/components/keyboard/slider/keyboard-slider.component.ts b/shared/src/components/keyboard/slider/keyboard-slider.component.ts index 9359195f..8662b7f5 100644 --- a/shared/src/components/keyboard/slider/keyboard-slider.component.ts +++ b/shared/src/components/keyboard/slider/keyboard-slider.component.ts @@ -80,6 +80,7 @@ export class KeyboardSliderComponent implements OnChanges { @Input() currentLayer: number; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; + @Input() selectedKey: { layerId: number, moduleId: number, keyId: number }; @Output() keyClick = new EventEmitter(); @Output() keyHover = new EventEmitter(); @Output() capture = new EventEmitter(); diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.html b/shared/src/components/svg/keyboard/svg-keyboard.component.html index 78805d2c..a7e22556 100644 --- a/shared/src/components/svg/keyboard/svg-keyboard.component.html +++ b/shared/src/components/svg/keyboard/svg-keyboard.component.html @@ -6,6 +6,8 @@ [capturingEnabled]="capturingEnabled" [attr.transform]="module.attributes.transform" [keyActions]="moduleConfig[i].keyActions" + [selectedKey]="selectedKey" + [selected]="selectedKey?.moduleId === i" (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)" (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)" (capture)="onCapture(i, $event.index, $event.captured)" diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.ts b/shared/src/components/svg/keyboard/svg-keyboard.component.ts index e50834bb..35557acb 100644 --- a/shared/src/components/svg/keyboard/svg-keyboard.component.ts +++ b/shared/src/components/svg/keyboard/svg-keyboard.component.ts @@ -18,6 +18,8 @@ export class SvgKeyboardComponent implements OnInit { @Input() moduleConfig: Module[]; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; + @Input() selectedKey: { layerId: number, moduleId: number, keyId: number }; + @Input() selected: boolean; @Output() keyClick = new EventEmitter(); @Output() keyHover = new EventEmitter(); @Output() capture = new EventEmitter(); diff --git a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html index 11f12b88..8b74aa86 100644 --- a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html +++ b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html @@ -1,5 +1,6 @@ *', animate('200ms')), + transition('* => 1', animate('0ms')) // Instant color to blue + ]), trigger('recording', [ state('inactive', style({ fill: 'rgba(204, 0, 0, 1)' @@ -71,6 +77,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy { @Input() keyAction: KeyAction; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; + @Input() active: boolean; + @Output() keyClick = new EventEmitter(); @Output() capture = new EventEmitter(); diff --git a/shared/src/components/svg/module/svg-module.component.html b/shared/src/components/svg/module/svg-module.component.html index ed752757..0bb2efa2 100644 --- a/shared/src/components/svg/module/svg-module.component.html +++ b/shared/src/components/svg/module/svg-module.component.html @@ -8,6 +8,7 @@ [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'" [attr.fill]="key.fill" [keyAction]="keyActions[i]" + [active]="selected && i == selectedKey.keyId" [keybindAnimationEnabled]="keybindAnimationEnabled" [capturingEnabled]="capturingEnabled" (keyClick)="onKeyClick(i, $event)" diff --git a/shared/src/components/svg/module/svg-module.component.ts b/shared/src/components/svg/module/svg-module.component.ts index d43df42a..d6c80dc0 100644 --- a/shared/src/components/svg/module/svg-module.component.ts +++ b/shared/src/components/svg/module/svg-module.component.ts @@ -14,6 +14,8 @@ export class SvgModuleComponent { @Input() coverages: any[]; @Input() keyboardKeys: SvgKeyboardKey[]; @Input() keyActions: KeyAction[]; + @Input() selectedKey: { layerId: number, moduleId: number, keyId: number }; + @Input() selected: boolean; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; @Output() keyClick = new EventEmitter(); diff --git a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html index 01dc6166..35a51982 100644 --- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html +++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html @@ -4,6 +4,7 @@ [currentLayer]="currentLayer" [keybindAnimationEnabled]="keybindAnimationEnabled" [capturingEnabled]="popoverEnabled" + [selectedKey]="selectedKey" (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)" (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)" (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)" diff --git a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts index ae114ccc..3f57c246 100644 --- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts +++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts @@ -60,6 +60,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { private popoverShown: boolean; private keyEditConfig: { moduleId: number, keyId: number }; + private selectedKey: { layerId: number, moduleId: number, keyId: number }; private popoverInitKeyAction: KeyAction; private keybindAnimationEnabled: boolean; private currentLayer: number = 0; @@ -136,7 +137,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { moduleId, keyId }; - + this.selectedKey = { layerId: this.currentLayer, moduleId, keyId }; const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId]; this.keyElement = keyTarget; this.showPopover(keyActionToEdit); @@ -224,6 +225,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { hidePopover(): void { this.popoverShown = false; + this.selectedKey = undefined; } selectLayer(index: number): void { diff --git a/shared/src/tsconfig.json b/shared/src/tsconfig.json new file mode 100644 index 00000000..b4153557 --- /dev/null +++ b/shared/src/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true, + "typeRoots": [ + "../../node_modules/@types" + ], + "types": [ + "node", + "jquery", + "core-js", + "select2", + "file-saver" + ] + }, + "exclude": [ + "node_modules", + "config-serializer" + ] +}