Fixed graphical glitch

This commit is contained in:
NejcZdovc
2016-11-28 17:31:47 +01:00
committed by József Farkas
parent e3f8ca4357
commit 96e80ad7ef
9 changed files with 73 additions and 77 deletions

View File

@@ -6,63 +6,57 @@
[style.left.px]="leftPosition" [style.left.px]="leftPosition"
> >
<div class="arrowCustom"></div> <div class="arrowCustom"></div>
<div class="container-fluid"> <div class="popover-title menu-tabs">
<div class="row"> <ul class="nav nav-tabs popover-menu">
<div class="popover-title menu-tabs"> <li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
<ul class="nav nav-tabs popover-menu"> <a class="menu-tabs--item">
<li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)"> <i class="fa fa-keyboard-o"></i>
<a class="menu-tabs--item"> <span>Keypress</span>
<i class="fa fa-keyboard-o"></i> </a>
<span>Keypress</span> </li>
</a> <li #layer [class.active]="activeTab === tabName.Layer" (click)="selectTab(tabName.Layer)">
</li> <a class="menu-tabs--item">
<li #layer [class.active]="activeTab === tabName.Layer" (click)="selectTab(tabName.Layer)"> <i class="fa fa-clone"></i>
<a class="menu-tabs--item"> <span>Layer</span>
<i class="fa fa-clone"></i> </a>
<span>Layer</span> </li>
</a> <li #mouse [class.active]="activeTab === tabName.Mouse" (click)="selectTab(tabName.Mouse)">
</li> <a class="menu-tabs--item">
<li #mouse [class.active]="activeTab === tabName.Mouse" (click)="selectTab(tabName.Mouse)"> <i class="fa fa-mouse-pointer"></i>
<a class="menu-tabs--item"> <span>Mouse</span>
<i class="fa fa-mouse-pointer"></i> </a>
<span>Mouse</span> </li>
</a> <li #macro [class.active]="activeTab === tabName.Macro" (click)="selectTab(tabName.Macro)">
</li> <a class="menu-tabs--item">
<li #macro [class.active]="activeTab === tabName.Macro" (click)="selectTab(tabName.Macro)"> <i class="fa fa-play"></i>
<a class="menu-tabs--item"> <span>Macro</span>
<i class="fa fa-play"></i> </a>
<span>Macro</span> </li>
</a> <li #keymap [class.active]="activeTab === tabName.Keymap" (click)="selectTab(tabName.Keymap)">
</li> <a class="menu-tabs--item">
<li #keymap [class.active]="activeTab === tabName.Keymap" (click)="selectTab(tabName.Keymap)"> <i class="fa fa-keyboard-o"></i>
<a class="menu-tabs--item"> <span>Keymap</span>
<i class="fa fa-keyboard-o"></i> </a>
<span>Keymap</span> </li>
</a> <li #none [class.active]="activeTab === tabName.None" (click)="selectTab(tabName.None)">
</li> <a class="menu-tabs--item">
<li #none [class.active]="activeTab === tabName.None" (click)="selectTab(tabName.None)"> <i class="fa fa-ban"></i>
<a class="menu-tabs--item"> <span>None</span>
<i class="fa fa-ban"></i> </a>
<span>None</span> </li>
</a> </ul>
</li> </div>
</ul> <div [ngSwitch]="activeTab">
</div> <keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
</div> <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
<div class="row" [ngSwitch]="activeTab"> <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab> <macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab> <keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab> <none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab>
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab> </div>
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab> <div class="popover-action">
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab> <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
</div> <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
<div class="row">
<div class="popover-action">
<button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
<button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
</div>
</div>
</div> </div>
</div> </div>
<div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div> <div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

View File

@@ -4,6 +4,7 @@
padding: 0; padding: 0;
max-width: 568px; max-width: 568px;
width: 100%; width: 100%;
user-select: none;
&.leftArrow { &.leftArrow {
.arrowCustom { .arrowCustom {

View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
import { Select2OptionData } from 'ng2-select2/ng2-select2'; import { Select2OptionData } from 'ng2-select2/ng2-select2';
@@ -12,7 +12,7 @@ import { Tab } from '../tab';
styles: [require('./keymap-tab.component.scss')], styles: [require('./keymap-tab.component.scss')],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class KeymapTabComponent implements OnInit, Tab { export class KeymapTabComponent implements OnInit, OnChanges, Tab {
@Input() defaultKeyAction: KeyAction; @Input() defaultKeyAction: KeyAction;
@Input() keymaps: Keymap[]; @Input() keymaps: Keymap[];
@@ -34,6 +34,9 @@ export class KeymapTabComponent implements OnInit, Tab {
if (this.keymaps.length > 0) { if (this.keymaps.length > 0) {
this.selectedKeymap = this.keymaps[0]; this.selectedKeymap = this.keymaps[0];
} }
}
ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction); this.fromKeyAction(this.defaultKeyAction);
} }

View File

@@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnChanges } from '@angular/core';
import { Select2OptionData } from 'ng2-select2/ng2-select2'; import { Select2OptionData } from 'ng2-select2/ng2-select2';
@@ -11,7 +11,7 @@ import { Tab } from '../tab';
template: require('./keypress-tab.component.html'), template: require('./keypress-tab.component.html'),
styles: [require('./keypress-tab.component.scss')] styles: [require('./keypress-tab.component.scss')]
}) })
export class KeypressTabComponent implements OnInit, Tab { export class KeypressTabComponent implements OnChanges, Tab {
@Input() defaultKeyAction: KeyAction; @Input() defaultKeyAction: KeyAction;
@Input() longPressEnabled: boolean; @Input() longPressEnabled: boolean;
@@ -42,7 +42,7 @@ export class KeypressTabComponent implements OnInit, Tab {
this.selectedLongPressIndex = -1; this.selectedLongPressIndex = -1;
} }
ngOnInit() { ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction); this.fromKeyAction(this.defaultKeyAction);
} }

