From abfb2a6706fc502025c5d7dc9cfc1dcbb79a067c Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 19 Dec 2017 12:21:22 +0300
Subject: [PATCH] Fixed: Mail Compose dialog responsive issues + Added
 Show/Hide CC & BCC fields toggle button

---
 .../dialogs/compose/compose.component.html    | 19 ++++++++++++-------
 .../dialogs/compose/compose.component.scss    | 18 +++++++++++++++++-
 .../mail/dialogs/compose/compose.component.ts |  5 +++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
index 26e46f24..e240d564 100644
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
@@ -28,7 +28,12 @@
                        type="email" required>
             </mat-form-field>
 
-            <mat-form-field>
+            <div class="show-hide-extra-fields" (click)="toggleExtraToFields()">
+                <span [fxShow]="!showExtraToFields">Show CC & BCC</span>
+                <span [fxShow]="showExtraToFields">Hide CC & BCC</span>
+            </div>
+
+            <mat-form-field [fxShow]="showExtraToFields">
                 <input matInput
                        name="cc"
                        placeholder="Cc"
@@ -36,7 +41,7 @@
                        type="email">
             </mat-form-field>
 
-            <mat-form-field>
+            <mat-form-field [fxShow]="showExtraToFields">
                 <input matInput
                        name="bcc"
                        placeholder="Bcc"
@@ -51,11 +56,11 @@
             </mat-form-field>
 
             <mat-form-field>
-            <textarea matInput name="message"
-                      placeholder="Message"
-                      formControlName="message"
-                      rows="6">
-            </textarea>
+                <textarea matInput name="message"
+                          placeholder="Message"
+                          formControlName="message"
+                          rows="6">
+                </textarea>
             </mat-form-field>
 
             <div class="attachment-list">
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
index 87d41f50..ac8305da 100644
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
@@ -1,7 +1,17 @@
+@import "src/app/core/scss/fuse";
+
 .mail-compose-dialog {
+
+    @include media-breakpoint('xs') {
+        width: 100%;
+    }
+
+    @include media-breakpoint-up('sm') {
+        width: 640px;
+    }
+
     .mat-dialog-container {
         padding: 0;
-        width: 720px;
 
         .compose-form {
 
@@ -9,6 +19,12 @@
                 width: 100%;
             }
 
+            .show-hide-extra-fields {
+                text-align: right;
+                cursor: pointer;
+                font-size: 12px;
+            }
+
             .attachment-list {
                 font-size: 13px;
                 padding-top: 16px;
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
index 25b0ed21..465298b8 100644
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
@@ -10,6 +10,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 })
 export class FuseMailComposeDialogComponent implements OnInit
 {
+    showExtraToFields = false;
     composeForm: FormGroup;
 
     constructor(
@@ -39,4 +40,8 @@ export class FuseMailComposeDialogComponent implements OnInit
         });
     }
 
+    toggleExtraToFields()
+    {
+        this.showExtraToFields = !this.showExtraToFields;
+    }
 }