From ca10323e78f9e899c86ba970eec57000a5a02de3 Mon Sep 17 00:00:00 2001
From: George Kalampokis <gkalampokis@cite.gr>
Date: Tue, 18 Feb 2020 13:14:19 +0200
Subject: [PATCH] Refactor navbar language menu and add tooltips for both the
 language and the user buttons that display the current language and the user
 name

---
 .../src/app/ui/navbar/navbar.component.html        | 14 ++++++++++----
 .../src/app/ui/navbar/navbar.component.scss        | 10 ++++++++++
 dmp-frontend/src/app/ui/navbar/navbar.component.ts | 11 ++++++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index a16ca4119..de9b6212b 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -37,13 +37,19 @@
 			</div> -->
 
 			<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
-				<button mat-icon-button [matMenuTriggerFor]="languageMenu">
+				<button mat-icon-button [matMenuTriggerFor]="languageMenu" [matTooltip]="this.getCurrentLanguage().label | translate">
 					<mat-icon>language</mat-icon>
 				</button>
 				<mat-menu #languageMenu="matMenu">
-					<button mat-menu-item *ngFor="let lang of languages" (click)="onLanguageSelected(lang)">
+						<mat-button-toggle-group class="lang-menu" vertical (change)="onLanguageSelected($event)" [value]="this.getCurrentLanguage().value">
+							<div *ngFor="let lang of languages">
+								<mat-button-toggle class="lang-button" [value]="lang.value">{{lang.label | translate}}</mat-button-toggle>
+							</div>
+						</mat-button-toggle-group>
+
+					<!-- <button mat-menu-item *ngFor="let lang of languages" (click)="onLanguageSelected(lang)">
 						{{ lang.label | translate }}
-					</button>
+					</button> -->
 				</mat-menu>
 			</div>
 
@@ -79,7 +85,7 @@
 
 				<!-- 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()">
+					<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>
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
index 72ab45098..9fb9eef3f 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
@@ -20,3 +20,13 @@ $mat-card-header-size: 40px !default;
 	z-index: 1000;
 	height: 70px;
 }
+
+::ng-deep.lang-menu {
+	border-color: transparent;
+	padding: 8px;
+}
+
+::ng-deep.lang-button {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 7155ca41d..511bc566f 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -166,6 +166,15 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		return 'Dashboard';
 	}
 
+	public getCurrentLanguage(): any {
+		const lang = this.languages.find(lang => lang.value === this.languageService.getCurrentLanguage());
+		return lang;
+	}
+
+	public getPrincipalName(): string {
+		return this.authentication.current().name;
+	}
+
 	public principalHasAvatar(): boolean {
 		return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
 	}
@@ -207,7 +216,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		 if (this.isAuthenticated()) {
 			 const langMap = new Map<string, string>();
 			 langMap.set('language', selectedLanguage.value);
-			 this.userService.updateUserSettings({language: selectedLanguage})
+			 this.userService.updateUserSettings({language: this.languages.find(lang => lang.value === selectedLanguage.value)})
 			 .pipe(takeUntil(this._destroyed))
 			 .subscribe((response) => {
 				this.languageService.changeLanguage(selectedLanguage.value);