+
+
+
+
+
+
+
diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss
new file mode 100644
index 00000000..eaabb60a
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss
@@ -0,0 +1,118 @@
+@import 'src/app/core/scss/fuse';
+
+:host {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow-y: auto;
+ padding: 24px;
+
+ .select-message-text {
+ font-size: 24px;
+ font-weight: 300;
+ }
+
+ .mail-header {
+ padding-bottom: 16px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+ .actions {
+ min-width: 88px;
+ }
+
+ .subject {
+ font-size: 17px;
+ font-weight: 500;
+ }
+
+ .label {
+ font-size: 11px;
+ border-radius: 2px;
+ margin: 4px 4px 4px 0;
+ padding: 3px 8px;
+ background-color: rgba(0, 0, 0, 0.08);
+
+ .label-color {
+ width: 8px;
+ height: 8px;
+ margin-right: 8px;
+ border-radius: 50%;
+ }
+ }
+ }
+
+ .mail-content {
+ padding: 24px 0;
+
+ .to {
+ color: rgba(0, 0, 0, 0.54);
+
+ .to-text {
+ margin-right: 4px;
+ text-transform: lowercase;
+ }
+ }
+
+ .info {
+ padding-bottom: 16px;
+
+ .avatar {
+ margin-right: 16px;
+ background-color: mat-color($accent);
+ }
+
+ .name {
+ margin-right: 8px;
+ font-weight: 500;
+ }
+
+ .toggle-details {
+ user-select: none;
+ text-decoration: underline;
+ padding-top: 16px;
+ cursor: pointer;
+ font-weight: 500;
+ }
+
+ .details {
+ padding-top: 8px;
+
+ .title {
+ font-weight: 500;
+ margin-right: 6px;
+ }
+
+ .detail {
+ color: rgba(0, 0, 0, 0.54);
+ }
+ }
+
+ }
+ }
+
+ .mail-attachments {
+ padding: 24px 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
+
+ .title {
+ margin-bottom: 16px;
+ font-weight: 500;
+ }
+
+ .attachment {
+
+ .preview {
+ width: 100px;
+ margin: 0 16px 8px 0;
+ }
+
+ .link {
+ margin-bottom: 2px;
+ }
+
+ .size {
+ font-size: 11px;
+ }
+ }
+ }
+}
diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
new file mode 100644
index 00000000..f8bbe42e
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { Mail } from '../mail.model';
+import { Observable } from 'rxjs/Observable';
+import { Store } from '@ngrx/store';
+import * as fromStore from '../store';
+import { MailNgrxService } from '../mail.service';
+
+@Component({
+ selector : 'fuse-mail-details',
+ templateUrl : './mail-details.component.html',
+ styleUrls : ['./mail-details.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChanges
+{
+ labels$: Observable
+
+
+
+
+
+
+ {{mail.subject}}
+
+
+
+
+
+
+ {{(labels$ | async) | getById:labelId:'title'}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show Details
+ Hide Details
+
+
+
+ 
+
+
+
+
+ {{mail.from.name[0]}}
+
+
+
+
+
+ {{mail.from.name}}
+
+
+
+
+ to
+ {{mail.to[0].name}}
+
+
+
+
+ From:
+ To:
+ Date:
+
+
+
+ {{mail.from.email}}
+ {{mail.to[0].email}}
+ {{mail.time}}
+
+
+
+
+
+
+
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
new file mode 100644
index 00000000..45676aff
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
@@ -0,0 +1,129 @@
+@import 'src/app/core/scss/fuse';
+
+:host {
+ flex-shrink: 0;
+ position: relative;
+ padding: 16px 24px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+ cursor: pointer;
+
+ &.unread {
+ background: #FFFFFF;
+
+ .info {
+
+ .name {
+ font-weight: 700;
+ }
+
+ .row-2 {
+
+ .subject {
+ font-weight: 700;
+ }
+
+ .labels {
+ background: #FFFFFF;
+ }
+ }
+ }
+ }
+
+ &.selected {
+ background: #FFF8E1;
+
+ .info {
+
+ .row-2 {
+
+ .labels {
+ background: #FFF8E1;
+ }
+ }
+ }
+ }
+
+ &.current-mail {
+ background: #E3F2FD;
+
+ .info {
+
+ .row-2 {
+
+ .labels {
+ background: #E3F2FD;
+ }
+ }
+ }
+ }
+
+ .info {
+ overflow: hidden;
+ width: 0;
+ margin-left: 16px;
+ position: relative;
+
+ .row-1 {
+ margin-bottom: 8px;
+
+ .name {
+ font-size: 15px;
+ font-weight: 500;
+
+ .avatar {
+ min-width: 32px;
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ background-color: mat-color($accent);
+ }
+ }
+
+ .actions {
+ margin-left: 4px;
+
+ .mat-icon-button {
+ width: 32px;
+ height: 32px;
+ line-height: 1;
+ }
+ }
+ }
+
+ .row-2 {
+
+ .subject,
+ .message {
+ width: 100%;
+ }
+
+ .message {
+ position: relative;
+ color: rgba(0, 0, 0, 0.54);
+ }
+
+ .labels {
+ position: absolute;
+ background: #FFFFFF;
+ bottom: 0;
+ right: 0;
+ padding-left: 6px;
+
+ .label {
+ font-size: 11px;
+ border-radius: 2px;
+ margin: 0 4px 0 0;
+ padding: 3px 8px;
+ background-color: rgba(0, 0, 0, 0.08);
+
+ .label-color {
+ width: 8px;
+ height: 8px;
+ margin-right: 8px;
+ border-radius: 50%;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
new file mode 100644
index 00000000..d4a592bc
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Mail } from '../../mail.model';
+import { MailNgrxService } from '../../mail.service';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import * as fromStore from '../../store';
+
+@Component({
+ selector : 'fuse-mail-list-item',
+ templateUrl : './mail-list-item.component.html',
+ styleUrls : ['./mail-list-item.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
+{
+ @Input() mail: Mail;
+ @HostBinding('class.selected') selected: boolean;
+ labels$: Observable
+
+
+
+
+
+
+
+ 
+ attachment
+
+
+ {{mail.from?.name[0]}}
+ {{mail.from?.name}}
+
+
+
+ {{mail.time}}
+
+
+
+
+
+
+
+ {{mail.subject}}
+
+
+
+
+
+
+
+
+
+
+ {{(labels$ | async) | getById:labelId:'title'}}
+
+
+
+
+
+
+
+
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.scss b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.scss
new file mode 100644
index 00000000..440b75aa
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.scss
@@ -0,0 +1,21 @@
+:host {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow-y: auto;
+ padding: 0;
+ border-right: 1px solid rgba(0, 0, 0, .12);
+
+ .no-messages-text {
+ font-size: 24px;
+ font-weight: 300;
+ }
+
+ .mail-list {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+}
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
new file mode 100644
index 00000000..a4baa16e
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Mail } from '../mail.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MailNgrxService } from '../mail.service';
+
+@Component({
+ selector : 'fuse-mail-list',
+ templateUrl : './mail-list.component.html',
+ styleUrls : ['./mail-list.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseMailNgrxListComponent implements OnInit, OnDestroy
+{
+ @Input() mails: Mail[];
+ currentMail: Mail;
+
+ constructor(
+ private route: ActivatedRoute,
+ private mailService: MailNgrxService,
+ private router: Router
+ )
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+ /**
+ * Read mail
+ * @param mailId
+ */
+ readMail(mailId)
+ {
+ const labelHandle = this.route.snapshot.params.labelHandle,
+ filterHandle = this.route.snapshot.params.filterHandle,
+ folderHandle = this.route.snapshot.params.folderHandle;
+
+ if ( labelHandle )
+ {
+ this.router.navigate(['apps/mail-ngrx/label/' + labelHandle + '/' + mailId]);
+ }
+ else if ( filterHandle )
+ {
+ this.router.navigate(['apps/mail-ngrx/filter/' + filterHandle + '/' + mailId]);
+ }
+ else
+ {
+ this.router.navigate(['apps/mail-ngrx/' + folderHandle + '/' + mailId]);
+ }
+ }
+
+ ngOnDestroy()
+ {
+ }
+}
diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.html b/src/app/main/content/apps/mail-ngrx/mail.component.html
new file mode 100644
index 00000000..94c74e97
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.scss b/src/app/main/content/apps/mail-ngrx/mail.component.scss
new file mode 100644
index 00000000..9a355577
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.scss
@@ -0,0 +1,81 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+ width: 100%;
+
+ .center {
+
+ .header {
+
+ .search-wrapper {
+ @include mat-elevation(7);
+
+ .sidenav-toggle {
+ margin: 0;
+ width: 56px;
+ height: 56px;
+ background: #FFF;
+ border-radius: 0;
+ border-right: 1px solid rgba(0, 0, 0, .12);
+ }
+
+ .search {
+ width: 100%;
+ height: 56px;
+ line-height: 56px;
+ padding: 18px;
+
+ input {
+ height: 56px;
+ padding-left: 16px;
+ color: rgba(0, 0, 0, 0.54);
+ border: none;
+ outline: none;
+ }
+ }
+ }
+ }
+
+ .content-card {
+
+ @include media-breakpoint(xs) {
+
+ fuse-mail-list {
+ border-right: none;
+ }
+
+ fuse-mail-list,
+ fuse-mail-details {
+ flex: 1 0 100%;
+ }
+
+ fuse-mail-details {
+ display: none !important;
+ }
+
+ &.current-mail-selected {
+
+ .toolbar {
+ padding-left: 16px !important;
+
+ .mail-selection {
+ display: none !important;
+ }
+ }
+
+ .content {
+
+ fuse-mail-list {
+ display: none !important;
+ }
+
+ fuse-mail-details {
+ display: flex !important;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.ts b/src/app/main/content/apps/mail-ngrx/mail.component.ts
new file mode 100644
index 00000000..4238af45
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.ts
@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { MailNgrxService } from './mail.service';
+import { FormControl } from '@angular/forms';
+import { Mail } from './mail.model';
+import { FuseTranslationLoaderService } from '../../../../core/services/translation-loader.service';
+import { locale as english } from './i18n/en';
+import { locale as turkish } from './i18n/tr';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import * as fromStore from './store';
+
+@Component({
+ selector : 'fuse-mail',
+ templateUrl : './mail.component.html',
+ styleUrls : ['./mail.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseMailNgrxComponent implements OnInit, OnDestroy
+{
+ hasSelectedMails: boolean;
+ isIndeterminate: boolean;
+ searchInput: FormControl;
+ mails$: Observable
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ mail
+ Mailbox Ngrx
+
+
+
+
+
+
+ {{account.value}}
+
+
+
+
+
+John Doe
+
+
+
+
diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss
new file mode 100644
index 00000000..633e6083
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss
@@ -0,0 +1,30 @@
+:host {
+ display: flex;
+ flex: 1 0 auto;
+ flex-direction: column;
+ height: 100%;
+
+ .header {
+
+ .logo {
+
+ .logo-icon {
+ margin: 0 16px 0 0;
+ }
+
+ .logo-text {
+ font-size: 24px;
+ line-height: 24px;
+ }
+ }
+
+ .account {
+ width: 100%;
+ }
+ }
+ .content {
+
+ .compose-dialog-button {
+ }
+ }
+}
diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts
new file mode 100644
index 00000000..b261d20a
--- /dev/null
+++ b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts
@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { FuseMailNgrxComposeDialogComponent } from '../../dialogs/compose/compose.component';
+import { MatDialog } from '@angular/material';
+import { FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs/Observable';
+import { Store } from '@ngrx/store';
+import * as fromStore from './../../store';
+import { MailNgrxService } from '../../mail.service';
+
+@Component({
+ selector : 'fuse-mail-main-sidenav',
+ templateUrl : './main-sidenav.component.html',
+ styleUrls : ['./main-sidenav.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseMailNgrxMainSidenavComponent implements OnInit, OnDestroy
+{
+ labels: any[];
+ accounts: object;
+ selectedAccount: string;
+ dialogRef: any;
+
+ folders$: Observable
+
+
+
+
+
+