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

Added popover overlay

Browse Source
This commit is contained in:
NejcZdovc
2016-11-28 09:06:14 +01:00
committed by József Farkas
parent 97b7f8008b
commit 996ad59dc4
4 changed files with 121 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/popover/popover.component.html
View File

@@ -1,59 +1,67 @@
<div class="arrowCustom"></div>
<div class="container-fluid">
<div class="row">
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
<li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
<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>
</a>
</li>
</ul>
<div class="popover"
#popover
[ngClass]="{'display': visible, 'leftArrow': leftArrow, 'rightArrow': rightArrow}"
[style.top.px]="topPosition"
[style.left.px]="leftPosition"
>
<div class="arrowCustom"></div>
<div class="container-fluid">
<div class="row">
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
<li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
<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>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row" [ngSwitch]="activeTab">
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab>
</div>
<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 class="row" [ngSwitch]="activeTab">
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab>
</div>
<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 class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

24
src/components/popover/popover.component.scss
View File

@@ -1,13 +1,14 @@
:host {
.popover {
display: flex;
flex-direction: column;
padding: 0;
max-width: 568px;
width: 100%;
transform: translateX(-50%);
visibility: hidden;
> .container-fluid {
overflow: hidden;
&.display {
visibility: visible;
}
&.leftArrow {
@@ -28,6 +29,10 @@
left: auto;
}
}
> .container-fluid {
overflow: hidden;
}
}
.arrowCustom {
@@ -100,6 +105,19 @@
padding: 10px 24px;
}
.popover-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
&.display {
display: block;
}
}
.select2-item {
position: relative;
font-size: 1.5rem;

71
src/components/popover/popover.component.ts
View File

@@ -1,5 +1,5 @@
import {
Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild
Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild
} from '@angular/core';
import { Store } from '@ngrx/store';
@@ -32,62 +32,59 @@ enum TabName {
@Component({
selector: 'popover',
template: require('./popover.component.html'),
styles: [require('./popover.component.scss')],
host: { 'class': 'popover' }
styles: [require('./popover.component.scss')]
})
export class PopoverComponent implements OnInit, OnChanges {
export class PopoverComponent implements OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() currentKeymap: Keymap;
@Input() keyPosition: ClientRect;
@Input() wrapPosition: ClientRect;
@Input() visible: boolean;
@Output() cancel = new EventEmitter<any>();
@Output() remap = new EventEmitter<KeyAction>();
@ViewChild('tab') selectedTab: Tab;
@HostBinding('style.top.px') topPosition: number;
@HostBinding('style.left.px') leftPosition: number;
@HostBinding('class.leftArrow') leftArrow: boolean = false;
@HostBinding('class.rightArrow') rightArrow: boolean = false;
@ViewChild('popover') popoverHost: ElementRef;
public tabName = TabName;
private activeTab: TabName;
private keymaps$: Observable<Keymap[]>;
private popoverHost: HTMLElement;
constructor(private store: Store<AppState>, private element: ElementRef) {
this.popoverHost = element.nativeElement;
private leftArrow: boolean = false;
private rightArrow: boolean = false;
private topPosition: number = 0;
private leftPosition: number = 0;
constructor(private store: Store<AppState>) {
this.keymaps$ = store.let(getKeymapEntities())
.map((keymaps: Keymap[]) =>
keymaps.filter((keymap: Keymap) => this.currentKeymap.abbreviation !== keymap.abbreviation)
);
}
ngOnInit() {
let tab: TabName;
if (this.defaultKeyAction instanceof KeystrokeAction) {
tab = TabName.Keypress;
} else if (this.defaultKeyAction instanceof SwitchLayerAction) {
tab = TabName.Layer;
} else if (this.defaultKeyAction instanceof MouseAction) {
tab = TabName.Mouse;
} else if (this.defaultKeyAction instanceof PlayMacroAction) {
tab = TabName.Macro;
} else if (this.defaultKeyAction instanceof SwitchKeymapAction) {
tab = TabName.Keymap;
} else {
tab = TabName.None;
ngOnChanges(change: SimpleChanges) {
if (this.keyPosition && this.wrapPosition && (change['keyPosition'] || change['wrapPosition'])) {
this.calculatePosition();
}
this.selectTab(tab);
}
if (change['defaultKeyAction']) {
let tab: TabName;
ngOnChanges(change: SimpleChanges) {
if (change['keyPosition'] || change['wrapPosition']) {
this.calculatePosition();
if (this.defaultKeyAction instanceof KeystrokeAction) {
tab = TabName.Keypress;
} else if (this.defaultKeyAction instanceof SwitchLayerAction) {
tab = TabName.Layer;
} else if (this.defaultKeyAction instanceof MouseAction) {
tab = TabName.Mouse;
} else if (this.defaultKeyAction instanceof PlayMacroAction) {
tab = TabName.Macro;
} else if (this.defaultKeyAction instanceof SwitchKeymapAction) {
tab = TabName.Keymap;
} else {
tab = TabName.None;
}
this.selectTab(tab);
}
}
@@ -109,17 +106,21 @@ export class PopoverComponent implements OnInit, OnChanges {
this.activeTab = tab;
}
onOverlay() {
this.cancel.emit(undefined);
}
private calculatePosition() {
const offsetLeft: number = this.wrapPosition.left + 265;
let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2);
this.leftArrow = newLeft < offsetLeft;
this.rightArrow = (newLeft + this.popoverHost.offsetWidth) > offsetLeft + this.wrapPosition.width;
this.rightArrow = (newLeft + this.popoverHost.nativeElement.offsetWidth) > offsetLeft + this.wrapPosition.width;
if (this.leftArrow) {
newLeft = this.keyPosition.left;
} else if (this.rightArrow) {
newLeft = this.keyPosition.left - this.popoverHost.offsetWidth + this.keyPosition.width;
newLeft = this.keyPosition.left - this.popoverHost.nativeElement.offsetWidth + this.keyPosition.width;
}
this.topPosition = this.keyPosition.top + this.keyPosition.height + 7;

2
src/components/svg/wrap/svg-keyboard-wrap.component.html
View File

@@ -9,7 +9,7 @@
>
</svg-keyboard>
</div>
<popover *ngIf="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
<popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
<div class="tooltip bottom"
[class.in]="tooltipData.show"
[style.top.px]="tooltipData.posTop"