diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index 229e6798..89fe0093 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -18,7 +18,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; right: 0; left: 0; height: $header-height; - background-color: mat-color($mat-blue, 500); + background-color: mat-color($accent); } // Carded layout @@ -254,4 +254,4 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; } } } -} \ No newline at end of file +} diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.html b/src/app/main/apps/mail/mail-details/mail-details.component.html index f307a74e..e16aea85 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/apps/mail/mail-details/mail-details.component.html @@ -1,3 +1,140 @@ -

- mail-details works! -

+
+ +
+ +
+
{{mail.subject}}
+ +
+
+ {{labelId}} +
+
+
+ +
+ + + +
+
+ +
+ +
+ +
+ +
+ +
+ {{mail.from.name}} + +
+ {{mail.from.name[0]}} +
+
+ +
+ +
+ {{mail.from.name}} +
+ +
+
to
+
{{mail.to[0].name}}
+
+
+
+ + + Show Details + + + + Hide Details + + +
+ +
+ From: + To: + Date: +
+ +
+ {{mail.from.email}} + {{mail.to[0].email}} + {{mail.time}} +
+
+
+ + + + + + + + + + +
+ +
+ +
+ +
+ +
+ Attachments ({{mail.attachments.length}}) +
+ +
+ +
+ + + +
+ View + Download +
({{attachment.size}})
+
+ +
+
+
+
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss index e69de29b..f2dd5be5 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.scss +++ b/src/app/main/apps/mail/mail-details/mail-details.component.scss @@ -0,0 +1,106 @@ +@import 'src/app/core/scss/fuse'; + +:host { + background: #FFFFFF; + padding: 24px; + + .mail-header { + padding-bottom: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .actions { + min-width: 88px; + + .mat-icon-button { + padding: 0; + width: 32px; + height: 32px; + } + } + + .subject { + font-size: 17px; + font-weight: 500; + } + + .label { + display: inline-block; + font-size: 11px; + padding: 0 5px; + margin: 8px 6px 0 0; + } + } + + .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 { + 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/apps/mail/mail-details/mail-details.component.ts b/src/app/main/apps/mail/mail-details/mail-details.component.ts index 565ef103..856c72f8 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.ts +++ b/src/app/main/apps/mail/mail-details/mail-details.component.ts @@ -1,15 +1,23 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; +import {MailModel} from '../mail.model'; @Component({ - selector: 'fuse-mail-details', - templateUrl: './mail-details.component.html', - styleUrls: ['./mail-details.component.scss'] + selector : 'fuse-mail-details', + templateUrl: './mail-details.component.html', + styleUrls : ['./mail-details.component.scss'] }) -export class MailDetailsComponent implements OnInit { +export class MailDetailsComponent implements OnInit +{ + @Input('selectedMail') public mail: MailModel; + showDetails: boolean; - constructor() { } + constructor() + { + this.showDetails = false; + } - ngOnInit() { - } + ngOnInit() + { + } } diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html index 302e06d6..0513b70b 100644 --- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html +++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html @@ -6,20 +6,20 @@
- {{mail.from.name}} + {{mail.from?.name}} -
{{mail.from.name[0]}}
+
{{mail.from?.name[0]}}
- {{mail.from.name}} + {{mail.from?.name}} - attachment + attachment
{{mail.subject}}
-
+
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}} diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss index 0a38e9d1..65af7638 100644 --- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss +++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss @@ -1,4 +1,7 @@ +@import 'src/app/core/scss/fuse'; + :host { + flex-shrink: 0; background: #FAFAFA; position: relative; padding: 16px 24px; @@ -38,7 +41,7 @@ } } - &.current-thread { + &.selected-mail { background: #E3F2FD; .info { @@ -67,11 +70,7 @@ width: 32px; height: 32px; line-height: 32px; - } - - .has-attachment { - margin-left: 8px; - transform: rotate(90deg); + background-color: mat-color($accent); } } diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts index afa90659..6298e808 100644 --- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts +++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts @@ -16,7 +16,6 @@ export class MailListItemComponent implements OnInit ngOnInit() { - console.log('mail list item inited'); } } diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html index 61b9fcf8..bf618a11 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail/mail-list/mail-list.component.html @@ -1 +1,3 @@ - + + diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.scss b/src/app/main/apps/mail/mail-list/mail-list.component.scss index 1d446fec..55b3da30 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.scss +++ b/src/app/main/apps/mail/mail-list/mail-list.component.scss @@ -1,4 +1,8 @@ :host{ display: flex; flex-direction: column; + background: #FAFAFA; + position: relative; + padding: 0; + border-right: 1px solid rgba(0,0,0,.12); } diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.ts b/src/app/main/apps/mail/mail-list/mail-list.component.ts index 12d7eb4f..76d0bcfa 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.ts +++ b/src/app/main/apps/mail/mail-list/mail-list.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit } from '@angular/core'; -import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database'; +import {MailModel} from '../mail.model'; @Component({ selector : 'fuse-mail-list', @@ -10,14 +11,16 @@ export class MailListComponent implements OnInit { mailsDB: FirebaseListObservable; mails: any; + @Input('selectedMail') public selectedMail: MailModel; + @Output() onMailSelect = new EventEmitter(); constructor(private db: AngularFireDatabase) { this.mailsDB = this.db.list('/mail/data', { - query: { - orderByChild: 'important', - equalTo : true - } + // query: { + // orderByChild: 'important', + // equalTo : true + // } }); } @@ -49,6 +52,13 @@ export class MailListComponent implements OnInit console.log(this.mails); } + selectMail(mail) + { + console.info('mail selected', mail); + this.selectedMail = mail; + this.onMailSelect.emit(mail); + } + onGet() { this.mails.subscribe((response) => diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html index 1730c4b2..978f60b3 100644 --- a/src/app/main/apps/mail/mail.component.html +++ b/src/app/main/apps/mail/mail.component.html @@ -51,9 +51,9 @@
- + - +
diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts index 663e2134..f981f5d5 100644 --- a/src/app/main/apps/mail/mail.component.ts +++ b/src/app/main/apps/mail/mail.component.ts @@ -1,6 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; -import { ActivatedRoute, Data } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database'; +import {ActivatedRoute, Data} from '@angular/router'; +import {MailModel} from './mail.model'; @Component({ selector : 'fuse-mail', @@ -10,6 +11,7 @@ import { ActivatedRoute, Data } from '@angular/router'; export class MailComponent implements OnInit { mails: FirebaseListObservable; + selectedMail: MailModel; constructor(private db: AngularFireDatabase, private route: ActivatedRoute) { @@ -33,4 +35,10 @@ export class MailComponent implements OnInit console.warn(data['mails']); }); } + + onMailSelect(mail) + { + console.info('on mail select', mail); + this.selectedMail = mail; + } } diff --git a/src/app/main/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts index 7bcf7643..4cec6de2 100644 --- a/src/app/main/apps/mail/mail.model.ts +++ b/src/app/main/apps/mail/mail.model.ts @@ -11,7 +11,6 @@ export class MailModel name: string, email: string }[]; - message: string; time: string; read: boolean;