From a22f2b4c398d60f273de7790b9646f5dbcad5fdb Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Mon, 4 Jan 2021 10:46:50 +0100
Subject: [PATCH] [US TRTL-584] add animations ts in common front end
---
.../src/app/modules/animations/index.ts | 1 +
.../animations/vitamui-common-animations.ts | 95 +++++++++++++++++++
.../collapse/collapse.component.html | 2 +-
.../collapse/collapse.component.spec.ts | 6 +-
.../components/collapse/collapse.component.ts | 19 ++--
.../common-tooltip.component.html | 2 +-
.../common-tooltip.component.ts | 11 +--
.../header/menu/menu.component.html | 2 +-
.../components/header/menu/menu.component.ts | 37 +-------
.../components/navbar/navbar.component.ts | 9 +-
.../components/stepper/stepper.component.html | 2 +-
.../components/stepper/stepper.component.ts | 8 +-
.../vitamui-field-error.component.ts | 14 +--
.../vitamui-input-error.component.ts | 14 +--
.../directives/tooltip/tooltip.component.ts | 13 +--
.../src/app/modules/index.ts | 1 +
.../customer-list.component.html | 4 +-
.../customer-list/customer-list.component.ts | 24 +++--
.../group-create/group-create.component.ts | 19 +---
.../group/group-list/group-list.component.ts | 21 ++--
.../hierarchy-create.component.ts | 16 +---
.../profile-create.component.ts | 9 +-
.../group-list/group-list.component.html | 2 +-
.../group-list/group-list.component.ts | 15 +--
.../app/user/user-list/user-list.component.ts | 18 +---
.../access-contract-list.component.html | 4 +-
.../access-contract-list.component.ts | 16 +---
.../context-list/context-list.component.html | 2 +-
.../context-list/context-list.component.ts | 17 +---
.../logbook-operation-detail.component.html | 2 +-
.../logbook-operation-detail.component.ts | 14 +--
.../components/arrays/arrays.component.html | 2 +-
.../app/components/arrays/arrays.component.ts | 17 +---
33 files changed, 185 insertions(+), 253 deletions(-)
create mode 100644 ui/ui-frontend-common/src/app/modules/animations/index.ts
create mode 100644 ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts
diff --git a/ui/ui-frontend-common/src/app/modules/animations/index.ts b/ui/ui-frontend-common/src/app/modules/animations/index.ts
new file mode 100644
index 000000000..2882ae9a1
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/animations/index.ts
@@ -0,0 +1 @@
+export * from './vitamui-common-animations';
diff --git a/ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts b/ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts
new file mode 100644
index 000000000..0b02f6bcb
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts
@@ -0,0 +1,95 @@
+import { animate, keyframes, query, stagger, state, style, transition, trigger } from '@angular/animations';
+
+export const collapseAnimation = trigger('collapseAnimation', [
+ state('collapsed', style({ height: 0, visibility: 'hidden' })),
+ state('expanded', style({ height: '*' })),
+ transition('expanded <=> collapsed', animate('300ms ease-out')),
+]);
+
+export const rotateAnimation = trigger('rotateAnimation', [
+ state('collapsed', style({ transform: 'rotate(180deg)' })),
+ state('expanded', style({ transform: 'none' })),
+ transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+]);
+
+export const rotateUpAnimation = trigger('rotateUpAnimation', [
+ state('true', style({ transform: 'none' })),
+ state('false', style({ transform: 'rotate(180deg)' })),
+ transition('true <=> false', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+]);
+
+export const rotate90Animation = trigger('rotate90Animation', [
+ state('collapsed', style({ transform: 'rotate(-90deg)' })),
+ state('expanded', style({ transform: 'rotate(0deg)' })),
+ transition('expanded <=> collapsed', animate('200ms ease-out')),
+]);
+
+export const fadeInOutAnimation = trigger('fadeInOutAnimation', [
+ transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
+ transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]),
+]);
+
+export const slideDownAnimation = trigger('slideDownAnimation', [
+ state('*', style({ opacity: 1, transform: 'translateX(0)' })),
+ transition(':enter', [
+ style({
+ opacity: 0,
+ transform: 'translateY(-100%)'
+ }),
+ animate('100ms ease-out'),
+ ]),
+]);
+
+export const tooltipAnimation = trigger('tooltipAnimation', [
+ state('*', style({ opacity: 1, transform: 'translateX(0)' })),
+ transition(':enter', [
+ style({
+ opacity: 0,
+ transform: 'translateY(-100%)'
+ }),
+ animate('100ms ease-out'),
+ ]),
+]);
+
+export const opacityAnimation = trigger('opacityAnimation', [
+ state('close', style({})),
+ transition(':enter', [
+ animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+ style({ opacity: 0 }),
+ style({ opacity: 1 }),
+ ])),
+ ]),
+ transition('* => close', [
+ animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+ style({ opacity: 1 }),
+ style({ opacity: 0 }),
+ ])),
+ ]),
+]);
+
+export const transitionAnimation = trigger('transitionAnimation', [
+ state('previous', style({ height: '0px', visibility: 'hidden' })),
+ state('next', style({ height: '0px', visibility: 'hidden' })),
+ state('current', style({ height: '*', visibility: 'visible' })),
+ transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+]);
+
+export const slideAnimation = trigger('slideAnimation', [
+ transition(':enter', [
+ query('*', [
+ style({ opacity: 0, transform: 'translateX(-20px)' }),
+ stagger(50, [
+ animate(
+ '50ms',
+ style({ opacity: 1, transform: 'none' })
+ )
+ ])
+ ])
+ ]),
+ transition(':leave', [
+ animate(
+ '250ms',
+ style({ opacity: 0, transform: 'translateX(+100px)' })
+ )
+ ])
+]);
diff --git a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html
index 4f2fb02a6..ba71b86da 100644
--- a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html
@@ -1,4 +1,4 @@
<div class="collapse-title" (click)="toggle()">
- <i class="material-icons" [@rotateAnimation]="collapseState">keyboard_arrow_down</i> {{collapseTitle}}
+ <i class="material-icons" [@rotate90Animation]="collapseState">keyboard_arrow_down</i> {{collapseTitle}}
</div>
<div class="collapse-content" [@collapseAnimation]="collapseState"><ng-content></ng-content></div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts
index 9dfdc29f2..ac1acf908 100644
--- a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts
@@ -86,16 +86,16 @@ describe('CollapseComponent', () => {
});
it('should toggle the content on click on the title', () => {
- expect(testhost.component.collapseState).toBe('expand');
+ expect(testhost.component.collapseState).toBe('expanded');
const elTitle = fixture.nativeElement.querySelector('.collapse-title');
elTitle.click();
fixture.detectChanges();
- expect(testhost.component.collapseState).toBe('collapse');
+ expect(testhost.component.collapseState).toBe('collapsed');
elTitle.click();
fixture.detectChanges();
- expect(testhost.component.collapseState).toBe('expand');
+ expect(testhost.component.collapseState).toBe('expanded');
});
});
diff --git a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts
index db6102464..9193909e4 100644
--- a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts
@@ -34,8 +34,9 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { collapseAnimation, rotate90Animation } from '../../animations/vitamui-common-animations';
@Component({
selector: 'vitamui-common-collapse',
@@ -43,16 +44,8 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
styleUrls: ['./collapse.component.scss'],
exportAs: 'vitamuiCommonCollapse',
animations: [
- trigger('collapseAnimation', [
- state('collapse', style({ height: 0, visibility: 'hidden' })),
- state('expand', style({ height: '*' })),
- transition('expand <=> collapse', animate('200ms ease-out')),
- ]),
- trigger('rotateAnimation', [
- state('collapse', style({ transform: 'rotate(-90deg)' })),
- state('expand', style({ transform: 'rotate(0deg)' })),
- transition('expand <=> collapse', animate('200ms ease-out')),
- ]),
+ collapseAnimation,
+ rotate90Animation,
]
})
export class CollapseComponent implements OnInit {
@@ -61,7 +54,7 @@ export class CollapseComponent implements OnInit {
@Input() collapseTitle: string;
- @Input() collapseState = 'expand';
+ @Input() collapseState = 'expanded';
constructor() { }
@@ -69,7 +62,7 @@ export class CollapseComponent implements OnInit {
}
toggle() {
- this.collapseState = this.collapseState === 'expand' ? 'collapse' : 'expand';
+ this.collapseState = this.collapseState === 'expanded' ? 'collapsed' : 'expanded';
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html
index 19172cbfc..9c27e2175 100644
--- a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html
@@ -1,3 +1,3 @@
<div class="d-flex">
- <div class="tooltip-custom {{className}}" [class.outline]="outline" @tooltip>{{ text }}</div>
+ <div class="tooltip-custom {{className}}" [class.outline]="outline" @fadeInOutAnimation>{{ text }}</div>
</div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts
index 423d308cc..be916699c 100644
--- a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts
@@ -36,21 +36,14 @@
*/
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
+import { fadeInOutAnimation } from '../../animations';
@Component({
selector: 'vitamui-common-tooltip',
templateUrl: './common-tooltip.component.html',
styleUrls: ['./common-tooltip.component.scss'],
animations: [
- trigger('tooltip', [
- transition(':enter', [
- style({ opacity: 0 }),
- animate(300, style({ opacity: 1 })),
- ]),
- transition(':leave', [
- animate(300, style({ opacity: 0 })),
- ]),
- ]),
+ fadeInOutAnimation,
],
})
export class CommonTooltipComponent implements OnInit {
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
index f92d5d6ce..871521cd5 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
@@ -35,7 +35,7 @@
<mat-selection-list id="searchResults"
class="py-3 overflow"
(selectionChange)="openApplication($event.option.value)">
- <mat-list-option [value]="app" @slideLeftRight *ngFor="let app of filteredApplications">
+ <mat-list-option [value]="app" @slideAnimation *ngFor="let app of filteredApplications">
<vitamui-common-menu-application-tile [application]="app" [hlCriteria]="criteria"></vitamui-common-menu-application-tile>
</mat-list-option>
</mat-selection-list>
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
index 9a27263ed..80049c8fb 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
@@ -5,6 +5,7 @@ import { MatTabChangeEvent } from '@angular/material/tabs';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
+import { opacityAnimation , slideAnimation} from '../../../animations';
import { ApplicationService } from '../../../application.service';
import { Category } from '../../../models';
import { Application } from '../../../models/application/application.interface';
@@ -19,40 +20,8 @@ import { MenuOverlayRef } from './menu-overlay-ref';
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
animations: [
- trigger('opacityAnimation', [
- state('close', style({})),
- transition(':enter', [
- animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
- style({ opacity: 0 }),
- style({ opacity: 1 }),
- ])),
- ]),
- transition('* => close', [
- animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
- style({ opacity: 1 }),
- style({ opacity: 0 }),
- ])),
- ]),
- ]),
- trigger('slideLeftRight', [
- transition(':enter', [
- query('*', [
- style({ opacity: 0, transform: 'translateX(-20px)' }),
- stagger(50, [
- animate(
- '50ms',
- style({ opacity: 1, transform: 'none' })
- )
- ])
- ])
- ]),
- transition(':leave', [
- animate(
- '250ms',
- style({ opacity: 0, transform: 'translateX(+100px)' })
- )
- ])
- ])
+ opacityAnimation,
+ slideAnimation,
]
})
export class MenuComponent implements OnInit, AfterViewInit {
diff --git a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts
index 078ae9cc4..ed32db641 100644
--- a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts
@@ -34,9 +34,10 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { rotateUpAnimation } from '../../animations/vitamui-common-animations';
import { ApplicationId } from '../../application-id.enum';
import { AuthService } from '../../auth.service';
@@ -50,11 +51,7 @@ import { MenuOption } from './customer-menu/menu-option.interface';
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss'],
animations: [
- trigger('arrowUp', [
- state('true', style({ transform: 'none' })),
- state('false', style({ transform: 'rotate(180deg)' })),
- transition('true <=> false', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ rotateUpAnimation,
]
})
export class NavbarComponent {
diff --git a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html
index abeaf864f..bf7f1ac86 100644
--- a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html
@@ -1,5 +1,5 @@
<ng-container *ngFor="let step of steps; let i = index; let isLast = last">
- <div class="step" [@stepTransition]="_getAnimationDirection(i)" [attr.tabindex]="selectedIndex === i ? 0 : null"
+ <div class="step" [@transitionAnimation]="_getAnimationDirection(i)" [attr.tabindex]="selectedIndex === i ? 0 : null"
[attr.aria-expanded]="selectedIndex === i">
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
</div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
index eb956bfb8..0aa851211 100644
--- a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
@@ -37,6 +37,7 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { CdkStepper } from '@angular/cdk/stepper';
import { Component } from '@angular/core';
+import { transitionAnimation } from '../../animations/vitamui-common-animations';
@Component({
selector: 'vitamui-common-stepper',
@@ -46,12 +47,7 @@ import { Component } from '@angular/core';
// by other components.
providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
animations: [
- trigger('stepTransition', [
- state('previous', style({ height: '0px', visibility: 'hidden' })),
- state('next', style({ height: '0px', visibility: 'hidden' })),
- state('current', style({ height: '*', visibility: 'visible' })),
- transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
- ]),
+ transitionAnimation,
]
})
export class StepperComponent extends CdkStepper {
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts
index 94b08052b..d1a5fa3f9 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts
@@ -34,24 +34,16 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, Input } from '@angular/core';
+import { slideDownAnimation } from '../../animations/vitamui-common-animations';
@Component({
selector: 'vitamui-common-field-error',
template: `<div *ngIf="show" @slideDownAnimation><ng-content></ng-content></div>`,
styleUrls: ['./vitamui-field-error.component.scss'],
animations: [
- trigger('slideDownAnimation', [
- state('*', style({ opacity: 1, transform: 'translateY(0)' })),
- transition(':enter', [
- style({
- opacity: 0,
- transform: 'translateY(-100%)'
- }),
- animate('100ms ease-out'),
- ]),
- ]),
+ slideDownAnimation
]
})
export class VitamUIFieldErrorComponent {
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts
index 5ba53b05b..cf3d8dc36 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts
@@ -34,24 +34,16 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, HostBinding, OnInit } from '@angular/core';
+import { slideDownAnimation } from '../../animations/vitamui-common-animations';
@Component({
selector: 'vitamui-common-input-error',
template: `<ng-content></ng-content>`,
styleUrls: ['./vitamui-input-error.component.scss'],
animations: [
- trigger('slideDownAnimation', [
- state('*', style({ opacity: 1, transform: 'translateX(0)' })),
- transition(':enter', [
- style({
- opacity: 0,
- transform: 'translateY(-100%)'
- }),
- animate('100ms ease-out'),
- ]),
- ]),
+ slideDownAnimation,
]
})
export class VitamUIInputErrorComponent implements OnInit {
diff --git a/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts b/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts
index 6572a386e..e883a40d4 100644
--- a/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts
@@ -34,8 +34,9 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { tooltipAnimation } from '../../animations';
import { VitamUITooltipMessage, VITAMUI_TOOLTIP_MESSAGE } from '../../injection-tokens';
@@ -44,15 +45,7 @@ import { VitamUITooltipMessage, VITAMUI_TOOLTIP_MESSAGE } from '../../injection-
templateUrl: './tooltip.component.html',
styleUrls: ['./tooltip.component.scss'],
animations: [
- trigger('tooltipAnimation', [
- transition(':enter', [
- animate('300ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
- style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
- style({ opacity: 0.5, transform: 'scale(1.1)', offset: 0.7 }),
- style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
- ])),
- ]),
- ]),
+ tooltipAnimation,
],
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/ui/ui-frontend-common/src/app/modules/index.ts b/ui/ui-frontend-common/src/app/modules/index.ts
index 643013245..ef90f0d75 100644
--- a/ui/ui-frontend-common/src/app/modules/index.ts
+++ b/ui/ui-frontend-common/src/app/modules/index.ts
@@ -38,6 +38,7 @@ export * from './models/index';
export * from './account/index';
export * from './active-tenant.guard';
+export * from './animations/index';
export * from './api/application-api.service';
export * from './api/logbook-api.service';
export * from './api/profile-api.service';
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
index 69cbe71da..99aec6c0f 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
@@ -16,7 +16,7 @@
<div class="d-flex align-items-center clickable">
<div class="col-1 d-flex" (click)="row.toggle()">
<i class="vitamui-icon vitamui-icon-bank"></i>
- <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@arrow]="row.state">keyboard_arrow_up</i>
+ <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@rotateAnimation]="row.state">keyboard_arrow_up</i>
</div>
<div (click)="customerClick.emit(customer)" class="col-2 d-flex align-items-center align-self-stretch">{{ customer?.code }}</div>
@@ -36,7 +36,7 @@
</div>
<app-owner-list
- [@expansion]="row.state"
+ [@collapseAnimation]="row.state"
[customer]="customer"
(ownerClick)="ownerClick.emit($event)"
(tenantClick)="tenantClick.emit($event)">
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts
index 79b31e726..7e5c55fdf 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts
@@ -34,13 +34,20 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
-import { Customer, DEFAULT_PAGE_SIZE, Direction, InfiniteScrollTable, Owner, PageRequest, Tenant } from 'ui-frontend-common';
+import { collapseAnimation,
+ Customer,
+ DEFAULT_PAGE_SIZE,
+ Direction,
+ InfiniteScrollTable,
+ Owner, PageRequest,
+ rotateAnimation,
+ Tenant } from 'ui-frontend-common';
import { CustomerService } from '../../core/customer.service';
import { CustomerDataService } from '../customer.data.service';
import { OwnerCreateComponent } from '../owner-create/owner-create.component';
@@ -52,17 +59,8 @@ import { CustomerListService } from './customer-list.service';
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden', opacity: '0'})),
- state('expanded', style({height: '*', visibility: 'visible', opacity: '1'})),
- transition('expanded <=> collapsed', animate('150ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class CustomerListComponent extends InfiniteScrollTable<Customer> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts b/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts
index cdddb95ae..80099605e 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts
@@ -34,13 +34,11 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { Subscription } from 'rxjs';
-import { AuthService, buildValidators, ConfirmDialogService } from 'ui-frontend-common';
-
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { AuthService, buildValidators, collapseAnimation, ConfirmDialogService , rotateAnimation} from 'ui-frontend-common';
import { GroupService } from '../group.service';
@@ -52,17 +50,8 @@ import { GroupValidators } from '../group.validators';
templateUrl: './group-create.component.html',
styleUrls: ['./group-create.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden'})),
- state('expanded', style({height: '*', visibility: 'visible'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class GroupCreateComponent implements OnInit, OnDestroy {
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts
index 1fafb7406..4090886f4 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts
@@ -34,17 +34,19 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import {Component, EventEmitter, Inject, Input, LOCALE_ID, OnDestroy, OnInit, Output} from '@angular/core';
import {merge, Subject, Subscription} from 'rxjs';
import {
buildCriteriaFromSearch,
- DEFAULT_PAGE_SIZE, Direction,
+ collapseAnimation, DEFAULT_PAGE_SIZE,
+ Direction,
Group,
InfiniteScrollTable,
PageRequest,
- SearchQuery
+ rotateAnimation,
+ SearchQuery,
} from 'ui-frontend-common';
import { GroupService } from '../group.service';
import {buildCriteriaFromGroupFilters} from './group-criteria-builder.util';
@@ -54,17 +56,8 @@ import {buildCriteriaFromGroupFilters} from './group-criteria-builder.util';
templateUrl: './group-list.component.html',
styleUrls: ['./group-list.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden'})),
- state('expanded', style({height: '*', visibility: 'visible'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class GroupListComponent extends InfiniteScrollTable<Group> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts b/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts
index 89e02cb0a..992741f5e 100644
--- a/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts
@@ -34,9 +34,8 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { AuthService, buildValidators, ConfirmDialogService } from 'ui-frontend-common';
+import { AuthService, buildValidators, collapseAnimation, ConfirmDialogService, rotateAnimation } from 'ui-frontend-common';
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -49,17 +48,8 @@ import { HierarchyService } from '../hierarchy.service';
templateUrl: './hierarchy-create.component.html',
styleUrls: ['./hierarchy-create.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden'})),
- state('expanded', style({height: '*', visibility: 'visible'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class HierarchyCreateComponent implements OnInit, OnDestroy {
diff --git a/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts b/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts
index 854e5d67e..7c7a69735 100644
--- a/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts
@@ -36,10 +36,9 @@
*/
import { Subscription } from 'rxjs';
import {
- ApplicationId, AuthService, AuthUser, buildValidators, ConfirmDialogService, Group, Profile, Role
+ ApplicationId, AuthService, AuthUser, buildValidators, collapseAnimation, ConfirmDialogService, Group, Profile, Role
} from 'ui-frontend-common';
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -53,11 +52,7 @@ import { ProfileValidators } from '../profile.validators';
templateUrl: './profile-create.component.html',
styleUrls: ['./profile-create.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden'})),
- state('expanded', style({height: '*', visibility: 'visible'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
]
})
export class ProfileCreateComponent implements OnInit, OnDestroy {
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
index 3f245b7af..636e8f14c 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
@@ -20,7 +20,7 @@
<div class="d-flex align-self-stretch align-items-center w-100" (click)="updateGroup(group?.id,group?.name, row)">{{group?.name}}</div>
<button class="btn link underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
</div>
- <app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@expansionAnimation]></app-group-detail>
+ <app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@collapseAnimation]></app-group-detail>
</div>
</ng-container>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts
index 506226ab7..7f16e9683 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts
@@ -36,9 +36,9 @@
*/
/* tslint:disable: no-use-before-declare */
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { collapseAnimation, rotateAnimation } from 'ui-frontend-common';
import { GroupSelection } from './../../group-selection.interface';
@Component({
@@ -46,17 +46,8 @@ import { GroupSelection } from './../../group-selection.interface';
templateUrl: './group-list.component.html',
styleUrls: ['./group-list.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({ height: '0px', visibility: 'hidden' })),
- state('expanded', style({ height: '*', visibility: 'visible' })),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
- trigger('expansionAnimation', [
- state('true', style({ height: '*', visibility: 'visible' })),
- state('void', style({ height: '0px', visibility: 'hidden' })),
- transition(':enter', animate('150ms')),
- transition(':leave', animate('150ms')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class GroupListComponent implements OnInit {
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts b/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts
index 416d835d7..4456317f6 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts
@@ -37,11 +37,10 @@
import { merge, Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import {
- AdminUserProfile, ApplicationId, AuthService, buildCriteriaFromSearch, Criterion, DEFAULT_PAGE_SIZE,
- Direction, InfiniteScrollTable, Operators, PageRequest, Role, SearchQuery, User
+ AdminUserProfile, ApplicationId, AuthService, buildCriteriaFromSearch, collapseAnimation, Criterion, DEFAULT_PAGE_SIZE,
+ Direction, InfiniteScrollTable, Operators, PageRequest, Role, rotateAnimation, SearchQuery, User
} from 'ui-frontend-common';
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { HttpParams } from '@angular/common/http';
import {
Component, ElementRef, EventEmitter, Inject, Input, LOCALE_ID, OnDestroy, OnInit, Output,
@@ -59,17 +58,8 @@ const FILTER_DEBOUNCE_TIME_MS = 400;
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({ height: '0px', visibility: 'hidden' })),
- state('expanded', style({ height: '*', visibility: 'visible' })),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({ transform: 'rotate(180deg)' })),
- state('expanded', style({ transform: 'none' })),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class UserListComponent extends InfiniteScrollTable<User> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html
index d713819a5..0195f1481 100644
--- a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html
@@ -65,12 +65,12 @@
<!--td [vitamuiCommonCollapseTriggerFor]="row">
<i class="vitamui-icon vitamui-icon-bank vitamui-row-icon"></i>
- <i class="material-icons caret" [@arrow]="row.state">keyboard_arrow_up</i>
+ <i class="material-icons caret" [@rotateAnimation]="row.state">keyboard_arrow_up</i>
</td-->
<td>
<i class="vitamui-icon vitamui-icon-contrat vitamui-row-icon status-badge"
[ngClass]="{'status-badge-green': accessContract?.status == 'ACTIVE', 'status-badge-grey':accessContract?.status == 'INACTIVE' }"></i>
- <!--i class="material-icons caret" [@arrow]="row.state">keyboard_arrow_up</i-->
+ <!--i class="material-icons caret" [@rotateAnimation]="row.state">keyboard_arrow_up</i-->
</td>
<td class="clickable" (click)="accessContractClick.emit(accessContract)">{{ accessContract?.name }}</td>
<td class="clickable" (click)="accessContractClick.emit(accessContract)">{{ accessContract?.identifier }}</td>
diff --git a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts
index b45f50ae7..d3a7040cd 100644
--- a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts
+++ b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts
@@ -34,12 +34,11 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import {animate, state, style, transition, trigger} from '@angular/animations';
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {AccessContract} from 'projects/vitamui-library/src/public-api';
import {merge, Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
-import {DEFAULT_PAGE_SIZE, Direction, InfiniteScrollTable, PageRequest} from 'ui-frontend-common';
+import {collapseAnimation, DEFAULT_PAGE_SIZE, Direction, InfiniteScrollTable, PageRequest, rotateAnimation} from 'ui-frontend-common';
import {AccessContractService} from '../access-contract.service';
@@ -50,17 +49,8 @@ const FILTER_DEBOUNCE_TIME_MS = 400;
templateUrl: './access-contract-list.component.html',
styleUrls: ['./access-contract-list.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden'})),
- state('expanded', style({height: '*', visibility: 'visible'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class AccessContractListComponent extends InfiniteScrollTable<AccessContract> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html
index 86d79c02b..00b230ff9 100644
--- a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html
@@ -65,7 +65,7 @@
<td>
<i class="vitamui-icon vitamui-icon-securite vitamui-row-icon status-badge"
[ngClass]="{'status-badge-green': context?.status == 'ACTIVE', 'status-badge-grey':context?.status == 'INACTIVE' }"></i>
- <!--i class="material-icons caret" [@arrow]="row.state">keyboard_arrow_up</i-->
+ <!--i class="material-icons caret" [@rotateAnimation]="row.state">keyboard_arrow_up</i-->
</td>
<td class="clickable" (click)="contextClick.emit(context)">{{ context?.name }}</td>
<td class="clickable" (click)="contextClick.emit(context)">{{ context?.identifier }}</td>
diff --git a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts
index 3541b79e3..91d0eadf3 100644
--- a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts
+++ b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts
@@ -34,7 +34,7 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import {animate, state, style, transition, trigger} from '@angular/animations';
+
import {
Component,
ElementRef,
@@ -53,11 +53,13 @@ import {
AdminUserProfile,
ApplicationId,
AuthService,
+ collapseAnimation,
DEFAULT_PAGE_SIZE,
Direction,
InfiniteScrollTable,
PageRequest,
Role,
+ rotateAnimation,
User
} from 'ui-frontend-common';
import {ContextService} from '../context.service';
@@ -69,17 +71,8 @@ const FILTER_DEBOUNCE_TIME_MS = 400;
templateUrl: './context-list.component.html',
styleUrls: ['./context-list.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden'})),
- state('expanded', style({height: '*', visibility: 'visible'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class ContextListComponent extends InfiniteScrollTable<Context> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html
index d608cb755..a5cc84f5e 100644
--- a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html
@@ -77,7 +77,7 @@
</mat-tab>
</mat-tab-group>
</div>
- <div class="vitamui-sidepanel-loading-overlay" *ngIf="loading" @fadeInOut>
+ <div class="vitamui-sidepanel-loading-overlay" *ngIf="loading" @fadeInOutAnimation>
<mat-spinner color="accent" diameter="40"></mat-spinner>
</div>
</div>
diff --git a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts
index 0e4567997..eea46f046 100644
--- a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts
+++ b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts
@@ -34,10 +34,9 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { animate, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { AuthService, Event, LogbookService } from 'ui-frontend-common';
+import { AuthService, Event, fadeInOutAnimation, LogbookService } from 'ui-frontend-common';
@Component({
@@ -45,16 +44,7 @@ import { AuthService, Event, LogbookService } from 'ui-frontend-common';
templateUrl: './logbook-operation-detail.component.html',
styleUrls: ['./logbook-operation-detail.component.scss'],
animations: [
- trigger('fadeInOut', [
- transition(':enter', [
- style({ opacity: 0 }),
- animate('200ms', style({ opacity: 1 })),
- ]),
- transition(':leave', [
- style({ opacity: 1 }),
- animate('200ms', style({ opacity: 0 })),
- ]),
- ])
+ fadeInOutAnimation
]
})
export class LogbookOperationDetailComponent implements OnInit, OnChanges {
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
index 0854dfe3d..3b69e5c27 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
@@ -130,7 +130,7 @@
<div class="d-flex align-items-center clickable">
<div class="col-2 d-flex" (click)="row.toggle()">
<i class="vitamui-icon vitamui-icon-bank"></i>
- <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@arrow]="row.state">keyboard_arrow_up</i>
+ <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@rotateAnimation]="row.state">keyboard_arrow_up</i>
</div>
<div [style.display]="'contents'">
<div class="col-3">{{ customer?.name }}</div>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts
index 844a461bc..8639dce59 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts
@@ -1,23 +1,14 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, OnInit } from '@angular/core';
-import { Direction, Group } from 'ui-frontend-common';
+import { collapseAnimation, Direction, Group, rotateAnimation } from 'ui-frontend-common';
@Component({
selector: 'app-arrays',
templateUrl: './arrays.component.html',
styleUrls: ['./arrays.component.scss'],
animations: [
- trigger('expansion', [
- state('collapsed', style({height: '0px', visibility: 'hidden', opacity: '0'})),
- state('expanded', style({height: '*', visibility: 'visible', opacity: '1'})),
- transition('expanded <=> collapsed', animate('150ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
-
- trigger('arrow', [
- state('collapsed', style({transform: 'rotate(180deg)'})),
- state('expanded', style({transform: 'none'})),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class ArraysComponent implements OnInit {
--
GitLab