From c09e76f2d1c0bf84635ca072d7d1a5127e713c34 Mon Sep 17 00:00:00 2001
From: Ludovic Marcotte <lmarcotte@inverse.ca>
Date: Mon, 4 May 2015 16:39:45 -0400
Subject: [PATCH] (feat) handle show cc/bcc/attachments in mail composition

---
 UI/Templates/MailerUI/UIxMailEditor.wox | 213 +++++++++++++-----------
 UI/WebServerResources/js/MailerUI.js    |  14 ++
 2 files changed, 131 insertions(+), 96 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index f30bb8ddd..d545e3ce6 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -8,106 +8,127 @@
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
   <div id="messageEditor">
 <md-content class="md-padding bg-sogoPaper-50">
-    <form>
-      <div class="pseudo-input-container">
-        <label class="pseudo-input-label">
-          <var:string label:value="From"/>
-        </label>
-        <!--<div class="pseudo-input-field">-->
+  <form>
+    <header>
+
+      <!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
+      <div class="msg-header-content">
+        <div class="pseudo-input-container">
+          <label class="pseudo-input-label">
+            <var:string label:value="From"/>
+          </label>
+          <!--<div class="pseudo-input-field">-->
           <md-select name="from"
-                  ng-model="message.editable.from">
-                  <md-option ng-value="identity" ng-repeat="identity in identities">{{identity}}</md-option>
+                     ng-model="message.editable.from">
+            <md-option ng-value="identity" ng-repeat="identity in identities">{{identity}}</md-option>
           </md-select>
-        <!--</div>-->
-
-      </div>
-
-      <div class="pseudo-input-container">
-        <label class="pseudo-input-label">
-          <var:string label:value="To"/>
-        </label>
-        <md-chips ng-model="message.editable.to">
-          <md-autocomplete
-              md-selected-item="autocomplete.to.selected"
-              md-search-text="autocomplete.to.searchText"
-              md-items="user in userFilter(autocomplete.to.searchText)"
-              label:placeholder="Add a recipient">
-            <span md-highlight-text="autocomplete.to.searchText">{{user}}</span>
-          </md-autocomplete>
-        </md-chips>
-      </div>
-
-      <div class="pseudo-input-container">
-        <label class="pseudo-input-label">
-          <var:string label:value="Cc"/>
-        </label>
-        <md-chips ng-model="message.editable.cc">
-          <md-autocomplete
-              md-selected-item="autocomplete.cc.selected"
-              md-search-text="autocomplete.cc.searchText"
-              md-items="user in userFilter(autocomplete.cc.searchText)"
-              label:placeholder="Add a recipient">
-            <span md-highlight-text="autocomplete.cc.searchText">{{user}}</span>
-          </md-autocomplete>
-        </md-chips>
-      </div>
-
-      <div class="pseudo-input-container">
-        <label class="pseudo-input-label">
-          <var:string label:value="Bcc"/>
-        </label>
-        <md-chips ng-model="message.editable.bcc">
-          <md-autocomplete
-              md-selected-item="autocomplete.bcc.selected"
-              md-search-text="autocomplete.bcc.searchText"
-              md-items="user in userFilter(autocomplete.bcc.searchText)"
-              label:placeholder="Add a recipient">
-            <span md-highlight-text="autocomplete.bcc.searchText">{{user}}</span>
-          </md-autocomplete>
-        </md-chips>
-      </div>
-
-      <md-input-container>
-        <label>
-          <var:string label:value="Subject"/>
-        </label>
-        <input type="text" name="subject" ng-model="message.editable.subject"/>
-      </md-input-container>
-
-      <div class="pseudo-input-container">
-        <label class="pseudo-input-label">
-          <var:string label:value="Attachments"/>
-        </label>
-        <div class="pseudoInput-text">
-          <input type="file"
-                 nv-file-select="nv-file-select"
-                 uploader="uploader"/>
+          <!--</div>-->    
+        </div>      
+        
+        <div class="pseudo-input-container">
+          <label class="pseudo-input-label">
+            <var:string label:value="To"/>
+          </label>
+          <md-chips ng-model="message.editable.to">
+            <md-autocomplete
+                md-selected-item="autocomplete.to.selected"
+                md-search-text="autocomplete.to.searchText"
+                md-items="user in userFilter(autocomplete.to.searchText)"
+                label:placeholder="Add a recipient">
+              <span md-highlight-text="autocomplete.to.searchText">{{user}}</span>
+            </md-autocomplete>
+          </md-chips>
         </div>
-      </div>
-
-      <ul>
-        <li ng-repeat="item in message.editable.attachmentAttrs">
-          <span ng-bind="item.filename"><!-- filename --></span>
-        </li>
-        <li ng-repeat="item in uploader.queue">
-          <span ng-bind="item.file.name"><!-- filename --></span>
-          (<span ng-bind="item.file.progress"><!-- progress --></span>)
-        </li>
-      </ul>
-      <textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
-      <div class="buttonsToolbar">
-        <div layout="row" layout-align="end center">
-          <md-button ng-click="cancel()"><var:string label:value="Cancel"/></md-button>
-          <md-button ng-click="message.$save()">
-            <var:string label:value="Save"/>
-          </md-button>
-          <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
-                     ng-click="send(message)">
-            <var:string label:value="Send"/>
-          </md-button>
+        
+        <div class="pseudo-input-container" ng-hide="hideCc">
+          <label class="pseudo-input-label">
+            <var:string label:value="Cc"/>
+          </label>
+          <md-chips ng-model="message.editable.cc">
+            <md-autocomplete
+                md-selected-item="autocomplete.cc.selected"
+                md-search-text="autocomplete.cc.searchText"
+                md-items="user in userFilter(autocomplete.cc.searchText)"
+                label:placeholder="Add a recipient">
+              <span md-highlight-text="autocomplete.cc.searchText">{{user}}</span>
+            </md-autocomplete>
+          </md-chips>
         </div>
