#563 - Adding arrows up and down to indicate the state of the cc and bcc fields

3 files changed, 22 insertions, 6 deletions

diff --git a/web-ui/app/js/mail_view/ui/compose_box.js b/web-ui/app/js/mail_view/ui/compose_box.js
index 48a7c23f..993cf880 100644
--- a/web-ui/app/js/mail_view/ui/compose_box.js
+++ b/web-ui/app/js/mail_view/ui/compose_box.js
@@ -73,12 +73,24 @@ define(
         this.trigger(events.dispatchers.rightPane.openNoMessageSelected);
       };
 
+      this.toggleRecipientsArrows = function () {
+        if ($('#cc-bcc-collapse').hasClass('fa-angle-down')) {
+          $('#cc-bcc-collapse').removeClass('fa-angle-down');
+          $('#cc-bcc-collapse').addClass('fa-angle-up');
+        } else {
+          $('#cc-bcc-collapse').removeClass('fa-angle-up');
+          $('#cc-bcc-collapse').addClass('fa-angle-down');
+        }
+      };
+
+
       this.after('initialize', function () {
         this.renderComposeBox();
 
         this.select('toBox').focus();
         this.on(document, events.mail.deleted, this.mailDeleted);
         this.on(document, events.mail.sent, this.showNoMessageSelected);
+        this.on($('#cc-bcc-collapse'), 'click', this.toggleRecipientsArrows);
       });
     }
   }
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index f3d99499..ffd1a02a 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -284,21 +284,25 @@
     border-color: #999999;
     outline: none; 
   }
-  
-  }
+}
 
   .collapse {
     display:block;
     position: absolute;
-    right: 0;
+    right: 10px;
+    padding-right: 15px;
+    padding-left: 15px; 
+    font-family: 'FontAwesome';
+    font-weight: bolder;
+    font-size: larger;
     cursor: pointer;
   }
   
-  .collapse + input, .collapse + input + *{
+  .collapse + input, .collapse + input + * {
     display:none;
   }
 
-  .collapse+ input:checked + *{
+  .collapse + input:checked + * {
     display:block;
   }
 }
diff --git a/web-ui/app/templates/compose/recipients.hbs b/web-ui/app/templates/compose/recipients.hbs
index 00de3663..31b51144 100644
--- a/web-ui/app/templates/compose/recipients.hbs
+++ b/web-ui/app/templates/compose/recipients.hbs
@@ -7,7 +7,7 @@
         <div class='recipients-list compose-column-recipients'>
           <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/></div>
     </div>
-    <label class="collapse" for="hide-and-show">CC + BCC</label>
+    <label id="cc-bcc-collapse" class="collapse fa-angle-down" for="hide-and-show"></label>
     <input id="hide-and-show" type="checkbox">
     <div id="cc-and-bcc">
     <div id="recipients-cc-area" class="recipients-area input-container columns large-12 no-padding">