Refactor navbar language menu and add tooltips for both the language and the user buttons that display the current language and the user name

This commit is contained in:
George Kalampokis 2020-02-18 13:14:19 +02:00
parent 196eb9b242
commit ca10323e78
3 changed files with 30 additions and 5 deletions

View File

@ -37,13 +37,19 @@
</div> --> </div> -->
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())"> <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> <mat-icon>language</mat-icon>
</button> </button>
<mat-menu #languageMenu="matMenu"> <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 }} {{ lang.label | translate }}
</button> </button> -->
</mat-menu> </mat-menu>
</div> </div>
@ -79,7 +85,7 @@
<!-- Login --> <!-- Login -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption"> <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()"> --> <!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
</li> </li>
<ng-template #loginoption> <ng-template #loginoption>

View File

@ -20,3 +20,13 @@ $mat-card-header-size: 40px !default;
z-index: 1000; z-index: 1000;
height: 70px; height: 70px;
} }
::ng-deep.lang-menu {
border-color: transparent;
padding: 8px;
}
::ng-deep.lang-button {
padding-top: 15px;
padding-bottom: 15px;
}

View File

@ -166,6 +166,15 @@ export class NavbarComponent extends BaseComponent implements OnInit {
return 'Dashboard'; 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 { public principalHasAvatar(): boolean {
return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0; 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()) { if (this.isAuthenticated()) {
const langMap = new Map<string, string>(); const langMap = new Map<string, string>();
langMap.set('language', selectedLanguage.value); 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)) .pipe(takeUntil(this._destroyed))
.subscribe((response) => { .subscribe((response) => {
this.languageService.changeLanguage(selectedLanguage.value); this.languageService.changeLanguage(selectedLanguage.value);