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

Fixes profile/login menu on mobile mode

This commit is contained in:
apapachristou 2020-11-06 11:00:19 +02:00
parent f8753de83a
commit aa35725823
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,9 +8,14 @@
<div class="icon-bar3"></div>
</div>
<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<div class="navbar-toggler ml-auto" *ngIf="isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" [matMenuTriggerFor]="toggleMenu" [matTooltip]="this.getPrincipalName()">
</div>
<!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button>
</button> -->
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
@ -44,12 +49,13 @@
</div>
<mat-menu #toggleMenu="matMenu">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
<!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> -->
<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()">
<!-- <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>
<!-- </li> -->
<ng-template #loginoption>
<li class="d-flex justify-content-center avatar">
<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
@ -59,7 +65,7 @@
</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">
<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang" (click)="$event.stopPropagation();">
<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
<mat-icon>arrow_drop_down</mat-icon>
</button>

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

@ -37,7 +37,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
selectedLanguage = 'en';
private user: UserListingModel;
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
@ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
@ViewChild(MatMenuTrigger, { static: false }) trigger: MatMenuTrigger;
constructor(location: Location,
private element: ElementRef,
@ -86,11 +86,11 @@ export class NavbarComponent extends BaseComponent implements OnInit {
openMyMenu() {
this.trigger.openMenu();
}
}
closeMyMenu() {
this.trigger.closeMenu();
}
}
sidebarOpen() {
const toggleButton = this.toggleButton;