Add user-menu router outlet
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good

This commit is contained in:
Willem Dantuma 2020-09-04 10:10:01 +02:00
parent 78425a621a
commit e682b375e7
3 changed files with 11 additions and 7 deletions

View File

@ -1,13 +1,14 @@
<div *ngIf="user"> <div>
<div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name"> <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
<span>{{getLetter()}}</span> <span *ngIf="user"><span [title]="user.name">{{getLetter()}}</span></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}"> <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
<div class="card"> <div class="card" *ngIf="user">
<div class="card-body"> <div class="card-body">
<div class="username">{{user.name}}</div> <div class="username">{{user.name}}</div>
<div><a href="#" (click)="logout($event)" i18n>logout</a></div> <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
</div> </div>
</div> </div>
<router-outlet name="user-menu"></router-outlet>
</div> </div>
</div> </div>
</div> </div>

View File

@ -27,7 +27,6 @@ div.menu-button > span {
.card { .card {
padding:0.5rem; padding:0.5rem;
min-width: 10rem; min-width: 10rem;
overflow: hidden;
} }
.username { .username {
@ -44,3 +43,7 @@ div.menu-button > span {
.hidden { .hidden {
max-height: 0; max-height: 0;
} }
.menu-button.hidden {
overflow: hidden;
}

View File

@ -21,7 +21,7 @@ export class UserMenuComponent implements OnInit {
} }
getLetter():string { getLetter():string {
return this.user.name ? this.user.name.substr(0,1).toUpperCase():""; return this.user && this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
} }
logout(event:MouseEvent) { logout(event:MouseEvent) {