fuse-angular/src/app/main/apps/mail-ngrx/mail.component.html

<div id="mail" class="page-layout carded left-sidebar inner-scroll">

    <!-- TOP BACKGROUND -->
    <div class="top-bg mat-accent-bg"></div>
    <!-- / TOP BACKGROUND -->

    <!-- SIDEBAR -->
    <fuse-sidebar class="sidebar" name="mail-ngrx-main-sidebar" position="left" lockedOpen="gt-md">
        <mail-ngrx-main-sidebar></mail-ngrx-main-sidebar>
    </fuse-sidebar>
    <!-- / SIDEBAR -->

    <!-- 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="sidebar-toggle" fxHide.gt-md
                        (click)="toggleSidebar('mail-ngrx-main-sidebar')">
                    <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$ | async}">

            <!-- CONTENT TOOLBAR -->
            <div class="toolbar px-24 py-8">

                <div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">

                    <mat-checkbox (click)="toggleSelectAll($event)"
                                  [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)="selectAllMails()">All</button>
                        <button mat-menu-item (click)="deselectAllMails()">None</button>
                        <button mat-menu-item (click)="selectMailsByParameter('read', true)">Read</button>
                        <button mat-menu-item (click)="selectMailsByParameter('read', false)">Unread</button>
                        <button mat-menu-item (click)="selectMailsByParameter('starred', true)">Starred</button>
                        <button mat-menu-item (click)="selectMailsByParameter('starred', false)">Unstarred</button>
                        <button mat-menu-item (click)="selectMailsByParameter('important', true)">Important</button>
                        <button mat-menu-item (click)="selectMailsByParameter('important', false)">Unimportant</button>
                    </mat-menu>

                    <div class="toolbar-separator" *ngIf="hasSelectedMails"></div>

                    <button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
                        <mat-icon class="secondary-text">delete</mat-icon>
                    </button>

                    <button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
                        <mat-icon class="secondary-text">folder</mat-icon>
                    </button>
                    <mat-menu #folderMenu="matMenu">
                        <button mat-menu-item *ngFor="let folder of folders$ | async"
                                (click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
                        </button>
                    </mat-menu>

                    <button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
                        <mat-icon class="secondary-text">label</mat-icon>
                    </button>
                    <mat-menu #labelMenu="matMenu">
                        <button mat-menu-item *ngFor="let label of labels$ | async"
                                (click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
                        </button>
                    </mat-menu>
                </div>

                <div *ngIf="currentMail$ | async" fxHide.gt-xs>
                    <button mat-icon-button (click)="deselectCurrentMail()">
                        <mat-icon class="secondary-text">arrow_back</mat-icon>
                    </button>
                </div>
            </div>
            <!-- / CONTENT TOOLBAR -->

            <!-- CONTENT -->
            <div class="content" fxLayout="row">

                <mail-ngrx-list fusePerfectScrollbar fxFlex [mails]="mails$ | async" [currentMail]="currentMail$ | async"></mail-ngrx-list>
                <mail-ngrx-details [mail]="currentMail$ | async" fusePerfectScrollbar fxFlex></mail-ngrx-details>

            </div>
            <!-- / CONTENT -->

        </div>
        <!-- / CONTENT CARD -->

    </div>
    <!-- / CENTER -->

</div>