angular-material-app documentation
  1. Components
  2. ToolbarUserComponent

File

src/app/admin/toolbar-user/toolbar-user.component.ts

Implements

OnInit

Metadata

selector stbui-toolbar-user
styleUrls ./toolbar-user.component.scss
templateUrl ./toolbar-user.component.html

Index

Properties
Methods
HostListeners

Constructor

constructor(_elementRef: ElementRef, router: Router, auth: AuthService)
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:25
Parameters :
Name Type Optional
_elementRef ElementRef No
router Router No
auth AuthService No

HostListeners

document:click
Arguments : '$event' '$event.target'
document:click(event: MouseEvent, targetElement: HTMLElement)
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:14

Methods

logout
logout()
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:39
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:33
Returns : void
toggleDropdown
toggleDropdown()
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:35
Returns : void

Properties

Public auth
Type : AuthService
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:30
isOpen
Type : boolean
Default value : false
Defined in src/app/admin/toolbar-user/toolbar-user.component.ts:11
 
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']);
    });
  }
}
Copy
<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>
Copy

./toolbar-user.component.scss 

$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);
    }
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""