From f619412f075d835f0ec84e3bc8a304cb831fc15e Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 9 Oct 2020 16:34:53 +0300 Subject: [PATCH 1/5] chore(animations): add animations dev sample --- src/app/app.component.ts | 5 + src/app/app.module.ts | 2 + src/app/app.routing.ts | 6 +- src/app/routing.ts | 5 + .../animations/animations.sample.html | 33 +++ .../animations/animations.sample.scss | 7 + .../animations/animations.sample.ts | 241 ++++++++++++++++++ 7 files changed, 298 insertions(+), 1 deletion(-) create mode 100644 src/app/styleguide/animations/animations.sample.html create mode 100644 src/app/styleguide/animations/animations.sample.scss create mode 100644 src/app/styleguide/animations/animations.sample.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 660442740d0..b575e119e24 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -516,6 +516,11 @@ export class AppComponent implements OnInit { ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1); styleLinks = [ + { + link: '/animations', + icon: 'color_lens', + name: 'Animations' + }, { link: '/colors', icon: 'color_lens', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 63ce2c97106..27405438642 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -136,6 +136,7 @@ import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-col import { IgxColumnGroupingDirective } from './grid-column-actions/custom-action-directive'; import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample'; import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample'; +import { AnimationsSampleComponent } from './styleguide/animations/animations.sample'; const components = [ ActionStripSampleComponent, @@ -228,6 +229,7 @@ const components = [ TreeGridLoadOnDemandSampleComponent, CustomContentComponent, ColorsSampleComponent, + AnimationsSampleComponent, ShadowsSampleComponent, TypographySampleComponent, RadioSampleComponent, diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index 91ceb2a9c58..38322699664 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -79,6 +79,7 @@ import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested- import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample'; import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample'; import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample'; +import { AnimationsSampleComponent } from './styleguide/animations/animations.sample'; const appRoutes = [ { @@ -202,11 +203,14 @@ const appRoutes = [ path: 'snackbar', component: SnackbarSampleComponent }, - { path: 'colors', component: ColorsSampleComponent }, + { + path: 'animations', + component: AnimationsSampleComponent + }, { path: 'shadows', component: ShadowsSampleComponent diff --git a/src/app/routing.ts b/src/app/routing.ts index 186509eb536..fb39311c702 100644 --- a/src/app/routing.ts +++ b/src/app/routing.ts @@ -112,6 +112,7 @@ import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested- import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample'; import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample'; import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample'; +import { AnimationsSampleComponent } from './styleguide/animations/animations.sample'; const appRoutes = [ { @@ -291,6 +292,10 @@ const appRoutes = [ path: 'colors', component: ColorsSampleComponent }, + { + path: 'animations', + component: AnimationsSampleComponent + }, { path: 'shadows', component: ShadowsSampleComponent diff --git a/src/app/styleguide/animations/animations.sample.html b/src/app/styleguide/animations/animations.sample.html new file mode 100644 index 00000000000..ca133aed17a --- /dev/null +++ b/src/app/styleguide/animations/animations.sample.html @@ -0,0 +1,33 @@ +
+
+

Animations categories

+
+ + +

{{ category }}

+ + +
+
+
+

Animations

+
+ + +

{{ animation.name }}

+ + +
+
+ +

This is a sample dialog showing the selected animation

+
+
+
+
+
+
+
+

Click outside the dialog to close it

+ +
\ No newline at end of file diff --git a/src/app/styleguide/animations/animations.sample.scss b/src/app/styleguide/animations/animations.sample.scss new file mode 100644 index 00000000000..a02df58cdc1 --- /dev/null +++ b/src/app/styleguide/animations/animations.sample.scss @@ -0,0 +1,7 @@ +.sample-wrapper { + display: flex; +} + +.sample-title { + margin-left: 8px; +} \ No newline at end of file diff --git a/src/app/styleguide/animations/animations.sample.ts b/src/app/styleguide/animations/animations.sample.ts new file mode 100644 index 00000000000..7472080d945 --- /dev/null +++ b/src/app/styleguide/animations/animations.sample.ts @@ -0,0 +1,241 @@ +import { AnimationReferenceMetadata } from '@angular/animations'; +import { Component, ViewChild } from '@angular/core'; +import { + blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, + flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat, + IgxDialogComponent, IgxOverlayService, IListItemClickEventArgs, + pulsateBck, pulsateFwd, rotateInBl, + rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, + rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, + rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, + rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, + rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, + scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, + scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, + scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, + scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, + scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, + shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, + slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, + slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, + swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, + swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, + swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd +} from 'igniteui-angular'; +import { AbsolutePosition } from 'projects/igniteui-angular/src/lib/services/overlay/utilities'; + +@Component({ + selector: 'app-animations-sample', + styleUrls: ['animations.sample.scss'], + templateUrl: 'animations.sample.html' +}) +export class AnimationsSampleComponent { + @ViewChild('dialog', { static: true, read: IgxDialogComponent }) + private dialog: IgxDialogComponent; + + public animationsCategories: string[] = [ + 'fade', + 'flip', + 'grow', + 'rotate', + 'scale', + 'slide', + 'swing', + 'shake', + 'pulsate' + ]; + + public animations: { name: string, animation: AnimationReferenceMetadata }[]; + + private fadeAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'fadeIn', animation: fadeIn }, + { name: 'fadeOut', animation: fadeOut }, + ]; + + private flipAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'flipTop', animation: flipTop }, + { name: 'flipRight', animation: flipRight }, + { name: 'flipBottom', animation: flipBottom }, + { name: 'flipLeft', animation: flipLeft }, + { name: 'flipHorFwd', animation: flipHorFwd }, + { name: 'flipHorBck', animation: flipHorBck }, + { name: 'flipVerFwd', animation: flipVerFwd }, + { name: 'flipVerBck', animation: flipVerBck } + ]; + + private growAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'growVerIn', animation: growVerIn }, + { name: 'growVerOut', animation: growVerOut }, + ]; + + private rotateAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'rotateInCenter', animation: rotateInCenter }, + { name: 'rotateInTop', animation: rotateInTop }, + { name: 'rotateInRight', animation: rotateInRight }, + { name: 'rotateInLeft', animation: rotateInLeft }, + { name: 'rotateInBottom', animation: rotateInBottom }, + { name: 'rotateInTr', animation: rotateInTr }, + { name: 'rotateInBr', animation: rotateInBr }, + { name: 'rotateInBl', animation: rotateInBl }, + { name: 'rotateInTl', animation: rotateInTl }, + { name: 'rotateInDiagonal1', animation: rotateInDiagonal1 }, + { name: 'rotateInDiagonal2', animation: rotateInDiagonal2 }, + { name: 'rotateInHor', animation: rotateInHor }, + { name: 'rotateInVer', animation: rotateInVer }, + { name: 'rotateOutCenter', animation: rotateOutCenter }, + { name: 'rotateOutTop', animation: rotateOutTop }, + { name: 'rotateOutRight', animation: rotateOutRight }, + { name: 'rotateOutLeft', animation: rotateOutLeft }, + { name: 'rotateOutBottom', animation: rotateOutBottom }, + { name: 'rotateOutTr', animation: rotateOutTr }, + { name: 'rotateOutBr', animation: rotateOutBr }, + { name: 'rotateOutBl', animation: rotateOutBl }, + { name: 'rotateOutTl', animation: rotateOutTl }, + { name: 'rotateOutDiagonal1', animation: rotateOutDiagonal1 }, + { name: 'rotateOutDiagonal2', animation: rotateOutDiagonal2 }, + { name: 'rotateOutHor', animation: rotateOutHor }, + { name: 'rotateOutVer', animation: rotateOutVer } + ]; + + private scaleAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'scaleInTop', animation: scaleInTop }, + { name: 'scaleInRight', animation: scaleInRight }, + { name: 'scaleInBottom', animation: scaleInBottom }, + { name: 'scaleInLeft', animation: scaleInLeft }, + { name: 'scaleInCenter', animation: scaleInCenter }, + { name: 'scaleInTr', animation: scaleInTr }, + { name: 'scaleInBr', animation: scaleInBr }, + { name: 'scaleInBl', animation: scaleInBl }, + { name: 'scaleInTl', animation: scaleInTl }, + { name: 'scaleInVerTop', animation: scaleInVerTop }, + { name: 'scaleInVerBottom', animation: scaleInVerBottom }, + { name: 'scaleInVerCenter', animation: scaleInVerCenter }, + { name: 'scaleInHorCenter', animation: scaleInHorCenter }, + { name: 'scaleInHorLeft', animation: scaleInHorLeft }, + { name: 'scaleInHorRight', animation: scaleInHorRight }, + { name: 'scaleOutTop', animation: scaleOutTop }, + { name: 'scaleOutRight', animation: scaleOutRight }, + { name: 'scaleOutBottom', animation: scaleOutBottom }, + { name: 'scaleOutLeft', animation: scaleOutLeft }, + { name: 'scaleOutCenter', animation: scaleOutCenter }, + { name: 'scaleOutTr', animation: scaleOutTr }, + { name: 'scaleOutBr', animation: scaleOutBr }, + { name: 'scaleOutBl', animation: scaleOutBl }, + { name: 'scaleOutTl', animation: scaleOutTl }, + { name: 'scaleOutVerTop', animation: scaleOutVerTop }, + { name: 'scaleOutVerBottom', animation: scaleOutVerBottom }, + { name: 'scaleOutVerCenter', animation: scaleOutVerCenter }, + { name: 'scaleOutHorCenter', animation: scaleOutHorCenter }, + { name: 'scaleOutHorLeft', animation: scaleOutHorLeft }, + { name: 'scaleOutHorRight', animation: scaleOutHorRight } + ]; + + private slideAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'slideInTop', animation: slideInTop }, + { name: 'slideInRight', animation: slideInRight }, + { name: 'slideInBottom', animation: slideInBottom }, + { name: 'slideInLeft', animation: slideInLeft }, + { name: 'slideInTr', animation: slideInTr }, + { name: 'slideInBr', animation: slideInBr }, + { name: 'slideInBl', animation: slideInBl }, + { name: 'slideInTl', animation: slideInTl }, + { name: 'slideOutTop', animation: slideOutTop }, + { name: 'slideOutBottom', animation: slideOutBottom }, + { name: 'slideOutRight', animation: slideOutRight }, + { name: 'slideOutLeft', animation: slideOutLeft }, + { name: 'slideOutTr', animation: slideOutTr }, + { name: 'slideOutBr', animation: slideOutBr }, + { name: 'slideOutBl', animation: slideOutBl }, + { name: 'slideOutTl', animation: slideOutTl } + ]; + + private swingAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'swingInTopFwd', animation: swingInTopFwd }, + { name: 'swingInRightFwd', animation: swingInRightFwd }, + { name: 'swingInLeftFwd', animation: swingInLeftFwd }, + { name: 'swingInBottomFwd', animation: swingInBottomFwd }, + { name: 'swingInTopBck', animation: swingInTopBck }, + { name: 'swingInRightBck', animation: swingInRightBck }, + { name: 'swingInBottomBck', animation: swingInBottomBck }, + { name: 'swingInLeftBck', animation: swingInLeftBck }, + { name: 'swingOutTopFwd', animation: swingOutTopFwd }, + { name: 'swingOutRightFwd', animation: swingOutRightFwd }, + { name: 'swingOutBottomFwd', animation: swingOutBottomFwd }, + { name: 'swingOutLefttFwd', animation: swingOutLefttFwd }, + { name: 'swingOutTopBck', animation: swingOutTopBck }, + { name: 'swingOutRightBck', animation: swingOutRightBck }, + { name: 'swingOutBottomBck', animation: swingOutBottomBck }, + { name: 'swingOutLeftBck', animation: swingOutLeftBck } + ]; + + private shakeAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'shakeHor', animation: shakeHor }, + { name: 'shakeVer', animation: shakeVer }, + { name: 'shakeTop', animation: shakeTop }, + { name: 'shakeBottom', animation: shakeBottom }, + { name: 'shakeRight', animation: shakeRight }, + { name: 'shakeLeft', animation: shakeLeft }, + { name: 'shakeCenter', animation: shakeCenter }, + { name: 'shakeTr', animation: shakeTr }, + { name: 'shakeBr', animation: shakeBr }, + { name: 'shakeBl', animation: shakeBl }, + { name: 'shakeTl', animation: shakeTl } + ]; + + private pulsateAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'heartbeat', animation: heartbeat }, + { name: 'pulsateFwd', animation: pulsateFwd }, + { name: 'pulsateBck', animation: pulsateBck }, + { name: 'blink', animation: blink } + ]; + + constructor() { + this.animations = this.fadeAnimations; + } + + public categoryItemClicked(e: IListItemClickEventArgs): void { + const category = this.animationsCategories[e.item.index]; + switch (category) { + case 'fade': + this.animations = this.fadeAnimations; + break; + case 'flip': + this.animations = this.flipAnimations; + break; + case 'grow': + this.animations = this.growAnimations; + break; + case 'rotate': + this.animations = this.rotateAnimations; + break; + case 'scale': + this.animations = this.scaleAnimations; + break; + case 'slide': + this.animations = this.slideAnimations; + break; + case 'swing': + this.animations = this.swingAnimations; + break; + case 'shake': + this.animations = this.shakeAnimations; + break; + case 'pulsate': + this.animations = this.pulsateAnimations; + break; + } + } + + public playAnimation(e: IListItemClickEventArgs): void { + const animation = this.animations[e.item.index].animation; + if (animation.options?.params?.duration && animation.options?.params?.duration !== '1000ms') { + animation.options.params.duration = '1000ms'; + } + const overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Center); + overlaySettings.closeOnOutsideClick = true; + overlaySettings.modal = true; + overlaySettings.positionStrategy.settings.openAnimation = animation; + overlaySettings.positionStrategy.settings.closeAnimation = null; + this.dialog.open(overlaySettings); + } +} From 5a63aee8690fd6d61a518d051f6c0e9baa8eb16e Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 9 Oct 2020 18:04:33 +0300 Subject: [PATCH 2/5] fix(overlay): change animation if flipped, #8238 --- .../igniteui-angular/src/lib/core/utils.ts | 150 +++++++++++++++++- .../position/auto-position-strategy.ts | 21 ++- 2 files changed, 166 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index ee671c56e0c..a436aaad56f 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,9 +1,30 @@ -import { Injectable, PLATFORM_ID, Inject } from '@angular/core'; +import { AnimationReferenceMetadata } from '@angular/animations'; import { isPlatformBrowser } from '@angular/common'; -import { Observable } from 'rxjs'; +import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; +import merge from 'lodash.merge'; import ResizeObserver from 'resize-observer-polyfill'; +import { Observable } from 'rxjs'; +import { + blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, + flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat, pulsateBck, pulsateFwd, rotateInBl, + rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, + rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, + rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, + rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, + rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, + scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, + scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, + scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, + scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, + scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, + shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, + slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, + slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, + swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, + swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, + swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd +} from '../animations/main'; import { setImmediate } from './setImmediate'; -import merge from 'lodash.merge'; /** * @hidden @@ -395,7 +416,6 @@ export function resolveNestedPath(obj: any, path: string) { return current; } - /** * * Given a property access path in the format `x.y.z` and a value @@ -451,3 +471,125 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index: } export function mkenum(x: T) { return x; } + +export function oppositeAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { + return oppositeAnimation.get(animation) ?? animation; +} + +const oppositeAnimation: Map = new Map([ + [fadeIn, fadeIn], + [fadeOut, fadeOut], + [flipTop, flipBottom], + [flipBottom, flipTop], + [flipRight, flipLeft], + [flipLeft, flipRight], + [flipHorFwd, flipHorBck], + [flipHorBck, flipHorFwd], + [flipVerFwd, flipVerBck], + [flipVerBck, flipVerFwd], + [growVerIn, growVerIn], + [growVerOut, growVerOut], + [heartbeat, heartbeat], + [pulsateFwd, pulsateBck], + [pulsateBck, pulsateFwd], + [blink, blink], + [shakeHor, shakeHor], + [shakeVer, shakeVer], + [shakeTop, shakeTop], + [shakeBottom, shakeBottom], + [shakeRight, shakeRight], + [shakeLeft, shakeLeft], + [shakeCenter, shakeCenter], + [shakeTr, shakeTr], + [shakeBr, shakeBr], + [shakeBl, shakeBl], + [shakeTl, shakeTl], + [rotateInCenter, rotateInCenter], + [rotateOutCenter, rotateOutCenter], + [rotateInTop, rotateInBottom], + [rotateOutTop, rotateOutBottom], + [rotateInRight, rotateInLeft], + [rotateOutRight, rotateOutLeft], + [rotateInLeft, rotateInRight], + [rotateOutLeft, rotateOutRight], + [rotateInBottom, rotateInTop], + [rotateOutBottom, rotateOutTop], + [rotateInTr, rotateInBl], + [rotateOutTr, rotateOutBl], + [rotateInBr, rotateInTl], + [rotateOutBr, rotateOutTl], + [rotateInBl, rotateInTr], + [rotateOutBl, rotateOutTr], + [rotateInTl, rotateInBr], + [rotateOutTl, rotateOutBr], + [rotateInDiagonal1, rotateInDiagonal1], + [rotateOutDiagonal1, rotateOutDiagonal1], + [rotateInDiagonal2, rotateInDiagonal2], + [rotateOutDiagonal2, rotateOutDiagonal2], + [rotateInHor, rotateInHor], + [rotateOutHor, rotateOutHor], + [rotateInVer, rotateInVer], + [rotateOutVer, rotateOutVer], + [scaleInTop, scaleInBottom], + [scaleOutTop, scaleOutBottom], + [scaleInRight, scaleInLeft], + [scaleOutRight, scaleOutLeft], + [scaleInBottom, scaleInTop], + [scaleOutBottom, scaleOutTop], + [scaleInLeft, scaleInRight], + [scaleOutLeft, scaleOutRight], + [scaleInCenter, scaleInCenter], + [scaleOutCenter, scaleOutCenter], + [scaleInTr, scaleInBl], + [scaleOutTr, scaleOutBl], + [scaleInBr, scaleInTl], + [scaleOutBr, scaleOutTl], + [scaleInBl, scaleInTr], + [scaleOutBl, scaleOutTr], + [scaleInTl, scaleInBr], + [scaleOutTl, scaleOutBr], + [scaleInVerTop, scaleInVerBottom], + [scaleOutVerTop, scaleOutVerBottom], + [scaleInVerBottom, scaleInVerTop], + [scaleOutVerBottom, scaleOutVerTop], + [scaleInVerCenter, scaleInVerCenter], + [scaleOutVerCenter, scaleOutVerCenter], + [scaleInHorCenter, scaleInHorCenter], + [scaleOutHorCenter, scaleOutHorCenter], + [scaleInHorLeft, scaleInHorRight], + [scaleOutHorLeft, scaleOutHorRight], + [scaleInHorRight, scaleInHorLeft], + [scaleOutHorRight, scaleOutHorLeft], + [slideInTop, slideInBottom], + [slideOutTop, slideOutBottom], + [slideInRight, slideInLeft], + [slideOutRight, slideOutLeft], + [slideInBottom, slideInTop], + [slideOutBottom, slideOutTop], + [slideInLeft, slideInRight], + [slideOutLeft, slideOutRight], + [slideInTr, slideInBl], + [slideOutTr, slideOutBl], + [slideInBr, slideInTl], + [slideOutBr, slideOutTl], + [slideInBl, slideInTr], + [slideOutBl, slideOutTr], + [slideInTl, slideInBr], + [slideOutTl, slideOutBr], + [swingInTopFwd, swingInBottomFwd], + [swingOutTopFwd, swingOutBottomFwd], + [swingInRightFwd, swingInLeftFwd], + [swingOutRightFwd, swingOutLefttFwd], + [swingInLeftFwd, swingInRightFwd], + [swingOutLefttFwd, swingOutRightFwd], + [swingInBottomFwd, swingInTopFwd], + [swingOutBottomFwd, swingOutTopFwd], + [swingInTopBck, swingInBottomBck], + [swingOutTopBck, swingOutBottomBck], + [swingInRightBck, swingInLeftBck], + [swingOutRightBck, swingOutLeftBck], + [swingInBottomBck, swingInTopBck], + [swingOutBottomBck, swingOutTopBck], + [swingInLeftBck, swingInRightBck], + [swingOutLeftBck, swingOutRightBck], +]); diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts index 5c334e22fa9..1e50c0521d1 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts @@ -1,4 +1,5 @@ -import { VerticalAlignment, HorizontalAlignment, ConnectedFit } from './../utilities'; +import { oppositeAnimationResolver } from '../../../core/utils'; +import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities'; import { BaseFitPositionStrategy } from './base-fit-position-strategy'; /** @@ -10,9 +11,12 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { /** @inheritdoc */ protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit) { const transformString: string[] = []; + let flipped = false; if (connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0) { if (this.canFlipHorizontal(connectedFit)) { this.flipHorizontal(); + this.flipAnimation(); + flipped = true; } else { const horizontalPush = this.horizontalPush(connectedFit); transformString.push(`translateX(${horizontalPush}px)`); @@ -22,6 +26,9 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { if (connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0) { if (this.canFlipVertical(connectedFit)) { this.flipVertical(); + if (!flipped) { + this.flipAnimation(); + } } else { const verticalPush = this.verticalPush(connectedFit); transformString.push(`translateY(${verticalPush}px)`); @@ -150,4 +157,16 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { return 0; } } + + /** + * Changes open and close animation with opposite animation if one exists + */ + private flipAnimation() { + if (this.settings.openAnimation) { + this.settings.openAnimation = oppositeAnimationResolver(this.settings.openAnimation); + } + if (this.settings.closeAnimation) { + this.settings.closeAnimation = oppositeAnimationResolver(this.settings.closeAnimation); + } + } } From 46c8af4ffea6ebdf9aa1d9c36f6c7fb34a4e03d1 Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 12 Oct 2020 09:42:15 +0300 Subject: [PATCH 3/5] refactor(overlay): rename resolver function --- projects/igniteui-angular/src/lib/core/utils.ts | 2 +- .../lib/services/overlay/position/auto-position-strategy.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index a436aaad56f..c5a040f3a59 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -472,7 +472,7 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index: export function mkenum(x: T) { return x; } -export function oppositeAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { +export function reverseAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { return oppositeAnimation.get(animation) ?? animation; } diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts index 1e50c0521d1..60451c1a826 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts @@ -1,4 +1,4 @@ -import { oppositeAnimationResolver } from '../../../core/utils'; +import { reverseAnimationResolver } from '../../../core/utils'; import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities'; import { BaseFitPositionStrategy } from './base-fit-position-strategy'; @@ -163,10 +163,10 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { */ private flipAnimation() { if (this.settings.openAnimation) { - this.settings.openAnimation = oppositeAnimationResolver(this.settings.openAnimation); + this.settings.openAnimation = reverseAnimationResolver(this.settings.openAnimation); } if (this.settings.closeAnimation) { - this.settings.closeAnimation = oppositeAnimationResolver(this.settings.closeAnimation); + this.settings.closeAnimation = reverseAnimationResolver(this.settings.closeAnimation); } } } From 57fbf45f12f183afab75281d1560ecc852ab38fb Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 12 Oct 2020 10:04:34 +0300 Subject: [PATCH 4/5] refactor(demos): update animations sample dialog --- .../animations/animations.sample.html | 26 ++++++++++--------- .../animations/animations.sample.scss | 3 ++- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/app/styleguide/animations/animations.sample.html b/src/app/styleguide/animations/animations.sample.html index ca133aed17a..409cdb2031b 100644 --- a/src/app/styleguide/animations/animations.sample.html +++ b/src/app/styleguide/animations/animations.sample.html @@ -3,7 +3,10 @@

