(fix) massively pimped the email composer

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -7,70 +7,34 @@
 
   <md-dialog flex="80" flex-sm="100">
     <md-toolbar class="md-padding">
-      <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
-
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
-        <md-button ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
-        <md-button ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
-
-        <md-button>
-          <label for="file-input">
-              Add files
-          </label>
+        <!-- FROM -->
+        <sg-avatar-image class="md-tile-left" hide-sm="hide-sm" sg-email="editor.message.editable.from" size="32"><!-- avatar --></sg-avatar-image>
+        <md-input-container flex="flex">
+          <label><var:string label:value="From"/></label>
+          <md-select name="from"
+                         ng-model="editor.message.editable.from">
+            <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
+          </md-select>
+        </md-input-container>
+        <div flex-gt-sm="flex-gt-sm"><!-- spacer --></div>
+        <md-button class="sg-icon-button" ng-click="editor.send()">
+          <md-icon>send</md-icon>
         </md-button>
-        <input id="file-input" type="file"
-               nv-file-select="nv-file-select"
-               multiple="multiple"
-               uploader="editor.uploader"
-               ng-show="false"/>
-
-        <md-menu>
-          <md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
-            <md-icon>more_vert</md-icon>
-          </md-button>
-          <md-menu-content width="4">
-            <md-menu-item>
-              <md-button>
-                <md-checkbox ng-model="editor.message.editable.receipt">
-                  <var:string label:value="Receipt"/>
-                </md-checkbox>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <div layout="row" layout-align="center center">
-                <span>
-                  <var:string label:value="Priority"/>
-                </span>
-                <md-slider flex="flex"
-                           md-discrete="md-discrete"
-                           ng-model="editor.message.editable.priority"
-                           step="1"
-                           min="1"
-                           max="5"
-                           label:aria-label="Priority">
-                </md-slider>
-              </div>
-            </md-menu-item>
-            </md-menu-content>
-        </md-menu>
-
-      </div>
+        <md-button class="sg-icon-button " ng-click="editor.message.$save()">
+          <md-icon>save</md-icon>
+        </md-button>
+        <md-button class="sg-icon-button " ng-click="editor.cancel()">
+          <md-icon>close</md-icon>
+        </md-button>
+        </div>
     </md-toolbar>
 
     <md-dialog-content>
-      <form>
         <header>
-
-          <!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
+          <!-- TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
           <div class="msg-header-content">
-            <md-input-container>
-              <label> <var:string label:value="From"/></label>
-              <md-select name="from"
-                         ng-model="editor.message.editable.from">
-                <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
-              </md-select>
-            </md-input-container>
 
             <div class="pseudo-input-container">
               <label class="pseudo-input-label">
@@ -89,7 +53,8 @@
               </md-chips>
             </div>
 
-            <div class="pseudo-input-container" ng-hide="editor.hideCc">
+            <div class="pseudo-input-container" ng-hide="editor.hideCc"> -->
+            <!-- <div class="pseudo-input-container"> -->
               <label class="pseudo-input-label">
                 <var:string label:value="Cc"/>
               </label>
@@ -129,58 +94,93 @@
               </label>
               <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
             </md-input-container>
-
-            <md-list>
-              <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
-                   MAIL WITH ATTACHMENTS -->
-              <md-list-item ng-repeat="item in editor.message.editable.attachmentAttrs">
-                <div layout="row" layout-align="space-between center">
-                  <span ng-bind="item.filename"><!-- filename --></span>
-                  <md-button class="sg-icon-button"
-                             ng-click="editor.message.$deleteAttachment(item.filename);">
-                    <md-icon>remove_circle_outline</md-icon>
-                  </md-button>
-                </div>
-              </md-list-item>
-              <!-- FILE BEING ATTACHED TO A MAIL -->
-              <md-list-item ng-repeat="item in editor.uploader.queue">
-                <div layout="row" layout-align="space-between center">
-                  <span ng-bind="item.file.name"><!-- filename --></span>
-                  <md-progress-linear md-mode="determinate"
-                                      value="{{item.progress}}"
-                                      ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
-                  <md-button class="sg-icon-button"
-                             ng-click="editor.uploader.cancelItem(item)"
-                             ng-show="item.isUploading">
-                    <md-icon>cancel</md-icon>
-                  </md-button>
-                  <md-button class="sg-icon-button"
-                             ng-click="editor.message.$deleteAttachment(item.file.name); item.remove();"
-                             ng-show="!item.isUploading">
-                    <md-icon>remove_circle_outline</md-icon>
-                  </md-button>
-                </div>
-              </md-list-item>
-            </md-list>
           </div>
 
