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