ccims documentation
  1. Components
  2. TopToolbarComponent

File

src/app/top-toolbar/top-toolbar.component.ts

Description

This component is responsible for showing the top bar containing the home icon on the left-hand side and the mock settings and user icon as well as the functional log out button on the right-hand side. It does NOT determine whether to show the sandwich menu icon itself, but gets this information passed from FrameComponent.

Metadata

selector app-top-toolbar
styleUrls ./top-toolbar.component.scss
templateUrl ./top-toolbar.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(breakpointObserver: BreakpointObserver, authService: AuthenticationService, dialog: MatDialog)
Defined in src/app/top-toolbar/top-toolbar.component.ts:30
Parameters :
Name Type Optional
breakpointObserver BreakpointObserver No
authService AuthenticationService No
dialog MatDialog No

Inputs

showMenuButton
Type : boolean
Default value : false
Defined in src/app/top-toolbar/top-toolbar.component.ts:22

Outputs

menuClick
Type : EventEmitter
Defined in src/app/top-toolbar/top-toolbar.component.ts:25

Methods

Public handleClick
handleClick()
Defined in src/app/top-toolbar/top-toolbar.component.ts:34
Returns : void
Public openSettingsDialog
openSettingsDialog()
Defined in src/app/top-toolbar/top-toolbar.component.ts:38
Returns : void

Properties

Public authService
Type : AuthenticationService
Defined in src/app/top-toolbar/top-toolbar.component.ts:32
isHandset$
Type : Observable<boolean>
Default value : this.breakpointObserver.observe(Breakpoints.Handset).pipe( map((result) => result.matches), shareReplay() )
Defined in src/app/top-toolbar/top-toolbar.component.ts:27
 
import {Component, Output, EventEmitter, Input} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import {Observable} from 'rxjs';
import {map, shareReplay} from 'rxjs/operators';
import {AuthenticationService} from '@app/auth/authentication.service';
import {MatDialog} from '@angular/material/dialog';
import {SettingsDialogComponent} from '@app/dialogs/settings-dialog/settings-dialog.component';

/**
 * This component is responsible for showing the top bar containing the home icon
 * on the left-hand side and the mock settings and user icon as well as the functional
 * log out button on the right-hand side. It does NOT determine whether to show the sandwich
 * menu icon itself, but gets this information passed from FrameComponent.
 */
@Component({
  selector: 'app-top-toolbar',
  templateUrl: './top-toolbar.component.html',
  styleUrls: ['./top-toolbar.component.scss']
})
export class TopToolbarComponent {
  @Input()
  showMenuButton = false;

  @Output()
  public menuClick = new EventEmitter();

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map((result) => result.matches),
    shareReplay()
  );

  constructor(private breakpointObserver: BreakpointObserver, public authService: AuthenticationService, private dialog: MatDialog) {}

  public handleClick(): void {
    this.menuClick.emit();
  }

  public openSettingsDialog(): void {
    this.dialog.open(SettingsDialogComponent);
  }
}

<mat-toolbar color="primary" id="toolbar">
  <!--add *ngIf="isHandset$ | async" within the button tag if you want to show the menu toggle button on mobile only-->
  <button
    mat-icon-button
    class="example-icon"
    aria-label="Toggle sidenav"
    (click)="this.handleClick()"
    [hidden]="!showMenuButton"
    title="Show menu"
  >
    <mat-icon>menu</mat-icon>
  </button>
  <button
    routerLink="/"
    mat-icon-button
    class="example-icon favorite-icon"
    aria-label="Home icon-button with a house"
    title="Show all projects"
  >
    <mat-icon>home</mat-icon>
  </button>
  <span class="toolbar-spacer"></span>
  <!--This div makes the setting and account icon stay together - mat-toolbar has justify-content set-->
  <div>
    <button
      (click)="openSettingsDialog()"
      mat-icon-button
      class="example-icon favorite-icon"
      aria-label="Example icon-button with heart icon"
      title="Settings"
    >
      <mat-icon>settings</mat-icon>
    </button>
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon" title="User settings">
      <mat-icon>account_circle</mat-icon>
    </button>
    <button
      (click)="authService.logout()"
      mat-icon-button
      class="example-icon"
      aria-label="Example icon-button with share icon"
      title="Logout"
    >
      <mat-icon>logout</mat-icon>
    </button>
  </div>
</mat-toolbar>

./top-toolbar.component.scss 

mat-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
}
.toolbar-spacer {
  flex: 1 1 auto;
}

.mat-toolbar {
  justify-content: space-between;
}

.toolbar-spacer {
  flex: 1 1 auto;
}

#current-project {
  font-size: 12px;
  border: 3px solid white;
  border-radius: 0.5em;
  padding: 0 4px 0 4px;
  margin: auto;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""