+          <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
+          <div layout="column" layout-align="start end">
+            <md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
+            <md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
+            <md-menu>
+              <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
+                <md-icon>more_vert</md-icon>
+              </md-button>
+              <md-menu-content width="4">
+                <md-menu-item>
+                  <md-button>
+                    <md-checkbox ng-model="editor.message.editable.receipt">
+                      <var:string label:value="Receipt"/>
+                    </md-checkbox>
+                  </md-button>
+                </md-menu-item>
+                <md-menu-item>
+                  <div layout="row" layout-align="center center">
+                    <span>
+                      <var:string label:value="Priority"/>
+                    </span>
+                    <md-slider flex="flex"
+                               md-discrete="md-discrete"
+                               ng-model="editor.message.editable.priority"
+                               step="1"
+                               min="1"
+                               max="5"
+                               label:aria-label="Priority">
+                    </md-slider>
+                  </div>
+                </md-menu-item>
+              </md-menu-content>
+            </md-menu>
+
+          </div>
         </header>
 
         <!-- MESSAGE CONTENT -->
         <textarea name="content" var:class="editorClass"
                   ck-locale="editor.localeCode"
                   ng-model="editor.message.editable.text"/>
-
-        <!-- TOOLBAR BUTTONS -->
-        <div class="buttonsToolbar">
-          <div layout="row" layout-align="end center">
-            <md-button ng-click="editor.cancel()"><var:string label:value="Cancel"/></md-button>
-            <md-button ng-click="editor.message.$save()"><var:string label:value="Save"/></md-button>
-            <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
-                       ng-click="editor.send()"><var:string label:value="Send"/></md-button>
-          </div>
-        </div>
-      </form>
     </md-dialog-content>
-  </md-dialog>
+
+    <!-- TOOLBAR BUTTONS -->
+    <div class="md-actions">
+      <div layout="row" layout-align="space-between center" layout-fill="layout-fill">
+      <div>
+        <md-button>
+          <md-icon>attach_file</md-icon>
+          <label for="file-input">
+            Attach
+          </label>
+        </md-button>
+        <input id="file-input" type="file"
+               nv-file-select="nv-file-select"
+               multiple="multiple"
+               uploader="editor.uploader"
+               ng-show="false"/>
+      </div>
+      <div>
+        <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
+             MAIL WITH ATTACHMENTS -->
+        <md-chips ng-model="editor.message.editable.attachmentAttrs"
+                  class="sg-readonly" readonly="true">
+          <md-chip-template>
+            <span>{{$chip.filename}}</span>
+              <md-icon ng-click="editor.message.$deleteAttachment($chip.filename);">close</md-icon>
+          </md-chip-template>
+        </md-chips>
+        <!-- FILE BEING ATTACHED TO A MAIL -->
+        <md-chips ng-model="editor.uploader.queue"
+                  class="sg-readonly" readonly="true">
+          <md-chip-template>
+            <span>{{$chip.file.name}}</span>
+            <md-icon ng-show="!$chip.isUploading"
+                     ng-click="editor.message.$deleteAttachment($chip.file.name);
+                               $chip.remove();">close</md-icon>
+            <md-icon ng-show="$chip.isUploading"
+                     ng-click="editor.uploader.cancelItem($chip)"
+                     ng-style="{ 'color': '#F00' }">cancel</md-icon>
+            <span ng-show="$chip.isUploading">{{$chip.progress}} %</span>
+          </md-chip-template>
+        </md-chips>
+      </div>
+      </div>
+    </div>
+</md-dialog>
 </container>