+        
+        <div class="pseudo-input-container" ng-hide="hideBcc">
+          <label class="pseudo-input-label">
+            <var:string label:value="Bcc"/>
+          </label>
+          <md-chips ng-model="message.editable.bcc">
+            <md-autocomplete
+                md-selected-item="autocomplete.bcc.selected"
+                md-search-text="autocomplete.bcc.searchText"
+                md-items="user in userFilter(autocomplete.bcc.searchText)"
+                label:placeholder="Add a recipient">
+              <span md-highlight-text="autocomplete.bcc.searchText">{{user}}</span>
+            </md-autocomplete>
+          </md-chips>
+        </div>
+        
+        <md-input-container>
+          <label>
+            <var:string label:value="Subject"/>
+          </label>
+          <input type="text" name="subject" ng-model="message.editable.subject"/>
+        </md-input-container>
+        
+        <div class="pseudo-input-container" ng-hide="hideAttachments">
+          <label class="pseudo-input-label">
+            <var:string label:value="Attachments"/>
+          </label>
+          <div class="pseudoInput-text">
+            <input type="file"
+                   nv-file-select="nv-file-select"
+                   uploader="uploader"/>
+          </div>
+          
+          <md-list>
+            <md-list-item ng-repeat="item in message.editable.attachmentAttrs">
+              <span ng-bind="item.filename"><!-- filename --></span>
+            </md-list-item>
+            <md-list-item ng-repeat="item in uploader.queue">
+              <span ng-bind="item.file.name"><!-- filename --></span>
+              (<span ng-bind="item.file.progress"><!-- progress --></span>)
+            </md-list-item>
+          </md-list>
+        </div>
+        
+      </div>
+      
+      <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
+      <div layout="column" layout-align="start end">
+        <md-button  class="iconButton" ng-show="hideCc" ng-click="hideCc = false">Cc</md-button>
+        <md-button  class="iconButton" ng-show="hideBcc" ng-click="hideBcc = false">Bcc</md-button>
+        <md-button  class="iconButton" ng-show="hideAttachments" ng-click="hideAttachments = false">
+          <i class="md-icon-attach-file"><!-- delete tag --></i>
+        </md-button>
+      </div>
+      
+    </header>
+    
+    <!-- MESSAGE CONTENT -->
+    <textarea name="content" var:class="editorClass"
+              ng-model="message.editable.text"/>
+    
+    <!-- TOOLBAR BUTTONS -->
+    <div class="buttonsToolbar">
+      <div layout="row" layout-align="end center">
+        <md-button ng-click="cancel()"><var:string label:value="Cancel"/></md-button>
+        <md-button ng-click="message.$save()">
+          <var:string label:value="Save"/>
+        </md-button>
+        <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
+                   ng-click="send(message)">
+          <var:string label:value="Send"/>
+          </md-button>
       </div>
-    </form>
-</md-content>
     </div>
+  </form>
+</md-content>
+</div>
 </container>
diff --git a/UI/WebServerResources/js/MailerUI.js b/UI/WebServerResources/js/MailerUI.js
index 54aa9995d..b65a29564 100644
--- a/UI/WebServerResources/js/MailerUI.js
+++ b/UI/WebServerResources/js/MailerUI.js
@@ -260,19 +260,33 @@
 
     .controller('MessageEditorCtrl', ['$scope', '$rootScope', '$stateParams', '$state', '$q', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'sgDialog', 'sgAccount', 'sgMailbox', 'sgAddressBook', function($scope, $rootScope, $stateParams, $state, $q, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook) {
       $scope.autocomplete = {to: {}, cc: {}, bcc: {}};
+      $scope.hideCc = true;
+      $scope.hideBcc = true;
+      $scope.hideAttachments = true;
       if ($stateParams.actionName == 'reply') {
         stateMessage.$reply().then(function(msgObject) {
+                  console.debug("foo");
+
           $scope.message = msgObject;
+          $scope.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
+          $scope.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
+          $scope.hideAttachments = true;
         });
       }
       else if ($stateParams.actionName == 'replyall') {
         stateMessage.$replyAll().then(function(msgObject) {
           $scope.message = msgObject;
+          $scope.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
+          $scope.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
+          $scope.hideAttachments = true;
         });
       }
       else if ($stateParams.actionName == 'forward') {
         stateMessage.$forward().then(function(msgObject) {
           $scope.message = msgObject;
+          $scope.hideCc = true;
+          $scope.hideBcc = true;
+          $scope.hideAttachments = (!msgObject.editable.attachmentAttrs || msgObject.editable.attachmentAttrs.length == 0);
         });
       }
       else if (angular.isDefined(stateMessage)) {