Animations categories

- +

{{ category }}

 @@ -19,15 +22,14 @@

Animations

- -

This is a sample dialog showing the selected animation

-
-
-
-
-
-
-
-

Click outside the dialog to close it

+ - \ No newline at end of file + + diff --git a/src/app/styleguide/animations/animations.sample.scss b/src/app/styleguide/animations/animations.sample.scss index a02df58cdc1..5f33e3929b4 100644 --- a/src/app/styleguide/animations/animations.sample.scss +++ b/src/app/styleguide/animations/animations.sample.scss @@ -4,4 +4,5 @@ .sample-title { margin-left: 8px; -} \ No newline at end of file +} + From 2e7dac9ea37a416c1ff3d3fd8f0b5d7b2986ba6f Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 12 Oct 2020 11:40:01 +0300 Subject: [PATCH 5/5] refactor(overlay): flip animation depending on direction, #8238 --- .../igniteui-angular/src/lib/core/utils.ts | 119 ++++++++++++++++++ .../position/auto-position-strategy.ts | 48 +++++-- 2 files changed, 156 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index c5a040f3a59..725d25c8054 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -476,6 +476,14 @@ export function reverseAnimationResolver(animation: AnimationReferenceMetadata): return oppositeAnimation.get(animation) ?? animation; } +export function isHorizontalAnimation(animation: AnimationReferenceMetadata): boolean { + return horizontalAnimations.includes(animation); +} + +export function isVerticalAnimation(animation: AnimationReferenceMetadata): boolean { + return verticalAnimations.includes(animation); +} + const oppositeAnimation: Map = new Map([ [fadeIn, fadeIn], [fadeOut, fadeOut], @@ -593,3 +601,114 @@ const oppositeAnimation: Map