View File

@@ -1,4 +1,4 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { Component, Input, OnChanges, ViewChild } from '@angular/core';
import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action'; import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
@@ -11,7 +11,7 @@ import { Tab } from '../tab';
template: require('./layer-tab.component.html'), template: require('./layer-tab.component.html'),
styles: [require('./layer-tab.component.scss')] styles: [require('./layer-tab.component.scss')]
}) })
export class LayerTabComponent implements OnInit, Tab { export class LayerTabComponent implements OnChanges, Tab {
@Input() defaultKeyAction: KeyAction; @Input() defaultKeyAction: KeyAction;
@ViewChild('toggleSelect') toggleSelect2: Select2Component; @ViewChild('toggleSelect') toggleSelect2: Select2Component;
@ViewChild('layerSelect') layerSelect2: Select2Component; @ViewChild('layerSelect') layerSelect2: Select2Component;
@@ -52,7 +52,7 @@ export class LayerTabComponent implements OnInit, Tab {
this.layer = LayerName.mod; this.layer = LayerName.mod;
} }
ngOnInit() { ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction); this.fromKeyAction(this.defaultKeyAction);
} }

View File

@@ -1,4 +1,4 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@@ -19,7 +19,7 @@ import { getMacroEntities } from '../../../../store/reducers/macro';
template: require('./macro-tab.component.html'), template: require('./macro-tab.component.html'),
styles: [require('./macro-tab.component.scss')] styles: [require('./macro-tab.component.scss')]
}) })
export class MacroTabComponent implements OnInit, OnDestroy, Tab { export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
@Input() defaultKeyAction: KeyAction; @Input() defaultKeyAction: KeyAction;
private macros: Macro[]; private macros: Macro[];
@@ -41,6 +41,9 @@ export class MacroTabComponent implements OnInit, OnDestroy, Tab {
text: macro.name text: macro.name
}; };
}); });
}
ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction); this.fromKeyAction(this.defaultKeyAction);
} }

View File

@@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnChanges } from '@angular/core';
import { KeyAction, MouseAction, MouseActionParam } from '../../../../config-serializer/config-items/key-action'; import { KeyAction, MouseAction, MouseActionParam } from '../../../../config-serializer/config-items/key-action';
import { Tab } from '../tab'; import { Tab } from '../tab';
@@ -8,7 +8,7 @@ import { Tab } from '../tab';
template: require('./mouse-tab.component.html'), template: require('./mouse-tab.component.html'),
styles: [require('./mouse-tab.component.scss')] styles: [require('./mouse-tab.component.scss')]
}) })
export class MouseTabComponent implements OnInit, Tab { export class MouseTabComponent implements OnChanges, Tab {
@Input() defaultKeyAction: KeyAction; @Input() defaultKeyAction: KeyAction;
private mouseActionParam: MouseActionParam; private mouseActionParam: MouseActionParam;
@@ -25,7 +25,7 @@ export class MouseTabComponent implements OnInit, Tab {
this.pages = ['Move', 'Scroll', 'Click', 'Speed']; this.pages = ['Move', 'Scroll', 'Click', 'Speed'];
} }
ngOnInit() { ngOnChanges() {
this.fromKeyAction(this.defaultKeyAction); this.fromKeyAction(this.defaultKeyAction);
} }

View File

@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { Tab } from '../tab'; import { Tab } from '../tab';
@@ -7,11 +7,7 @@ import { Tab } from '../tab';
template: require('./none-tab.component.html'), template: require('./none-tab.component.html'),
styles: [require('./none-tab.component.scss')] styles: [require('./none-tab.component.scss')]
}) })
export class NoneTabComponent implements OnInit, Tab { export class NoneTabComponent implements Tab {
constructor() { }
ngOnInit() { }
keyActionValid(): boolean { keyActionValid(): boolean {
return true; return true;
} }

View File

@@ -328,7 +328,6 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
hidePopover(): void { hidePopover(): void {
this.popoverShown = false; this.popoverShown = false;
this.popoverInitKeyAction = undefined;
} }
selectLayer(oldIndex: number, index: number): void { selectLayer(oldIndex: number, index: number): void {