mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-16 21:35:13 +00:00
c06e99dc97
Lots of breaking changes, all "md" prefixes changed with "mat" due to angular material deprecation of "md", md2 package removed, its not compatible with latest material version, will be replaced with another date picker later.
77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
|
|
|
|
<!-- HEADER -->
|
|
<div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
|
|
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
|
|
|
<!-- APP TITLE -->
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<button mat-button class="mat-icon-button sidenav-toggle mr-12"
|
|
fuseMatSidenavToggler="contacts-main-sidenav"
|
|
fxHide.gt-md>
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<div class="logo" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</mat-icon>
|
|
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / APP TITLE -->
|
|
|
|
<!-- SEARCH -->
|
|
<div class="search-input-wrapper mt-16 ml-8 m-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
|
<label for="search" class="mr-8">
|
|
<mat-icon>search</mat-icon>
|
|
</label>
|
|
<mat-form-field mat-no-float class="m-0" floatPlaceholder="never">
|
|
<input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- / SEARCH -->
|
|
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- SELECTED BAR -->
|
|
<fuse-selected-bar class="mat-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></fuse-selected-bar>
|
|
<!-- / SELECTED BAR -->
|
|
|
|
<mat-sidenav-container>
|
|
|
|
<!-- SIDENAV -->
|
|
<mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
|
|
fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">
|
|
|
|
<fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
|
|
|
|
</mat-sidenav>
|
|
<!-- / SIDENAV -->
|
|
|
|
<!-- CENTER -->
|
|
<div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content mat-white-bg mat-elevation-z4">
|
|
|
|
<fuse-contacts-contact-list></fuse-contacts-contact-list>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|
|
<!-- / CENTER -->
|
|
|
|
</mat-sidenav-container>
|
|
|
|
</div>
|
|
|
|
<!-- ADD CONTACT BUTTON -->
|
|
<button mat-fab class="mat-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
|
|
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
|
|
<mat-icon>person_add</mat-icon>
|
|
</button>
|
|
<!-- / ADD CONTACT BUTTON -->
|