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

Added positioning to the popover

Browse Source
This commit is contained in:
NejcZdovc
2016-11-25 22:11:08 +01:00
committed by József Farkas
parent a6402d7255
commit 97b7f8008b
12 changed files with 154 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,38 +1,39 @@
<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)">
<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)">
<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)">
<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)">
<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)">
<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)">
<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>
@@ -42,12 +43,12 @@
</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>
<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">

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

@@ -1,11 +1,66 @@
:host {
display: flex;
flex-direction: column;
max-width: none;
padding: 0;
max-width: 568px;
width: 100%;
transform: translateX(-50%);
> .container-fluid {
overflow: hidden;
}
&.leftArrow {
transform: none;
.arrowCustom {
transform: none;
left: 22px;
}
}
&.rightArrow {
transform: none;
.arrowCustom {
transform: none;
right: 22px;
left: auto;
}
}
}
.arrowCustom {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
top: 100px;
width: 41px;
height: 16px;
&:before {
content: '';
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 17px solid rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
top: -1px;
}
&:after {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 16px solid #f7f7f7;
display: block;
position: absolute;
top: 0;
}
}
.popover-action {

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

@@ -1,4 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import {
Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild
} from '@angular/core';
import { Store } from '@ngrx/store';
@@ -33,23 +35,30 @@ enum TabName {
styles: [require('./popover.component.scss')],
host: { 'class': 'popover' }
})
export class PopoverComponent implements OnInit {
export class PopoverComponent implements OnInit, OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() currentKeymap: Keymap;
@Input() keyPosition: ClientRect;
@Input() wrapPosition: ClientRect;
@Output() cancel = new EventEmitter<any>();
@Output() remap = new EventEmitter<KeyAction>();
@ViewChild('tab') selectedTab: Tab;
/* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
/* tslint:disable:no-unused-variable: It is used in the template. */
private TabName = TabName;
/* tslint:enable:no-unused-variable tslint:enable:variable-name */
@HostBinding('style.top.px') topPosition: number;
@HostBinding('style.left.px') leftPosition: number;
@HostBinding('class.leftArrow') leftArrow: boolean = false;
@HostBinding('class.rightArrow') rightArrow: boolean = false;
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;
constructor(private store: Store<AppState>) {
this.keymaps$ = store.let(getKeymapEntities())
.map((keymaps: Keymap[]) =>
keymaps.filter((keymap: Keymap) => this.currentKeymap.abbreviation !== keymap.abbreviation)
@@ -76,6 +85,12 @@ export class PopoverComponent implements OnInit {
this.selectTab(tab);
}
ngOnChanges(change: SimpleChanges) {
if (change['keyPosition'] || change['wrapPosition']) {
this.calculatePosition();
}
}
onCancelClick(): void {
this.cancel.emit(undefined);
}
@@ -93,4 +108,21 @@ export class PopoverComponent implements OnInit {
selectTab(tab: TabName): void {
this.activeTab = tab;
}
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;
if (this.leftArrow) {
newLeft = this.keyPosition.left;
} else if (this.rightArrow) {
newLeft = this.keyPosition.left - this.popoverHost.offsetWidth + this.keyPosition.width;
}
this.topPosition = this.keyPosition.top + this.keyPosition.height + 7;
this.leftPosition = newLeft;
}
}