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

Adds logout option on smaller screen account menu

This commit is contained in:
apapachristou 2020-11-09 11:34:24 +02:00
parent 8161d382ad
commit 8d8dce8973
3 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,9 +9,9 @@
</div>
<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
<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">
<img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
<!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button> -->
@ -50,11 +50,11 @@
<mat-menu #toggleMenu="matMenu">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
<!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> -->
<!-- <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()"> -->
<!--<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" [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">
@ -76,6 +76,9 @@
<li class="d-flex justify-content-center">
<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
</li>
<li *ngIf="isAuthenticated()">
<button type="button" class="default-btn" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
</li>
</ul>
</div>
</mat-menu>

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

@ -270,4 +270,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
}
}
logout() {
this.authentication.logout();
}
}

14
dmp-frontend/src/assets/css/demo.css
View File

@ -576,6 +576,20 @@ hr {
padding: 0.62rem 1.87rem;
}
.default-btn {
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1E202029;
border: 1px solid #B5B5B5;
border-radius: 30px;
opacity: 1;
min-width: 162px;
max-width: 256px;
height: 40px;
color: #212121;
font-size: 0.87rem;
font-weight: 500;
}
.mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);