FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add shadow and transition
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-06-24 15:49:57 +02:00
parent ace4a6b364
commit 277dc7051e
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
projects/common/src/fm/components/user-menu/user-menu.component.html
View File

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

14
projects/common/src/fm/components/user-menu/user-menu.component.scss
View File

@ -14,12 +14,20 @@ div.menu-button > span {
color:white; color:white;
} }
.card { .menu {
max-height: 100vh;
transition: max-height 0.2s;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,.3);
position: absolute; position: absolute;
top: 3rem; top: 3rem;
right:0; right:0;
}
.card {
padding:0.5rem; padding:0.5rem;
min-width: 10rem; min-width: 10rem;
overflow: hidden;
} }
.username { .username {
@ -34,5 +42,5 @@ div.menu-button > span {
} }
.hidden { .hidden {
display: none; max-height: 0;
} }