HtmlToPlaintext pipe,

images added to assets,
@angular/flex-layout package version updated,
some workin on the mail app..

package-lock.json

@@ -361,9 +361,9 @@
       }
     },
     "@angular/flex-layout": {
-      "version": "2.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-rc.1.tgz",
-      "integrity": "sha1-lvp/hbLEus8nhJE6LWB+LtI9x/E="
+      "version": "2.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.8.tgz",
+      "integrity": "sha1-uc9XhlqTyhWP5W2FCVJCPySNEDs="
     },
     "@angular/forms": {
       "version": "4.3.0",

package.json

@@ -17,7 +17,7 @@
     "@angular/common": "^4.3.0",
     "@angular/compiler": "^4.3.0",
     "@angular/core": "^4.3.0",
-    "@angular/flex-layout": "^2.0.0-rc.1",
+    "@angular/flex-layout": "^2.0.0-beta.8",
     "@angular/forms": "^4.3.0",
     "@angular/http": "^4.3.0",
     "@angular/material": "^2.0.0-beta.8",

src/app/core/modules/shared.module.ts

@@ -9,12 +9,14 @@ import {
 } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
 import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 import {KeysPipe} from '../pipes/keys';
+import {HtmlToPlaintextPipe} from '../pipes//htmlToPlaintext';
 
 @NgModule({
     declarations: [
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
-        KeysPipe
+        KeysPipe,
+        HtmlToPlaintextPipe
     ],
     imports     : [
         FlexLayoutModule,
@@ -31,7 +33,8 @@ import {KeysPipe} from '../pipes/keys';
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
         PerfectScrollbarModule,
-        KeysPipe
+        KeysPipe,
+        HtmlToPlaintextPipe
     ]
 })
 

src/app/core/pipes/htmlToPlaintext.ts

@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'htmlToPlaintext'})
+export class HtmlToPlaintextPipe implements PipeTransform
+{
+    transform(value: string, args: any[] = [])
+    {
+        return value ? String(value).replace(/<[^>]+>/gm, '') : '';
+    }
+}

src/app/core/scss/core.scss

@@ -21,6 +21,7 @@
 
 // Partials
 @import "partials/global";
+@import "partials/_material";
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";

src/app/core/scss/partials/_material.scss

