(Mail App) Compose Dialog added.

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -0,0 +1,108 @@
+<md-toolbar md-dialog-title class="mat-accent m-0">
+    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <span class="title dialog-title">New Message</span>
+        <button md-button class="mat-icon-button"
+                (click)="dialogRef.close()"
+                aria-label="Close dialog">
+            <md-icon>close</md-icon>
+        </button>
+    </div>
+</md-toolbar>
+
+<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
+
+    <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
+
+        <md-input-container>
+            <input mdInput name="from"
+                   placeholder="From"
+                   formControlName="from"
+                   type="email">
+        </md-input-container>
+
+        <md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
+            <input mdInput name="to"
+                   placeholder="To"
+                   formControlName="to"
+                   type="email" required>
+        </md-input-container>
+
+        <md-input-container>
+            <input mdInput
+                   name="cc"
+                   placeholder="Cc"
+                   formControlName="cc"
+                   type="email">
+        </md-input-container>
+
+        <md-input-container>
+            <input mdInput
+                   name="bcc"
+                   placeholder="Bcc"
+                   formControlName="bcc"
+                   type="email">
+        </md-input-container>
+
+        <md-input-container>
+            <input mdInput name="subject"
+                   placeholder="Subject"
+                   formControlName="subject">
+        </md-input-container>
+
+        <md-input-container>
+            <textarea mdInput name="message"
+                      placeholder="Message"
+                      formControlName="message">
+            </textarea>
+        </md-input-container>
+
+        <div class="attachment-list">
+
+            <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
+                <div>
+                    <span class="filename">attachment-2.doc</span>
+                    <span class="size">(12 Kb)</span>
+                </div>
+
+                <button md-icon-button aria-label="Delete attachment">
+                    <md-icon class="s-16">close</md-icon>
+                </button>
+            </div>
+
+            <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
+                <div>
+                    <span class="filename">attachment-1.jpg</span>
+                    <span class="size">(350 Kb)</span>
+                </div>
+
+                <button md-icon-button aria-label="Delete attachment">
+                    <md-icon class="s-16">close</md-icon>
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+    <div>
+        <button md-raised-button
+                (click)="dialogRef.close(['send',composeForm])"
+                class="save-button mat-accent"
+                [disabled]="composeForm.invalid"
+                aria-label="SAVE">
+            SEND
+        </button>
+
+        <button md-icon-button md-tooltip="Attach a file">
+            <md-icon>attach_file</md-icon>
+        </button>
+    </div>
+
+    <button md-button
+            class="mat-icon-button"
+            (click)="dialogRef.close(['delete',composeForm])"
+            aria-label="Delete"
+            md-tooltip="Delete">
+        <md-icon>delete</md-icon>
+    </button>
+</div>

src/app/main/content/apps/mail/dialogs/compose/compose.component.scss

