diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index ba7fc9fc9..efbc38c53 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -190,6 +190,8 @@
right: 0px;
z-index: 100;
width: 37px;
+ transition: right .3s;
+ transition-timing-function: ease-in-out;
}
.filter-btn button {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
index 7e9f51848..d113f23db 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
@@ -28,6 +28,7 @@ import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.compo
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
+import { NgDialogAnimationService } from "ng-dialog-animation";
@Component({
selector: 'app-dmp-listing-component',
@@ -71,6 +72,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
private dmpService: DmpService,
private router: Router,
private route: ActivatedRoute,
+ public dialogAnimation: NgDialogAnimationService,
public dialog: MatDialog,
public enumUtils: EnumUtils,
private language: TranslateService,
@@ -346,7 +348,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
}
openFiltersDialog(): void {
- const dialogRef = this.dialog.open(DmpCriteriaDialogComponent, {
+ const dialogRef = this.dialogAnimation.open(DmpCriteriaDialogComponent, {
width: '456px',
height: '100%',
id: 'filters',
@@ -359,7 +361,13 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
// criteria: this.grantId ? this.criteria : this.getDefaultCriteria(),
updateDataFn: this.updateDataFn.bind(this)
},
- position: { right: '0px;' }
+ position: { right: '0px;' },
+ animation: {
+ to: "left",
+ incomingOptions: {
+ keyframeAnimationOptions: { duration: 300, easing: "ease-in-out" }
+ }
+ }
});
dialogRef.afterClosed().subscribe(result => {
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts
index 685a8bee6..dc73b4f76 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts
@@ -9,6 +9,7 @@ import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { RouterModule } from '@angular/router';
import { CloneDialogModule } from '../clone/clone-dialog/clone-dialog.module';
+import { NgDialogAnimationService } from 'ng-dialog-animation';
@NgModule({
imports: [
@@ -24,6 +25,9 @@ import { CloneDialogModule } from '../clone/clone-dialog/clone-dialog.module';
],
declarations: [
DmpOverviewComponent
+ ],
+ providers: [
+ NgDialogAnimationService
]
})
export class DmpOverviewModule { }
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index 321396716..d043ed575 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -4,16 +4,24 @@