Remove magic numbers in popover.component.

This commit is contained in:
József Farkas
2016-08-08 22:32:19 +02:00
parent 8038f255ec
commit a33f0dc4ff
2 changed files with 35 additions and 27 deletions

View File

@@ -2,37 +2,37 @@
<div class="row"> <div class="row">
<div class="popover-title menu-tabs"> <div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu"> <ul class="nav nav-tabs popover-menu">
<li #keypress [class.active]="activeTabIndex === 0" (click)="selectTab(0)"> <li #keypress [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i> <i class="fa fa-keyboard-o"></i>
<span>Keypress</span> <span>Keypress</span>
</a> </a>
</li> </li>
<li #layer [class.active]="activeTabIndex === 1" (click)="selectTab(1)"> <li #layer [class.active]="activeTab === TabName.Layer" (click)="selectTab(TabName.Layer)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-clone"></i> <i class="fa fa-clone"></i>
<span>Layer</span> <span>Layer</span>
</a> </a>
</li> </li>
<li #mouse [class.active]="activeTabIndex === 2" (click)="selectTab(2)"> <li #mouse [class.active]="activeTab === TabName.Mouse" (click)="selectTab(TabName.Mouse)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-mouse-pointer"></i> <i class="fa fa-mouse-pointer"></i>
<span>Mouse</span> <span>Mouse</span>
</a> </a>
</li> </li>
<li #macro [class.active]="activeTabIndex === 3" (click)="selectTab(3)"> <li #macro [class.active]="activeTab === TabName.Macro" (click)="selectTab(TabName.Macro)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-play"></i> <i class="fa fa-play"></i>
<span>Macro</span> <span>Macro</span>
</a> </a>
</li> </li>
<li #keymap [class.active]="activeTabIndex === 4" (click)="selectTab(4)"> <li #keymap [class.active]="activeTab === TabName.Keymap" (click)="selectTab(TabName.Keymap)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i> <i class="fa fa-keyboard-o"></i>
<span>Keymap</span> <span>Keymap</span>
</a> </a>
</li> </li>
<li #none [class.active]="activeTabIndex === 5" (click)="selectTab(5)"> <li #none [class.active]="activeTab === TabName.None" (click)="selectTab(TabName.None)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-ban"></i> <i class="fa fa-ban"></i>
<span>None</span> <span>None</span>
@@ -41,13 +41,13 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="row" [ngSwitch]="activeTabIndex"> <div class="row" [ngSwitch]="activeTab">
<keypress-tab #tab *ngSwitchCase="0" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keypress-tab> <keypress-tab #tab *ngSwitchCase="TabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keypress-tab>
<layer-tab #tab *ngSwitchCase="1" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab> <layer-tab #tab *ngSwitchCase="TabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
<mouse-tab #tab *ngSwitchCase="2" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab> <mouse-tab #tab *ngSwitchCase="TabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<macro-tab #tab *ngSwitchCase="3" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab> <macro-tab #tab *ngSwitchCase="TabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<keymap-tab #tab *ngSwitchCase="4" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keymap-tab> <keymap-tab #tab *ngSwitchCase="TabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keymap-tab>
<none-tab #tab *ngSwitchCase="5" class="popover-content" [defaultKeyAction]="defaultKeyAction"></none-tab> <none-tab #tab *ngSwitchCase="TabName.None" class="popover-content" [defaultKeyAction]="defaultKeyAction"></none-tab>
</div> </div>
<div class="row"> <div class="row">
<div class="popover-action"> <div class="popover-action">

View File

@@ -17,6 +17,15 @@ import {MouseAction} from '../../../config-serializer/config-items/MouseAction';
import {PlayMacroAction} from '../../../config-serializer/config-items/PlayMacroAction'; import {PlayMacroAction} from '../../../config-serializer/config-items/PlayMacroAction';
import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction'; import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction';
enum TabName {
Keypress,
Layer,
Mouse,
Macro,
Keymap,
None
}
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'popover', selector: 'popover',
@@ -43,28 +52,27 @@ export class PopoverComponent implements OnInit {
@ViewChild('tab') selectedTab: Tab; @ViewChild('tab') selectedTab: Tab;
private activeTabIndex: number; private TabName = TabName;
private activeTab: TabName;
constructor() { constructor() { }
this.activeTabIndex = -1;
}
ngOnInit() { ngOnInit() {
let tabIndex: number; let tab: TabName;
if (this.defaultKeyAction instanceof KeystrokeAction) { if (this.defaultKeyAction instanceof KeystrokeAction) {
tabIndex = 0; tab = TabName.Keypress;
} else if (this.defaultKeyAction instanceof SwitchLayerAction) { } else if (this.defaultKeyAction instanceof SwitchLayerAction) {
tabIndex = 1; tab = TabName.Layer;
} else if (this.defaultKeyAction instanceof MouseAction) { } else if (this.defaultKeyAction instanceof MouseAction) {
tabIndex = 2; tab = TabName.Mouse;
} else if (this.defaultKeyAction instanceof PlayMacroAction) { } else if (this.defaultKeyAction instanceof PlayMacroAction) {
tabIndex = 3; tab = TabName.Macro;
} else if (this.defaultKeyAction instanceof SwitchKeymapAction) { } else if (this.defaultKeyAction instanceof SwitchKeymapAction) {
tabIndex = 4; tab = TabName.Keymap;
} else { } else {
tabIndex = 5; tab = TabName.None;
} }
this.selectTab(tabIndex); this.selectTab(tab);
} }
onCancelClick(): void { onCancelClick(): void {
@@ -81,8 +89,8 @@ export class PopoverComponent implements OnInit {
} }
} }
selectTab(index: number): void { selectTab(tab: TabName): void {
this.activeTabIndex = index; this.activeTab = tab;
} }
} }