@@ -0,0 +1,33 @@
+:host {
+    display: flex;
+    flex-direction: column;
+}
+
+.mail-compose-dialog {
+    .mat-dialog-container {
+        padding: 0;
+        max-width: 720px;
+        width: 720px;
+
+        .attachment-list {
+            font-size: 13px;
+            padding-top: 16px;
+
+            .attachment {
+                background-color: rgba(0, 0, 0, 0.08);
+                border: 1px solid rgba(0, 0, 0, 0.16);
+                padding-left: 16px;
+                margin-top: 8px;
+                border-radius: 2px;
+
+                .filename {
+                    font-weight: 500;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}

src/app/main/content/apps/mail/dialogs/compose/compose.component.ts

@@ -0,0 +1,42 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+    selector     : 'fuse-mail-compose',
+    templateUrl  : './compose.component.html',
+    styleUrls    : ['./compose.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class MailComposeDialogComponent implements OnInit
+{
+    composeForm: FormGroup;
+
+    constructor(
+        public dialogRef: MdDialogRef<MailComposeDialogComponent>,
+        @Inject(MD_DIALOG_DATA) private data: any
+    )
+    {
+        this.composeForm = this.createComposeForm();
+    }
+
+    ngOnInit()
+    {
+    }
+
+    createComposeForm()
+    {
+        return new FormGroup({
+            from   : new FormControl({
+                value   : 'johndoe@creapond.com',
+                disabled: true
+            }),
+            to     : new FormControl(''),
+            cc     : new FormControl(''),
+            bcc    : new FormControl(''),
+            subject: new FormControl(''),
+            message: new FormControl('')
+        });
+    }
+
+}

src/app/main/content/apps/mail/mail.module.ts

@@ -7,6 +7,7 @@ import { MailListItemComponent } from './mail-list/mail-list-item/mail-list-item
 import { MailListComponent } from './mail-list/mail-list.component';
 import { MailDetailsComponent } from './mail-details/mail-details.component';
 import { MailService } from './mail.service';
+import { MailComposeDialogComponent } from './dialogs/compose/compose.component';
 
 const routes: Routes = [
     {
@@ -58,12 +59,13 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    declarations: [
+    declarations   : [
         MailComponent,
         MailListComponent,
         MailListItemComponent,
         MailDetailsComponent,
-        MainSidenavComponent
+        MainSidenavComponent,
+        MailComposeDialogComponent
     ],
     imports        : [
         SharedModule,
@@ -71,7 +73,8 @@ const routes: Routes = [
     ],
     providers      : [
         MailService
-    ]
+    ],
+    entryComponents: [MailComposeDialogComponent]
 })
 export class FuseMailModule
 {

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -22,6 +22,15 @@
 <!-- SIDENAV CONTENT -->
 <div class="content" perfect-scrollbar>
 
+    <div class="p-24">
+        <button md-raised-button fxFlex
+                class="mat-accent compose-dialog-button"
+                (click)="composeDialog($event)"
+                aria-label="Compose">
+            COMPOSE
+        </button>
+    </div>
+
     <div class="nav">
 
         <div class="nav-subheader">FOLDERS</div>

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.scss

@@ -21,4 +21,9 @@
             width: 100%;
         }
     }
+    .content {
+
+        .compose-dialog-button {
+        }
+    }
 }

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MailService } from '../../mail.service';
 import { Subscription } from 'rxjs/Subscription';
+import { MailComposeDialogComponent } from '../../dialogs/compose/compose.component';
+import { MdDialog } from '@angular/material';
+import { FormGroup } from '@angular/forms';
 
 @Component({
     selector   : 'fuse-mail-main-sidenav',
@@ -14,13 +17,15 @@ export class MainSidenavComponent implements OnInit, OnDestroy
     labels: any[];
     accounts: object;
     selectedAccount: string;
+    dialogRef: any;
 
     onFoldersChanged: Subscription;
     onFiltersChanged: Subscription;
     onLabelsChanged: Subscription;
 
     constructor(
-        private mailService: MailService
+        private mailService: MailService,
+        public dialog: MdDialog
     )
     {
         // Data
@@ -53,6 +58,37 @@ export class MainSidenavComponent implements OnInit, OnDestroy
                 });
     }
 
+    composeDialog()
+    {
+        this.dialogRef = this.dialog.open(MailComposeDialogComponent, {
+            panelClass: 'mail-compose-dialog'
+        });
+        this.dialogRef.afterClosed()
+            .subscribe(response => {
+                if ( !response )
+                {
+                    return;
+                }
+                const actionType: string = response[0];
+                const formData: FormGroup = response[1];
+                switch ( actionType )
+                {
+                    /**
+                     * Send
+                     */
+                    case 'send':
+                        console.log('new Mail', formData.getRawValue());
+                        break;
+                    /**
+                     * Delete
+                     */
+                    case 'delete':
+                        console.log('delete Mail');
+                        break;
+                }
+            });
+    }
+
     ngOnDestroy()
     {
         this.onFoldersChanged.unsubscribe();

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html

@@ -22,8 +22,8 @@
 <!-- SIDENAV CONTENT -->
 <div class="content" perfect-scrollbar>
 
-    <div class="p-24" fxFlexAlign="row" fxLayoutAlign="center center">
+    <div class="p-24">
-        <button md-raised-button
+        <button md-raised-button fxFlex
                 class="mat-accent add-todo-button"
                 (click)="newTodo()"
                 aria-label="ADD TASK">

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.scss

@@ -27,7 +27,6 @@
     .content {
 
         .add-todo-button {
-            width: 100%;
         }
     }
 }