purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Mail App) Compose Dialog added.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-15 11:42:39 +03:00
parent a9e5115558
commit f134e10a27
9 changed files with 245 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/app/main/content/apps/mail/dialogs/compose/compose.component.html Normal file
View File

@ -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>

33
src/app/main/content/apps/mail/dialogs/compose/compose.component.scss Normal file
View File

@ -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;
}
}
}
}
}

42
src/app/main/content/apps/mail/dialogs/compose/compose.component.ts Normal file
View File

@ -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('')
});
}
}

7
src/app/main/content/apps/mail/mail.module.ts
View File

@ -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 = [
{
@ -63,7 +64,8 @@ const routes: Routes = [
MailListComponent,
MailListItemComponent,
MailDetailsComponent,
MainSidenavComponent
MainSidenavComponent,
MailComposeDialogComponent
],
imports : [
SharedModule,
@ -71,7 +73,8 @@ const routes: Routes = [
],
providers : [
MailService
]
],
entryComponents: [MailComposeDialogComponent]
})
export class FuseMailModule
{

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

@ -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>

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

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

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

@ -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();

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

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

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

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