#563 - Adding hide/show logic and link. Hiding cc and bcc by default

2 files changed, 21 insertions, 4 deletions

diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 1f3e618e..f3d99499 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -284,8 +284,23 @@
     border-color: #999999;
     outline: none; 
   }
+  
   }
-}
 
+  .collapse {
+    display:block;
+    position: absolute;
+    right: 0;
+    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..87319730 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 class="collapse" for="hide-and-show">cc - bcc</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>