@@ -0,0 +1,416 @@
+/*----------------------------------------------------------------*/
+/*  Avatars
+/*----------------------------------------------------------------*/
+.avatar {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    line-height: 40px;
+    margin: 0 8px 0 0;
+    border-radius: 50%;
+    font-size: 17px;
+    font-weight: 500;
+    text-align: center;
+    color: #FFFFFF;
+
+    &.square {
+        border-radius: 0;
+    }
+
+    &.small {
+        width: 20px;
+        min-width: 20px;
+        height: 20px;
+        line-height: 20px;
+    }
+
+    &.big {
+        width: 72px;
+        min-width: 72px;
+        height: 72px;
+        line-height: 72px;
+    }
+
+    &.huge {
+        width: 96px;
+        min-width: 96px;
+        height: 96px;
+        line-height: 96px;
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Forms
+/*----------------------------------------------------------------*/
+.form-wrapper {
+    background: #FFFFFF;
+    padding: 16px;
+
+    .form-title {
+        font-size: 21px;
+        padding: 8px 0;
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Navigation - Simple
+/*----------------------------------------------------------------*/
+.navigation-simple {
+
+    .item {
+        position: relative;
+        cursor: pointer;
+        text-align: left;
+        margin: 0;
+        padding: 0 24px;
+        text-transform: none;
+        line-height: 48px;
+        max-height: 48px;
+        height: 48px;
+
+        md-icon {
+            margin: 0 16px 0 0;
+        }
+
+        .title {
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 1;
+        }
+
+        &.selected {
+            background-color: rgba(0, 0, 0, 0.06);
+        }
+    }
+
+    .subheader {
+        font-size: 13px;
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+        font-weight: 500;
+        margin-top: 8px;
+
+        &.light {
+            border-top: 1px solid rgba(255, 255, 255, 0.12);
+        }
+    }
+
+    md-divider {
+        margin: 8px 0;
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Pagination
+/*----------------------------------------------------------------*/
+.simple-pagination {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    @include mat-elevation(1);
+    background-color: #FFFFFF;
+    padding: 0 8px;
+
+    .pagination-item {
+        min-width: 48px;
+        min-height: 56px;
+        line-height: 56px;
+        border-radius: 0;
+        margin: 0;
+        font-weight: normal;
+        color: rgba(0, 0, 0, 0.54);
+
+        &:hover {
+            color: rgba(0, 0, 0, 0.87);
+        }
+
+        &.active {
+            cursor: default;
+            color: rgba(0, 0, 0, 0.87);
+        }
+
+        &.disabled {
+            cursor: default;
+            color: rgba(0, 0, 0, 0.26);
+        }
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Price Tables
+/*----------------------------------------------------------------*/
+.price-tables {
+
+    .price-table {
+        position: relative;
+        background-color: #FFFFFF;
+        width: 280px;
+        border-radius: 2px;
+        margin: 24px 24px 0 0;
+        overflow: hidden;
+
+        &.style-1 {
+
+            .package-type {
+                font-size: 17px;
+                padding: 16px 24px;
+
+                .sale {
+                    font-size: 13px;
+                    font-weight: 600;
+                }
+            }
+
+            .price {
+                padding: 32px 32px 16px 32px;
+
+                .currency {
+                    padding-right: 4px;
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+
+                .value {
+                    font-size: 72px;
+                    font-weight: 300;
+                    line-height: 1;
+                }
+
+                .period {
+                    padding: 0 0 5px 4px;
+                    font-size: 17px;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+
+            md-divider {
+                margin: 16px 32px;
+            }
+
+            .terms {
+                padding: 16px 32px;
+                font-size: 15px;
+
+                .term {
+
+                }
+            }
+
+            .cta-button {
+                margin: 16px auto 32px auto;
+                width: 128px;
+            }
+        }
+
+        &.style-2 {
+
+            .badge {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                font-size: 11px;
+                font-weight: 500;
+                padding: 6px 8px;
+            }
+
+            .package-type {
+                padding: 48px 32px 24px 32px;
+                font-size: 20px;
+                font-weight: 500;
+                text-align: center;
+            }
+
+            .price {
+                padding: 0 32px 8px 32px;
+
+                .currency {
+                    padding-right: 4px;
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+
+                .value {
+                    font-size: 56px;
+                    font-weight: 300;
+                    line-height: 1;
+                }
+            }
+
+            .period {
+                padding: 0 32px;
+                font-size: 15px;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.54);
+                text-align: center;
+            }
+
+            .terms {
+                padding: 32px;
+                font-size: 15px;
+
+                .term {
+                    padding-bottom: 8px;
+
+                    &:last-child {
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            .cta-button {
+                margin: 8px auto 32px auto;
+                width: 128px;
+            }
+        }
+
+        &.style-3 {
+
+            .package-type {
+                padding: 32px;
+                text-align: center;
+
+                .title {
+                    font-size: 34px;
+                }
+
+                .subtitle {
+                    font-size: 17px;
+                    color: rgba(0, 0, 0, 0.54);
+                    font-weight: 500;
+                }
+            }
+
+            .price {
+                padding: 16px 32px;
+
+                .currency {
+                    padding-right: 4px;
+                    font-size: 15px;
+                    font-weight: 500;
+                }
+
+                .value {
+                    font-size: 34px;
+                    font-weight: 300;
+                    line-height: 1;
+                }
+
+                .period {
+                    padding-left: 4px;
+                    text-align: center;
+                }
+            }
+
+            .terms {
+                margin: 32px;
+                font-size: 15px;
+                color: rgba(0, 0, 0, 0.54);
+
+                .term {
+                    padding-bottom: 16px;
+
+                    &:last-child {
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            .cta-button {
+                margin: 8px 32px;
+            }
+
+            .note {
+                padding: 8px 32px 16px 32px;
+                text-align: center;
+                color: rgba(0, 0, 0, 0.54);
+            }
+        }
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Table - Simple
+/*----------------------------------------------------------------*/
+.simple-table-container {
+    background: #FFFFFF;
+
+    .table-title {
+        font-size: 20px;
+        padding: 24px;
+    }
+}
+
+table {
+
+    &.simple {
+        width: 100%;
+        border: none;
+        border-spacing: 0;
+        text-align: left;
+
+        thead {
+
+            tr {
+
+                th {
+                    padding: 16px 8px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                    white-space: nowrap;
+                    min-width: 120px;
+
+                    &:first-child {
+                        padding-left: 24px;
+                    }
+
+                    &:last-child {
+                        padding-right: 24px;
+                    }
+                }
+            }
+        }
+
+        tbody {
+
+            tr {
+
+                td {
+                    padding: 16px 8px;
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+                    &:first-child {
+                        padding-left: 24px;
+                    }
+
+                    &:last-child {
+                        padding-right: 24px;
+                    }
+                }
+
+                &:last-child {
+
+                    td {
+                        border-bottom: none;
+                    }
+                }
+            }
+        }
+
+        &.clickable {
+
+            tbody {
+
+                tr {
+                    cursor: pointer;
+
+                    &:hover {
+                        background: rgba(0, 0, 0, 0.03);
+                    }
+                }
+            }
+        }
+    }
+}

src/app/core/scss/partials/_typography.scss

@@ -0,0 +1,13 @@
+
+// Truncate
+.text-truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Nowrap
+.text-nowrap {
+    white-space: nowrap;
+}

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html

@@ -1,5 +1,53 @@
-<ul>
-    <li>
-        {{ mail.subject }}
-    </li>
-</ul>
+<div fxLayout="row" fxLayoutAlign="start center">
+
+    <md-checkbox></md-checkbox>
+
+    <div class="info" fxFlex FlexLayout="column">
+
+        <div class="name" fxLayout="row" fxLayoutAlign="start center">
+
+            <img class="avatar" *ngIf="mail.from.avatar" alt="{{mail.from.name}}" src="{{mail.from.avatar}}"/>
+
+            <div class="avatar" *ngIf="!mail.from.avatar">{{mail.from.name[0]}}</div>
+
+            <span class="text-truncate">{{mail.from.name}}</span>
+
+            <md-icon *ngIf="mail.hasAttachments" class="has-attachment">attachment</md-icon>
+        </div>
+
+        <div class="subject text-truncate">
+            {{mail.subject}}
+        </div>
+
+        <div class="message text-truncate">
+
+            {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
+
+            <div class="labels">
+                <div class="label" *ngFor="let labelId of mail.labels">{{labelId}}</div>
+            </div>
+        </div>
+
+    </div>
+
+    <div fxLayout="column" fxLayoutAlign="space-between end">
+
+        <div class="time">{{mail.time}}</div>
+
+        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
+            <button md-button class="mat-icon-button"
+                    ng-click="vm.togglemailStatus('starred', mail, $event)"
+                    aria-label="Toggle starred">
+                <md-icon *ngIf="mail.starred">star</md-icon>
+                <md-icon *ngIf="!mail.starred">star_outline</md-icon>
+            </button>
+
+            <button md-button class="mat-icon-button"
+                    ng-click="vm.togglemailStatus('important', mail, $event)"
+                    aria-label="Toggle important">
+                <md-icon *ngIf="mail.important">label</md-icon>
+                <md-icon *ngIf="!mail.important">label_outline</md-icon>
+            </button>
+        </div>
+    </div>
+</div>

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss

@@ -0,0 +1,121 @@
+:host {
+    background: #FAFAFA;
+    position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+
+    &.unread {
+        background: #FFFFFF;
+
+        .info {
+
+            .name,
+            .subject {
+                font-weight: 700;
+            }
+
+            .message {
+
+                .labels {
+                    background: #FFFFFF;
+                }
+            }
+        }
+    }
+
+    &.selected {
+        background: #FFF8E1;
+
+        .info {
+
+            .message {
+
+                .labels {
+                    background: #FFF8E1;
+                }
+            }
+        }
+    }
+
+    &.current-thread {
+        background: #E3F2FD;
+
+        .info {
+
+            .message {
+
+                .labels {
+                    background: #E3F2FD;
+                }
+            }
+        }
+    }
+
+    .info {
+        overflow: hidden;
+        width: 0;
+        margin: 0 16px;
+
+        .name {
+            font-size: 15px;
+            font-weight: 500;
+            padding-bottom: 8px;
+
+            .avatar {
+                min-width: 32px;
+                width: 32px;
+                height: 32px;
+                line-height: 32px;
+            }
+
+            .has-attachment {
+                margin-left: 8px;
+                transform: rotate(90deg);
+            }
+        }
+
+        .subject {
+
+        }
+
+        .message {
+            position: relative;
+            color: rgba(0, 0, 0, 0.54);
+
+            .labels {
+                position: absolute;
+                background: #FAFAFA;
+                top: 0;
+                right: 0;
+                padding-left: 6px;
+
+                .label {
+                    display: inline-block;
+                    font-size: 11px;
+                    padding: 0 5px;
+                    margin-right: 6px;
+
+                    &:first-child {
+                        margin-left: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .time {
+        margin: 0 8px 6px 8px;
+    }
+
+    .actions {
+
+        .md-icon-button {
+            margin: 0;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+}

src/app/main/apps/mail/mail-list/mail-list.component.html

@@ -1 +1 @@
-<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail"></fuse-mail-list-item>
+<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail" md-ripple></fuse-mail-list-item>

src/app/main/apps/mail/mail-list/mail-list.component.scss

@@ -0,0 +1,4 @@
+:host{
+    display: flex;
+    flex-direction: column;
+}

src/app/main/apps/mail/mail.component.html

@@ -49,9 +49,13 @@
                 <!-- CONTENT -->
                 <div class="content" perfect-scrollbar>
 
-                    <fuse-mail-list></fuse-mail-list>
+                    <div fxLayout="row" fxFill>
 
-                    <fuse-mail-details></fuse-mail-details>
+                        <fuse-mail-list fxFlex></fuse-mail-list>
+
+                        <fuse-mail-details fxFlex></fuse-mail-details>
+
+                    </div>
 
                 </div>
                 <!-- / CONTENT -->

src/app/main/apps/mail/mail.component.scss

@@ -38,6 +38,16 @@
                 }
             }
         }
+
+        .content-card {
+
+            .toolbar {
+            }
+
+            .content {
+                padding: 0 !important;
+            }
+        }
     }
 }
 

src/app/main/apps/mail/mail.model.ts

@@ -2,7 +2,32 @@ export class MailModel
 {
     id: string;
     subject: string;
-    important: string;
+    from: {
+        name: string,
+        avatar: string,
+        email: string
+    };
+    to: {
+        name: string,
+        email: string
+    }[];
+
+    message: string;
+    time: string;
+    read: boolean;
+    starred: boolean;
+    important: boolean;
+    hasAttachments: boolean;
+    attachments: [
+        {
+            type: string,
+            fileName: string,
+            preview: string,
+            url: string,
+            size: string
+        }
+        ];
+    labels: string[];
 
     constructor()
     {