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

feat: remap key on all keymaps / layers (#668)

Browse Source 
* add: popover checkboxs

* feat: add KeyActionRemap

* fix: template driven form checkbox name

* fix: delete key action only if it SwitchLayerAction

* feat: use remap on all keymaps/layers checkbox values in SAVE_KEY action

* feat: set default value to the remapOnAllKeymap and remapOnAllLayer checkbox

* fix: layer mapping
This commit is contained in:
Róbert Kiss
2018-06-10 21:50:49 +02:00
committed by László Monda
parent 83b9f0d1e9
commit f34cb2df56
10 changed files with 158 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/uhk-web/src/app/components/popover/popover.component.html
View File

@@ -76,8 +76,41 @@
></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" [class.disabled]="!keyActionValid" type="button" (click)="onRemapKey()"> Remap Key </button>
<form class="form-inline d-inline-block popover-action-form">
<div class="checkbox">
<label>
<input type="checkbox"
name="remapOnAllKeymap"
[(ngModel)]="remapOnAllKeymap"> Remap on all keymaps
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"
name="remapOnAllLayer"
[(ngModel)]="remapOnAllLayer"> Remap on all layers
</label>
</div>
<div class="d-inline-block">
<icon name="question-circle"
data-toggle="tooltip"
html="true"
maxWidth="500"
title="<ul class='no-indent text-left'>
<li>When 'Remap on all keymaps' is checked and the 'Remap key' button is clicked, remap the key on the current layer of all keymaps.</li>
<li>When 'Remap on all layers' is checked and the 'Remap key' button is clicked, remap the key on all layers of the current keymap.</li>
<li>When both 'Remap on all keymaps' and 'Remap on all layers' is checked and the 'Remap key' button is clicked, remap the key on all layers of all keymaps.</li>
</ul>"
data-placement="bottom"></icon>
</div>
</form>
<div class="d-inline-block pull-right">
<button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel</button>
<button class="btn btn-sm btn-primary" [class.disabled]="!keyActionValid" type="button"
(click)="onRemapKey()"> Remap Key
</button>
</div>
</div>
</div>
<div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

9
packages/uhk-web/src/app/components/popover/popover.component.scss
View File

@@ -70,7 +70,6 @@
background-color: #f7f7f7;
border-top: 1px solid #ebebeb;
border-radius: 0 0 5px 5px;
text-align: right;
}
.popover-title {
@@ -133,3 +132,11 @@
margin-top: -1rem;
}
}
.popover-action-form {
margin-top: 4px;
label {
margin-right: 5px;
}
}

23
packages/uhk-web/src/app/components/popover/popover.component.ts
View File

@@ -31,6 +31,7 @@ import { Tab } from './tab';
import { AppState } from '../../store';
import { getKeymaps } from '../../store/reducers/user-configuration';
import { KeyActionRemap } from '../../models/key-action-remap';
enum TabName {
Keypress,
@@ -59,8 +60,8 @@ enum TabName {
})),
transition('opened => closed', [
animate('200ms ease-out', keyframes([
style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0 }),
style({ transform: 'translateY(30px)', visibility: 'hidden', opacity: 0, offset: 1 })
style({transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0}),
style({transform: 'translateY(30px)', visibility: 'hidden', opacity: 0, offset: 1})
]))
]),
transition('closed => opened', [
@@ -68,8 +69,8 @@ enum TabName {
visibility: 'visible'
}),
animate('200ms ease-out', keyframes([
style({ transform: 'translateY(30px)', opacity: 0, offset: 0 }),
style({ transform: 'translateY(0)', opacity: 1, offset: 1 })
style({transform: 'translateY(30px)', opacity: 0, offset: 0}),
style({transform: 'translateY(0)', opacity: 1, offset: 1})
]))
])
])
@@ -85,7 +86,7 @@ export class PopoverComponent implements OnChanges {
@Input() allowLayerDoubleTap: boolean;
@Output() cancel = new EventEmitter<any>();
@Output() remap = new EventEmitter<KeyAction>();
@Output() remap = new EventEmitter<KeyActionRemap>();
@ViewChild('tab') selectedTab: Tab;
@ViewChild('popover') popoverHost: ElementRef;
@@ -100,6 +101,9 @@ export class PopoverComponent implements OnChanges {
leftPosition: number = 0;
animationState: string;
remapOnAllKeymap: boolean;
remapOnAllLayer: boolean;
private readonly currentKeymap$ = new BehaviorSubject<Keymap>(undefined);
constructor(store: Store<AppState>) {
@@ -139,6 +143,8 @@ export class PopoverComponent implements OnChanges {
if (change['visible']) {
if (change['visible'].currentValue) {
this.animationState = 'opened';
this.remapOnAllKeymap = false;
this.remapOnAllLayer = false;
} else {
this.animationState = 'closed';
}
@@ -156,8 +162,11 @@ export class PopoverComponent implements OnChanges {
onRemapKey(): void {
if (this.keyActionValid) {
try {
const keyAction = this.selectedTab.toKeyAction();
this.remap.emit(keyAction);
this.remap.emit({
remapOnAllKeymap: this.remapOnAllKeymap,
remapOnAllLayer: this.remapOnAllLayer,
action: this.selectedTab.toKeyAction()
});
} catch (e) {
// TODO: show error dialog
console.error(e);

9
packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts
View File

@@ -42,6 +42,7 @@ import { KeymapActions } from '../../../store/actions';
import { PopoverComponent } from '../../popover';
import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
import { KeyActionRemap } from '../../../models/key-action-remap';
interface NameValuePair {
name: string;
@@ -181,11 +182,15 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
this.currentLayer,
moduleId,
keyId,
keystrokeAction)
{
remapOnAllKeymap: false,
remapOnAllLayer: false,
action: keystrokeAction
})
);
}
onRemap(keyAction: KeyAction): void {
onRemap(keyAction: KeyActionRemap): void {
this.store.dispatch(
KeymapActions.saveKey(
this.keymap,