From 9495c43b4bd4f6ed034accae6983df06821cee50 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 23 Aug 2017 11:55:09 -0400
Subject: [PATCH] (css) Improve attachments area of mail composer

Fixes #4243
---
 UI/Templates/MailerUI/UIxMailEditor.wox       | 35 ++++++++++---------
 .../scss/views/MailerUI.scss                  | 33 +++++++++++++----
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index e1aa96f37..cd3955947 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -241,21 +241,24 @@
       </md-dialog-content>
 
       <!-- ATTACHMENTS -->
-      <md-dialog-actions class="sg-mail-editor-attachments">
-        <div layout="row" layout-align="space-between center" layout-fill="layout-fill">
-          <!-- Attachments -->
-          <md-chips ng-model="editor.uploader.queue"
-                    class="md-flex sg-readonly" readonly="true">
-            <md-chip-template>
-              <span class="sg-chip-progress" ng-show="$chip.isUploading">
-                <span class="md-default-theme md-warn md-bg"
-                      ng-style="{ width: $chip.progress + '%'}"><!-- progress --></span>
-              </span>
-              <a ng-href="{{$chip.inlineUrl}}" target="_new">{{$chip.file.name}}</a>
-              <md-icon ng-class="{ 'md-warn': $chip.isUploading }"
-                       ng-click="editor.removeAttachment($chip, 'fileInput')">close</md-icon>
-            </md-chip-template>
-          </md-chips>
+      <md-dialog-content class="md-actions sg-mail-editor-attachments"
+                         layout="row" layout-align="space-between start">
+        <!-- Attachments -->
+        <md-chips ng-model="editor.uploader.queue"
+                  class="md-flex sg-readonly" readonly="true">
+          <md-chip-template>
+            <span class="sg-chip-progress" ng-show="$chip.isUploading">
+              <span class="md-default-theme md-warn md-bg"
+                    ng-style="{ width: $chip.progress + '%'}"><!-- progress --></span>
+            </span>
+            <a ng-href="{{$chip.inlineUrl}}" target="_new">{{$chip.file.name}}</a>
+            <button class="md-icon-button md-chip-remove"
+                    ng-click="editor.removeAttachment($chip, 'fileInput')">
+              <md-icon ng-class="{ 'md-warn': $chip.isUploading }">close</md-icon>
+            </button>
+          </md-chip-template>
+        </md-chips>
+        <div class="msg-header-buttons">
           <label class="md-button md-icon-button" for="fileInput">
             <md-icon>attach_file</md-icon>
             <!-- <span><var:string label:value="Attach"/></span> -->
@@ -269,7 +272,7 @@
           -->
           <!-- multiple="multiple" -->
         </div>
-      </md-dialog-actions>
+      </md-dialog-content>
     </form>
 
     <sg-ripple class="md-default-theme md-accent md-bg"
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 3ef56f1d2..f28ee7bcf 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -261,10 +261,6 @@ md-sidenav {
       overflow: hidden;
     }
   }
-  md-dialog-content {
-    padding-bottom: 0;
-    padding-top: 0;
-  }
   md-chip-template {
     md-icon[ng-click] {
       cursor: pointer;
@@ -275,9 +271,34 @@ md-sidenav {
 // Message body container of mail composer dialog
 .sg-mail-editor-content {
   margin-bottom: 0;
+  .cke_chrome {
+    border-bottom: 0;
+  }
 }
 
 // Attachments list in bottom actions section of mail composer dialog
-.sg-mail-editor-attachments {
-  margin-top: -$baseline-grid;
+md-dialog .md-actions.sg-mail-editor-attachments {
+  border-top: 1px solid $colorGrayLighter;
+  overflow: auto;
+  max-height: 2 * $pitch; // = 128px (3 rows of chips)
+  md-chip {
+    max-width: 4 * $pitch; // = 256px
+  }
+  a {
+    float: left;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 18px; // leave some space for the delete (x) button
+  }
+  .md-chips md-chip .md-chip-remove {
+    position: absolute;
+    right: 0;
+  }
+  .md-icon-button {
+    // Attachment button (file upload label)
+    // Lower margins to fit the md-actions max height (52px)
+    margin-bottom: $baseline-grid/2;
+    margin-top: $baseline-grid/2;
+  }
 }