From e3f8ca4357a029d9f24dbdfc75d715fda29e2362 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Mon, 28 Nov 2016 10:05:49 +0100 Subject: [PATCH] Popover Animation --- src/components/popover/popover.component.html | 3 +- src/components/popover/popover.component.scss | 20 +++----- src/components/popover/popover.component.ts | 48 +++++++++++++++++-- .../svg/wrap/svg-keyboard-wrap.component.scss | 1 + .../svg/wrap/svg-keyboard-wrap.component.ts | 11 +++-- 5 files changed, 62 insertions(+), 21 deletions(-) diff --git a/src/components/popover/popover.component.html b/src/components/popover/popover.component.html index 7df63e94..d1867487 100644 --- a/src/components/popover/popover.component.html +++ b/src/components/popover/popover.component.html @@ -1,6 +1,7 @@
diff --git a/src/components/popover/popover.component.scss b/src/components/popover/popover.component.scss index 0b76bf20..86c78fc4 100644 --- a/src/components/popover/popover.component.scss +++ b/src/components/popover/popover.component.scss @@ -4,16 +4,8 @@ padding: 0; max-width: 568px; width: 100%; - transform: translateX(-50%); - visibility: hidden; - - &.display { - visibility: visible; - } &.leftArrow { - transform: none; - .arrowCustom { transform: none; left: 22px; @@ -21,8 +13,6 @@ } &.rightArrow { - transform: none; - .arrowCustom { transform: none; right: 22px; @@ -108,13 +98,17 @@ .popover-overlay { position: fixed; width: 100%; - height: 100%; + height: 0; top: 0; left: 0; - display: none; + z-index: 1050; + background: rgba(0, 0, 0, 0); + transition: background 200ms ease-out, height 0ms 200ms linear; &.display { - display: block; + height: 100%; + background: rgba(0, 0, 0, 0.2); + transition: background 200ms ease-out; } } diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts index 59d00b61..c7f60f20 100644 --- a/src/components/popover/popover.component.ts +++ b/src/components/popover/popover.component.ts @@ -1,5 +1,6 @@ import { - Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild + Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, animate, keyframes, + state, style, transition, trigger } from '@angular/core'; import { Store } from '@ngrx/store'; @@ -32,7 +33,33 @@ enum TabName { @Component({ selector: 'popover', template: require('./popover.component.html'), - styles: [require('./popover.component.scss')] + styles: [require('./popover.component.scss')], + animations: [ + trigger('popover', [ + state('closed', style({ + transform: 'translateY(30px)', + visibility: 'hidden', + opacity: 0 + })), + state('opened', style({ + transform: 'translateY(0)', + visibility: 'visible', + opacity: 1 + })), + transition('opened => closed', [ + animate('200ms ease-out', keyframes([ + style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0 }), + style({ transform: 'translateY(30px)', visibility: 'hidden', opacity: 0 , offset: 1 }) + ])) + ]), + transition('closed => opened', [ + animate('200ms ease-out', keyframes([ + style({ transform: 'translateY(30px)', visibility: 'visible', opacity: 0, offset: 0 }), + style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 1 }) + ])) + ]) + ]) + ] }) export class PopoverComponent implements OnChanges { @Input() defaultKeyAction: KeyAction; @@ -54,8 +81,10 @@ export class PopoverComponent implements OnChanges { private rightArrow: boolean = false; private topPosition: number = 0; private leftPosition: number = 0; + private animationState: string; constructor(private store: Store) { + this.animationState = 'closed'; this.keymaps$ = store.let(getKeymapEntities()) .map((keymaps: Keymap[]) => keymaps.filter((keymap: Keymap) => this.currentKeymap.abbreviation !== keymap.abbreviation) @@ -86,6 +115,14 @@ export class PopoverComponent implements OnChanges { this.selectTab(tab); } + + if (change['visible']) { + if (change['visible'].currentValue) { + this.animationState = 'opened'; + } else { + this.animationState = 'closed'; + } + } } onCancelClick(): void { @@ -112,15 +149,18 @@ export class PopoverComponent implements OnChanges { private calculatePosition() { const offsetLeft: number = this.wrapPosition.left + 265; + const popover: HTMLElement = this.popoverHost.nativeElement; let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2); this.leftArrow = newLeft < offsetLeft; - this.rightArrow = (newLeft + this.popoverHost.nativeElement.offsetWidth) > offsetLeft + this.wrapPosition.width; + this.rightArrow = (newLeft + popover.offsetWidth) > offsetLeft + this.wrapPosition.width; if (this.leftArrow) { newLeft = this.keyPosition.left; } else if (this.rightArrow) { - newLeft = this.keyPosition.left - this.popoverHost.nativeElement.offsetWidth + this.keyPosition.width; + newLeft = this.keyPosition.left - popover.offsetWidth + this.keyPosition.width; + } else { + newLeft -= popover.offsetWidth / 2; } this.topPosition = this.keyPosition.top + this.keyPosition.height + 7; diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.scss b/src/components/svg/wrap/svg-keyboard-wrap.component.scss index 591d35b2..28d5cb2b 100644 --- a/src/components/svg/wrap/svg-keyboard-wrap.component.scss +++ b/src/components/svg/wrap/svg-keyboard-wrap.component.scss @@ -9,6 +9,7 @@ svg-keyboard { position: absolute; left: 0; transform: translateX(-101%); + user-select: none; } .keyboard-slider { diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/src/components/svg/wrap/svg-keyboard-wrap.component.ts index 1b4d5259..ced28973 100644 --- a/src/components/svg/wrap/svg-keyboard-wrap.component.ts +++ b/src/components/svg/wrap/svg-keyboard-wrap.component.ts @@ -108,9 +108,14 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { private keyElement: HTMLElement; @HostListener('window:resize') - onClick() { - this.wrapPosition = this.wrapHost.getBoundingClientRect(); - this.keyPosition = this.keyElement.getBoundingClientRect(); + onResize() { + if (this.wrapHost) { + this.wrapPosition = this.wrapHost.getBoundingClientRect(); + } + + if (this.keyElement) { + this.keyPosition = this.keyElement.getBoundingClientRect(); + } } constructor(private store: Store, private mapper: MapperService, private element: ElementRef) {