mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-19 23:02:33 +00:00
107 lines
4.3 KiB
HTML
107 lines
4.3 KiB
HTML
<div id="mail" class="page-layout carded left-sidenav">
|
|
|
|
<!-- TOP BACKGROUND -->
|
|
<div class="top-bg md-accent-bg"></div>
|
|
<!-- / TOP BACKGROUND -->
|
|
|
|
<md-sidenav-container>
|
|
|
|
<!-- SIDENAV -->
|
|
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
|
|
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
|
|
<fuse-mail-main-sidenav></fuse-mail-main-sidenav>
|
|
</md-sidenav>
|
|
<!-- / SIDENAV -->
|
|
|
|
<!-- CENTER -->
|
|
<div class="center">
|
|
|
|
<!-- CONTENT HEADER -->
|
|
<div class="header" fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<button md-button class="mat-icon-button sidenav-toggle"
|
|
fuseMdSidenavToggler="carded-left-sidenav"
|
|
fxHide.gt-md aria-label="Toggle Sidenav">
|
|
<md-icon>menu</md-icon>
|
|
</button>
|
|
|
|
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon>search</md-icon>
|
|
<input fxFlex type="text" placeholder="Search for an e-mail or contact">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / CONTENT HEADER -->
|
|
|
|
<!-- CONTENT CARD -->
|
|
<div class="content-card">
|
|
|
|
<!-- CONTENT TOOLBAR -->
|
|
<div class="toolbar">
|
|
|
|
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
|
|
[indeterminate]="isIndeterminate"></md-checkbox>
|
|
|
|
<button md-icon-button [mdMenuTriggerFor]="selectMenu">
|
|
<md-icon>arrow_drop_down</md-icon>
|
|
</button>
|
|
<md-menu #selectMenu="mdMenu">
|
|
<button md-menu-item (click)="selectMails()">All</button>
|
|
<button md-menu-item (click)="deselectMails()">None</button>
|
|
<button md-menu-item (click)="selectMails('read', true)">Read</button>
|
|
<button md-menu-item (click)="selectMails('read', false)">Unread</button>
|
|
<button md-menu-item (click)="selectMails('starred', true)">Starred</button>
|
|
<button md-menu-item (click)="selectMails('starred', false)">Unstarred</button>
|
|
<button md-menu-item (click)="selectMails('important', true)">Important</button>
|
|
<button md-menu-item (click)="selectMails('important', false)">Unimportant</button>
|
|
</md-menu>
|
|
|
|
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
|
|
|
|
<button md-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
|
|
<md-icon>delete</md-icon>
|
|
</button>
|
|
|
|
<button md-icon-button [mdMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
|
|
<md-icon>folder</md-icon>
|
|
</button>
|
|
<md-menu #folderMenu="mdMenu">
|
|
<button md-menu-item *ngFor="let folder of folders" (click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}</button>
|
|
</md-menu>
|
|
|
|
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
|
|
<md-icon>label</md-icon>
|
|
</button>
|
|
<md-menu #labelMenu="mdMenu">
|
|
<button md-menu-item *ngFor="let label of labels" (click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}</button>
|
|
</md-menu>
|
|
|
|
</div>
|
|
<!-- / CONTENT TOOLBAR -->
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content">
|
|
|
|
<div fxLayout="row" fxFill>
|
|
|
|
<fuse-mail-list fxFlex perfect-scrollbar></fuse-mail-list>
|
|
|
|
<fuse-mail-details fxFlex perfect-scrollbar></fuse-mail-details>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|
|
<!-- / CONTENT CARD -->
|
|
|
|
</div>
|
|
<!-- / CENTER -->
|
|
|
|
</md-sidenav-container>
|
|
|
|
</div> |