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

feat: disable other popover tabs if the current key is layer switcher action (#813)

Browse Source
This commit is contained in:
Róbert Kiss
2018-10-07 22:14:36 +02:00
committed by László Monda
parent 843b4cbf68
commit d57ef66038
4 changed files with 87 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,40 +8,14 @@
<div class="arrowCustom"></div>
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
<li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
<li *ngFor="let tab of tabHeaders; trackBy:trackTabHeader"
[class.active]="activeTab === tab.tabName"
[class.disabled]="tab.disabled"
(click)="selectTab(tab)">
<a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i>
<span>Keypress</span>
</a>
</li>
<li #layer [class.active]="activeTab === tabName.Layer" (click)="selectTab(tabName.Layer)">
<a class="menu-tabs--item">
<i class="fa fa-clone"></i>
<span>Layer</span>
</a>
</li>
<li #mouse [class.active]="activeTab === tabName.Mouse" (click)="selectTab(tabName.Mouse)">
<a class="menu-tabs--item">
<i class="fa fa-mouse-pointer"></i>
<span>Mouse</span>
</a>
</li>
<li #macro [class.active]="activeTab === tabName.Macro" (click)="selectTab(tabName.Macro)">
<a class="menu-tabs--item">
<i class="fa fa-play"></i>
<span>Macro</span>
</a>
</li>
<li #keymap [class.active]="activeTab === tabName.Keymap" (click)="selectTab(tabName.Keymap)">
<a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i>
<span>Keymap</span>
</a>
</li>
<li #none [class.active]="activeTab === tabName.None" (click)="selectTab(tabName.None)">
<a class="menu-tabs--item">
<i class="fa fa-ban"></i>
<span>None</span>
<i class="fa"
[ngClass]="tab.icon"></i>
<span>{{ tab.text }}</span>
</a>
</li>
</ul>
@@ -53,30 +27,30 @@
[allowRemapOnAllKeymapWarning]="true"
[remapInfo]="remapInfo"
[showLayerSwitcherInSecondaryRoles]="currentLayer === 0"
(validAction)="keyActionValid=$event"
(validAction)="setKeyActionValidState($event)"
(keyActionChange)="keystrokeActionChange($event)"
></keypress-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
[currentLayer]="currentLayer"
[allowLayerDoubleTap]="allowLayerDoubleTap"
(validAction)="keyActionValid=$event"
(validAction)="setKeyActionValidState($event)"
></layer-tab>
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
(validAction)="keyActionValid=$event"
(validAction)="setKeyActionValidState($event)"
></mouse-tab>
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
(validAction)="keyActionValid=$event"
(validAction)="setKeyActionValidState($event)"
></macro-tab>
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
[keymaps]="keymaps$ | async"
(validAction)="keyActionValid=$event"
(validAction)="setKeyActionValidState($event)"
></keymap-tab>
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"
(validAction)="keyActionValid=$event"
(validAction)="setKeyActionValidState($event)"
></none-tab>
</div>
<div class="popover-action">

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

@@ -28,6 +28,11 @@
.nav-tabs > li {
overflow: hidden;
cursor: pointer;
&.disabled {
cursor: not-allowed;
}
}
.arrowCustom {
@@ -85,7 +90,6 @@
.menu-tabs--item {
display: flex;
align-items: center;
cursor: pointer;
i {
margin-right: 0.25em;

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

@@ -46,6 +46,13 @@ enum TabName {
None
}
export interface TabHeader {
text: string;
icon: string;
tabName: TabName;
disabled?: boolean;
}
@Component({
selector: 'popover',
templateUrl: './popover.component.html',
@@ -108,6 +115,38 @@ export class PopoverComponent implements OnChanges {
animationState: string;
shadowKeyAction: KeyAction;
disableRemapOnAllLayer = false;
tabHeaders: TabHeader[] = [
{
tabName: TabName.Keypress,
icon: 'fa-keyboard-o',
text: 'Keypress'
},
{
tabName: TabName.Layer,
icon: 'fa-clone',
text: 'Layer'
},
{
tabName: TabName.Mouse,
icon: 'fa-mouse-pointer',
text: 'Mouse'
},
{
tabName: TabName.Macro,
icon: 'fa-play',
text: 'Macro'
},
{
tabName: TabName.Keymap,
icon: 'fa-keyboard-o',
text: 'Keymap'
},
{
tabName: TabName.None,
icon: 'fa-ban',
text: 'None'
}
];
private readonly currentKeymap$ = new BehaviorSubject<Keymap>(undefined);
@@ -127,24 +166,30 @@ export class PopoverComponent implements OnChanges {
}
if (change['defaultKeyAction']) {
let tab: TabName;
let tab: TabHeader;
this.disableRemapOnAllLayer = false;
if (this.defaultKeyAction instanceof KeystrokeAction) {
this.keystrokeActionChange(this.defaultKeyAction);
tab = TabName.Keypress;
tab = this.tabHeaders[0];
} else if (this.defaultKeyAction instanceof SwitchLayerAction) {
tab = TabName.Layer;
tab = this.tabHeaders[1];
} else if (this.defaultKeyAction instanceof MouseAction) {
tab = TabName.Mouse;
tab = this.tabHeaders[2];
} else if (this.defaultKeyAction instanceof PlayMacroAction) {
tab = TabName.Macro;
tab = this.tabHeaders[3];
} else if (this.defaultKeyAction instanceof SwitchKeymapAction) {
tab = TabName.Keymap;
tab = this.tabHeaders[4];
} else {
tab = TabName.None;
tab = this.tabHeaders[5];
}
for (const tabHeader of this.tabHeaders) {
const allowOnlyLayerTab = tab.tabName === TabName.Layer && this.currentLayer !== 0;
tabHeader.disabled = allowOnlyLayerTab && tabHeader.tabName !== TabName.Layer;
console.log(tabHeader);
}
this.selectTab(tab);
}
@@ -193,9 +238,13 @@ export class PopoverComponent implements OnChanges {
}
}
selectTab(tab: TabName): void {
this.activeTab = tab;
if (tab === TabName.Keypress) {
selectTab(tab: TabHeader): void {
if (tab.disabled) {
return;
}
this.activeTab = tab.tabName;
if (tab.tabName === TabName.Keypress) {
this.keystrokeActionChange(this.defaultKeyAction as KeystrokeAction);
}
}
@@ -228,6 +277,15 @@ export class PopoverComponent implements OnChanges {
}
}
setKeyActionValidState($event: boolean): void {
this.keyActionValid = $event;
this.cdRef.markForCheck();
}
trackTabHeader(index: number, tabItem: TabHeader): string {
return tabItem.tabName.toString();
}
private calculatePosition() {
const offsetLeft: number = this.wrapPosition.left + 265; // 265 is a width of the side menu with a margin
const popover: HTMLElement = this.popoverHost.nativeElement;

2
packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts
View File

@@ -63,7 +63,7 @@ export class LayerTabComponent extends Tab implements OnChanges {
this.isNotBase = this.currentLayer > 0;
}
this.validAction.emit(true);
this.validAction.emit(!this.isNotBase);
}
keyActionValid(): boolean {