Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign

dmp-frontend/package.json

@@ -30,6 +30,7 @@
     "file-saver": "^2.0.2",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.26",
+    "ng-dialog-animation": "^9.0.3",
     "ngx-cookie-service": "^2.2.0",
     "ngx-cookieconsent": "^2.2.3",
     "ngx-guided-tour": "^1.1.10",

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html

@@ -8,7 +8,7 @@
 					<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <a class="zenodo-link" href="https://zenodo.org/communities/liber-dmp-cat/?page=1&size=20" target="_blank">{{'DMP-LISTING.LINK-ZENODO' | translate}}</a> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
 				</div>
 			</div>
-			<div class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
+			<div class="filter-btn" [style.right]="dialogAnimation.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
 				<button mat-raised-button class="p-0">
 					<mat-icon class="mr-4">filter_alt</mat-icon>
 				</button>

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 {

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 => {

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 { }

dmp-frontend/src/app/ui/sidebar/sidebar.component.html

@@ -4,16 +4,24 @@
 		<div *ngIf="showItem(groupMenuItem);">
 			<hr *ngIf="!firstGroup">
 			<mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
-				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/co-branding'" [routerLink]="[groupMenuRoute.path]"  [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans', 'dataset-tour' : groupMenuRoute.path == '/datasets'}">
+				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback'" [routerLink]="[groupMenuRoute.path]"  [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans', 'dataset-tour' : groupMenuRoute.path == '/datasets'}">
 					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
 					<i *ngIf="groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'" class="material-icons icon-mask">person</i>
 					<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'}">{{groupMenuRoute.title | translate}}</span>
 				</a>
-				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/feedback'" (click)="openContactSupport(groupMenuRoute)">
+				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">
 					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
 					<span>{{groupMenuRoute.title | translate}}</span>
 				</a>
-				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">
+				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/contact-support' && this.isAuthenticated()" [routerLink]="[groupMenuRoute.path]">
+					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
+					<span>{{groupMenuRoute.title | translate}}</span>
+				</a>
+				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/contact-support' && !this.isAuthenticated()" href="/splash/contact.html">
+					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
+					<span>{{groupMenuRoute.title | translate}}</span>
+				</a>
+				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/feedback'" (click)="openFeedback(groupMenuRoute)">
 					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
 					<span>{{groupMenuRoute.title | translate}}</span>
 				</a>

dmp-frontend/src/app/ui/sidebar/sidebar.component.ts

@@ -253,12 +253,8 @@ export class SidebarComponent implements OnInit {
 		}
 	}
 
-	public openContactSupport(groupMenuRoute: RouteInfo) {
+	public openFeedback(groupMenuRoute: RouteInfo) {
-		if (this.isAuthenticated()) {
 		window.open(groupMenuRoute.url, '_blank');
-		} else {
-			window.open('/splash/contact.html', '_self');
-		}
 	}
 
 }