From 996ad59dc429c6a613901e6a6359d18de1dfab14 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Mon, 28 Nov 2016 09:06:14 +0100 Subject: [PATCH] Added popover overlay --- src/components/popover/popover.component.html | 118 ++++++++++-------- src/components/popover/popover.component.scss | 24 +++- src/components/popover/popover.component.ts | 71 +++++------ .../svg/wrap/svg-keyboard-wrap.component.html | 2 +- 4 files changed, 121 insertions(+), 94 deletions(-) diff --git a/src/components/popover/popover.component.html b/src/components/popover/popover.component.html index a63dcc87..7df63e94 100644 --- a/src/components/popover/popover.component.html +++ b/src/components/popover/popover.component.html @@ -1,59 +1,67 @@ -
-
-
-
- +
+
+
+
+
+ +
-
-
- - - - - - -
-
-
- - +
+ + + + + + +
+
+
+ + +
+
diff --git a/src/components/popover/popover.component.scss b/src/components/popover/popover.component.scss index ff0ea9d0..0b76bf20 100644 --- a/src/components/popover/popover.component.scss +++ b/src/components/popover/popover.component.scss @@ -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; diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts index 3116b9ea..59d00b61 100644 --- a/src/components/popover/popover.component.ts +++ b/src/components/popover/popover.component.ts @@ -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(); @Output() remap = new EventEmitter(); @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; - private popoverHost: HTMLElement; - - constructor(private store: Store, 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) { 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; diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.html b/src/components/svg/wrap/svg-keyboard-wrap.component.html index 658c6003..89b7fcc4 100644 --- a/src/components/svg/wrap/svg-keyboard-wrap.component.html +++ b/src/components/svg/wrap/svg-keyboard-wrap.component.html @@ -9,7 +9,7 @@ >
- +