MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -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>

10
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -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;
}

11
dmp-frontend/src/app/ui/navbar/navbar.component.ts
View File

@ -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);