#563 merging from recipients

4 files changed, 38 insertions, 5 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/_compose.scss b/web-ui/app/scss/_compose.scss
index 3368cda1..bd064015 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -30,7 +30,6 @@
   margin: 5px 0 50px 30px;
   padding: 0;
   .input-container {
-    border-bottom: 1px solid #DDD;
     padding: 1px;
   }
   label, span {
@@ -71,6 +70,7 @@
   input#subject, #feedback-subject {
     font-size: 1.6875rem;
     line-height: 1.4;
+    border-top: 1px solid #DDD;
   }
   #feedback-subject {
     color: #333;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 1f3e618e..ffd1a02a 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -284,8 +284,27 @@
     border-color: #999999;
     outline: none; 
   }
-  }
 }
 
+  .collapse {
+    display:block;
+    position: absolute;
+    right: 10px;
+    padding-right: 15px;
+    padding-left: 15px; 
+    font-family: 'FontAwesome';
+    font-weight: bolder;
+    font-size: larger;
+    cursor: pointer;
+  }
+  
+  .collapse + input, .collapse + input + * {
+    display:none;
+  }
+
+  .collapse + input:checked + * {
+    display:block;
+  }
+}
 
 @include tt-hint;
diff --git a/web-ui/app/templates/compose/recipients.hbs b/web-ui/app/templates/compose/recipients.hbs
index 6dbed714..31b51144 100644
--- a/web-ui/app/templates/compose/recipients.hbs
+++ b/web-ui/app/templates/compose/recipients.hbs
@@ -5,10 +5,11 @@
           <label for="recipients-to-box" class="recipients-label column large-1">{{t 'TO'}}: </label>
         </div>
         <div class='recipients-list compose-column-recipients'>
-          <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/>
-        </div>
+          <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/></div>
     </div>
-
+    <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">
         <input class="recipients-navigation-handler"/>
         <div class='compose-column-label'>
@@ -28,4 +29,5 @@
           <input id='recipients-bcc-box' class="recipients-input" type="text" tabindex="3"/>
         </div>
     </div>
+  </div>
 </div>