Merge branch 'ui-redesign' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-redesign

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

@@ -216,7 +216,7 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 		}
 		else {
 			const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
-				disableClose: true,
+				disableClose: false,
 				data: {
 					isDialog: true
 				}

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

@@ -8,14 +8,22 @@
 				<div class="icon-bar3"></div>
 			</div>
 			<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
+			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
+				<mat-icon class="toggle-icon">view_headline</mat-icon>
+			</button>
 			<div class="collapse navbar-collapse justify-content-end" id="navigation">
 
 				<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
-					<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
+					<button type="button" class="normal-btn ml-auto"
+						(click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
 					<!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> -->
 					<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
 					<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->
-					<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang"><mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span><mat-icon>arrow_drop_down</mat-icon></button>
+					<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang">
+						<mat-icon class="mr-2">language</mat-icon><span
+							class="text-uppercase">{{selectedLanguage}}</span>
+						<mat-icon>arrow_drop_down</mat-icon>
+					</button>
 					<mat-menu #languageMenu="matMenu" class="lang-parent">
 						<app-language (languageChange)="getLanguage($event)"></app-language>
 					</mat-menu>
@@ -26,8 +34,10 @@
 				<ul class="navbar-nav">
 					<!-- Login -->
 					<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-						<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
+						<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()"
-					<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
+							(error)="this.applyFallbackAvatar($event)" (click)="openProfile()"
+							[matTooltip]="this.getPrincipalName()">
+						<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
 					</li>
 					<ng-template #loginoption>
 						<button mat-button [routerLink]=" ['/login'] ">
@@ -36,6 +46,46 @@
 					</ng-template>
 				</ul>
 			</div>
+
+			<mat-menu #toggleMenu="matMenu">
+				<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
+					<ul class="list m-2">
+						<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
+							<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()"
+								(error)="this.applyFallbackAvatar($event)" (click)="openProfile()"
+								[matTooltip]="this.getPrincipalName()">
+							<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
+						</li>
+						<ng-template #loginoption>
+							<li class="d-flex justify-content-center avatar">
+								<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
+									<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
+								</button>
+							</li>
+						</ng-template>
+						<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
+							<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
+							<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang">
+								<mat-icon class="mr-2">language</mat-icon><span
+									class="text-uppercase">{{selectedLanguage}}</span>
+								<mat-icon>arrow_drop_down</mat-icon>
+							</button>
+							<mat-menu #languageMenu="matMenu" class="lang-parent">
+								<app-language (languageChange)="getLanguage($event)"></app-language>
+							</mat-menu>
+						</li>
+						<li class="d-flex justify-content-center">
+							<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
+						</li>
+					</ul>
+				</div>
+			</mat-menu>
+
+
+
+
+
+
 		</div>
 	</nav>
 	<div *ngIf="progressIndication" class="progress-bar">
@@ -50,4 +100,4 @@
 <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
 	translate}}</a>
 <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
-	| translate}}</a> -->
+	| translate}}</a> -->

dmp-frontend/src/app/ui/navbar/navbar.component.scss

@@ -100,3 +100,20 @@ $mat-card-header-size: 40px !default;
     min-height: inherit;
     max-height: inherit;
 }
+
+.toggle-icon {
+	transform: scale(1.5);
+}
+
+.list {
+	list-style-type:none;
+	padding-left: 0px;
+}
+
+.list >li {
+	padding: 5px;
+}
+
+.avatar {
+	cursor: pointer;
+}

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

@@ -251,7 +251,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		}
 		else {
 			const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
-				disableClose: true,
+				disableClose: false,
 				data: {
 					isDialog: true
 				}