2021-12-15 23:32:00 +01:00
|
|
|
<a
|
|
|
|
class="account-switcher"
|
|
|
|
(click)="toggle()"
|
|
|
|
cdkOverlayOrigin
|
|
|
|
#trigger="cdkOverlayOrigin"
|
|
|
|
[hidden]="!showSwitcher"
|
|
|
|
>
|
|
|
|
<app-avatar
|
|
|
|
[data]="activeAccountEmail"
|
|
|
|
size="25"
|
|
|
|
[circle]="true"
|
|
|
|
[fontSize]="14"
|
|
|
|
[dynamic]="true"
|
|
|
|
*ngIf="activeAccountEmail != null"
|
|
|
|
></app-avatar>
|
|
|
|
<span>{{ activeAccountEmail }}</span>
|
|
|
|
<i
|
|
|
|
class="fa"
|
|
|
|
aria-hidden="true"
|
|
|
|
[ngClass]="{ 'fa-chevron-down': !isOpen, 'fa-chevron-up': isOpen }"
|
|
|
|
></i>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ng-template
|
|
|
|
cdkConnectedOverlay
|
|
|
|
[cdkConnectedOverlayOrigin]="trigger"
|
2022-01-12 17:20:19 +01:00
|
|
|
[cdkConnectedOverlayHasBackdrop]="true"
|
|
|
|
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
|
|
|
(backdropClick)="toggle()"
|
2022-01-18 21:43:14 +01:00
|
|
|
[cdkConnectedOverlayOpen]="showSwitcher && isOpen"
|
2021-12-15 23:32:00 +01:00
|
|
|
cdkConnectedOverlayMinWidth="250px"
|
|
|
|
>
|
|
|
|
<div class="account-switcher-dropdown" [@transformPanel]="'open'">
|
|
|
|
<div class="accounts">
|
|
|
|
<a
|
|
|
|
*ngFor="let a of accounts | keyvalue"
|
|
|
|
class="account"
|
|
|
|
[ngClass]="{ active: a.value.profile.authenticationStatus == 'active' }"
|
|
|
|
href="#"
|
2022-01-12 15:23:00 +01:00
|
|
|
(mousedown)="switch(a.key)"
|
2021-12-15 23:32:00 +01:00
|
|
|
>
|
|
|
|
<span class="email">{{ a.value.profile.email }}</span>
|
2022-01-12 15:23:00 +01:00
|
|
|
<span class="server">{{ a.value.serverUrl }}</span>
|
2021-12-15 23:32:00 +01:00
|
|
|
<span class="status">{{ a.value.profile.authenticationStatus }}</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="border"></div>
|
|
|
|
<a class="add" routerLink="/login" (click)="toggle()">
|
|
|
|
<i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
|
2021-12-20 15:47:17 +01:00
|
|
|
</a>
|
|
|
|
</div>
|
2021-12-15 23:32:00 +01:00
|
|
|
</ng-template>
|