feat: disable other popover tabs if the current key is layer switcher action (#813)
This commit is contained in:
Róbert Kiss
committed by
László Monda
László Monda
parent
843b4cbf68
commit
d57ef66038
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user