Merge remote-tracking branch 'origin/ui-redesign' 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/dmp/overview/dmp-overview.component.scss

@@ -13,6 +13,7 @@
   width: 2.5em;
   height: 2.5em;
   background-color: #129d99;
+  color: white;
 }
 
 .mat-mini-fab-icon,
@@ -306,7 +307,7 @@
   margin-bottom: 0.2rem;
 }
 
-::ng-deep mat-select .mat-select-arrow-wrapper { 
+::ng-deep mat-select .mat-select-arrow-wrapper {
   vertical-align: bottom;
 }
 

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
 				}

dmp-frontend/src/assets/scss/green-theme.scss

@@ -0,0 +1,141 @@
+@import "app/ui/misc/navigation/navigation.component.scss";
+@import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
+
+$app-green-theme-primary-palette: (
+  50: #e3f3f3,
+  100: #b8e2e0,
+  200: #89cecc,
+  300: #59bab8,
+  400: #36aca8,
+  500: #129d99,
+  600: #109591,
+  700: #0d8b86,
+  800: #0a817c,
+  900: #056f6b,
+  A100: #9ffffa,
+  A200: #6cfff7,
+  A400: #39fff5,
+  A700: #20fff3,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000
+  )
+);
+
+$app-green-theme-accent-palette: (
+  50: #fefbee,
+  100: #fdf5d5,
+  200: #fbeeb9,
+  300: #f9e79c,
+  400: #f8e287,
+  500: #f7dd72,
+  600: #f6d96a,
+  700: #f5d45f,
+  800: #f3cf55,
+  900: #f1c742,
+  A100: #ffffff,
+  A200: #ffffff,
+  A400: #fff6dc,
+  A700: #fff0c3,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #000000,
+    600: #000000,
+    700: #000000,
+    800: #000000,
+    900: #000000,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000
+  )
+);
+
+$app-green-theme-primary: mat-palette($app-green-theme-primary-palette);
+$app-green-theme-accent: mat-palette($app-green-theme-accent-palette, A200, A100, A400);
+$app-green-theme-warn: mat-palette($mat-red);
+
+$app-green-theme-background: (
+  status-bar: map_get($mat-grey, 300),
+  app-bar: map_get($mat-grey, 100),
+  background: map_get($mat-grey, 50),
+  hover: rgba(black, 0.04),
+  card: white,
+  dialog: white,
+  disabled-button: rgba(black, 0.12),
+  raised-button: white,
+  focused-button: $dark-focused,
+  selected-button: map_get($mat-grey, 300),
+  selected-disabled-button: map_get($mat-grey, 400),
+  disabled-button-toggle: map_get($mat-grey, 200),
+  unselected-chip: map_get($mat-grey, 300),
+  disabled-list-option: map_get($mat-grey, 200)
+);
+
+$app-green-theme-foreground: (
+  base: white,
+  divider: $dark-dividers,
+  dividers: $dark-dividers,
+  disabled: $dark-disabled-text,
+  disabled-button: rgba(black, 0.26),
+  disabled-text: $dark-disabled-text,
+  hint-text: $dark-disabled-text,
+  secondary-text: $dark-secondary-text,
+  icon: rgba(white, 0.54),
+  icons: rgba(white, 0.54),
+  text: rgba(white, 0.87),
+  slider-min: rgba(black, 0.87),
+  slider-off: rgba(black, 0.26),
+  slider-off-active: rgba(black, 0.38)
+);
+
+$custom-theme: (
+  primary: $app-green-theme-primary,
+  accent: $app-green-theme-accent,
+  warn: $app-green-theme-warn,
+  is-dark: false,
+  foreground: $app-green-theme-foreground,
+  background: $app-green-theme-background
+);
+
+$custom-typography: mat-typography-config(
+  $font-family: "Lato, regular",
+  $headline: mat-typography-level(32px, 48px, 700),
+  $body-1: mat-typography-level(16px, 24px, 500)
+);
+
+.green-theme {
+  @include mat-core();
+
+  @include angular-material-theme($custom-theme);
+  @include navigation-component-theme($custom-theme);
+
+  // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
+  @include mat-base-typography($custom-typography);
+
+  // Override typography for a specific Angular Material components.
+  @include mat-checkbox-typography($custom-typography);
+
+  // Override typography for all Angular Material, including mat-base-typography and all components.
+  @include angular-material-typography($custom-typography);
+  //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
+
+  // Override the typography in the core CSS.
+  @include mat-core($custom-typography);
+}

dmp-frontend/src/assets/scss/material-dashboard.scss

@@ -17,12 +17,18 @@
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
 @import "./blue-theme.scss";
+// @import "./green-theme.scss";
 
 @include mat-core();
 
-// Define a theme.
+// // Define a blue theme.
 $custom-theme-primary: mat-palette($app-blue-theme-primary-palette, 900);
 $custom-theme-accent: mat-palette($app-blue-theme-accent-palette);
+
+// Define a green theme.
+// $custom-theme-primary: mat-palette($app-green-theme-primary-palette, 500);
+// $custom-theme-accent: mat-palette($app-green-theme-accent-palette);
+
 // $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400);
 $custom-theme-warn: mat-palette($mat-red);
 $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);