File
Implements
Metadata
| selector |
stbui-toolbar-user |
| styleUrls |
./toolbar-user.component.scss |
| templateUrl |
./toolbar-user.component.html |
Index
Properties
|
|
|
Methods
|
|
|
HostListeners
|
|
|
HostListeners
|
document:click
|
Arguments : '$event' '$event.target'
|
document:click(event: MouseEvent, targetElement: HTMLElement)
|
|
|
Methods
|
toggleDropdown
|
toggleDropdown()
|
|
|
|
|
|
isOpen
|
Type : boolean
|
Default value : false
|
|
|
import { Component, OnInit, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../core/auth.service';
@Component({
selector: 'stbui-toolbar-user',
templateUrl: './toolbar-user.component.html',
styleUrls: ['./toolbar-user.component.scss']
})
export class ToolbarUserComponent implements OnInit {
isOpen: boolean = false;
@HostListener('document:click', ['$event', '$event.target'])
onClick(event: MouseEvent, targetElement: HTMLElement) {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(
targetElement
);
if (!clickedInside) {
this.isOpen = false;
}
}
constructor(
private _elementRef: ElementRef,
private router: Router,
public auth: AuthService
) {}
ngOnInit() {}
toggleDropdown() {
this.isOpen = !this.isOpen;
}
logout() {
this.auth.signOut().then(() => {
this.router.navigate(['/sigin']);
});
}
}
<div class="toolbar-user-container">
<div *ngIf="(auth.user | async); then authenticated; else guest"></div>
</div>
<ng-template class="guest" #guest>
<button class="dropdown-toggle" mat-button (click)="logout()">
<img class="dropdown-avatar" [src]="'assets/images/avatars/noavatar.png'" />
<span class="dropdown-displayName" fxHide fxShow.gt-sm>登陆</span>
</button>
</ng-template>
<ng-template class="authenticated" #authenticated>
<ng-container *ngIf="(auth.user | async) as user">
<button class="dropdown-toggle" mat-button (click)="toggleDropdown()">
<img class="dropdown-avatar" [src]="user.photoURL || 'assets/images/avatars/noavatar.png'" />
<span class="dropdown-displayName" fxHide fxShow.gt-sm>{{ user.displayName }}</span>
<mat-icon class="dropdown-icon-arrow" fxHide fxShow.gt-sm [class.open]="isOpen">keyboard_arrow_down</mat-icon>
</button>
<div class="dropdown-list-wrapper mat-elevation-z1" [class.open]="isOpen">
<mat-nav-list>
<mat-list-item>
<mat-icon>account_circle</mat-icon>
<span class="m-l-10">个人</span>
</mat-list-item>
<mat-list-item>
<mat-icon>settings</mat-icon>
<span class="m-l-10">设置</span>
</mat-list-item>
<mat-list-item>
<mat-icon>help</mat-icon>
<span class="m-l-10">帮助</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item (click)="logout()">
<mat-icon>exit_to_app</mat-icon>
<span class="m-l-10">退出</span>
</mat-list-item>
</mat-nav-list>
</div>
</ng-container>
</ng-template>
$height: 64px;
$width: 140px;
$background: #fff;
.toolbar-user-container {
position: relative;
}
.dropdown {
&-toggle {
display: flex;
justify-content: center;
height: $height;
min-width: $width;
z-index: 21;
}
&-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
&-displayName {
margin-right: 10px;
}
&-icon-arrow {
width: 16px;
height: 16px;
font-size: 16px;
transform: rotate(0);
transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
&.open {
transform: rotate(-180deg);
}
}
&-list-wrapper {
background: $background;
position: absolute;
top: $height + 2px;
min-width: $width;
z-index: 20;
visibility: hidden;
transform: translateY(-135%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
visibility 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
&.open {
visibility: visible;
transform: translateY(0);
}
}
}
Legend
Html element with directive