mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
114 lines
5.0 KiB
HTML
114 lines
5.0 KiB
HTML
<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar>
|
|
|
|
<!-- TOP BACKGROUND -->
|
|
<div class="top-bg mat-accent-bg"></div>
|
|
<!-- / TOP BACKGROUND -->
|
|
|
|
<mat-sidenav-container>
|
|
|
|
<!-- SIDENAV -->
|
|
<mat-sidenav class="sidenav" position="start" mode="side" opened="true"
|
|
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
|
<fuse-mail-main-sidenav></fuse-mail-main-sidenav>
|
|
</mat-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 mat-icon-button class="sidenav-toggle"
|
|
fuseMatSidenavToggler="carded-left-sidenav"
|
|
fxHide.gt-md aria-label="Toggle Sidenav">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon>search</mat-icon>
|
|
<input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / CONTENT HEADER -->
|
|
|
|
<!-- CONTENT CARD -->
|
|
<div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
|
|
|
|
<!-- CONTENT TOOLBAR -->
|
|
<div class="toolbar px-24 py-8">
|
|
|
|
<div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
|
|
<mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
|
|
[indeterminate]="isIndeterminate"></mat-checkbox>
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
|
|
<mat-icon>arrow_drop_down</mat-icon>
|
|
</button>
|
|
<mat-menu #selectMenu="matMenu">
|
|
<button mat-menu-item (click)="selectMails()">All</button>
|
|
<button mat-menu-item (click)="deselectMails()">None</button>
|
|
<button mat-menu-item (click)="selectMails('read', true)">Read</button>
|
|
<button mat-menu-item (click)="selectMails('read', false)">Unread</button>
|
|
<button mat-menu-item (click)="selectMails('starred', true)">Starred</button>
|
|
<button mat-menu-item (click)="selectMails('starred', false)">Unstarred</button>
|
|
<button mat-menu-item (click)="selectMails('important', true)">Important</button>
|
|
<button mat-menu-item (click)="selectMails('important', false)">Unimportant</button>
|
|
</mat-menu>
|
|
|
|
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
|
|
|
|
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
|
|
<mat-icon>folder</mat-icon>
|
|
</button>
|
|
<mat-menu #folderMenu="matMenu">
|
|
<button mat-menu-item *ngFor="let folder of folders"
|
|
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
|
|
</button>
|
|
</mat-menu>
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
|
|
<mat-icon>label</mat-icon>
|
|
</button>
|
|
<mat-menu #labelMenu="matMenu">
|
|
<button mat-menu-item *ngFor="let label of labels"
|
|
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
|
|
<div *ngIf="currentMail" fxHide.gt-xs>
|
|
<button mat-icon-button (click)="deSelectCurrentMail()">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- / CONTENT TOOLBAR -->
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content" fxLayout="row">
|
|
|
|
<fuse-mail-list fusePerfectScrollbar fxFlex></fuse-mail-list>
|
|
<fuse-mail-details fusePerfectScrollbar fxFlex></fuse-mail-details>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|
|
<!-- / CONTENT CARD -->
|
|
|
|
</div>
|
|
<!-- / CENTER -->
|
|
|
|
</mat-sidenav-container>
|
|
|
|
</div>
|