Merge pull request #407 from schaffer/floatlabel_for_compose

Trying to fix issue #384

5 files changed, 48 insertions, 2 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 1b209b23..28f6dc83 100644
--- a/web-ui/app/js/mail_view/ui/compose_box.js
+++ b/web-ui/app/js/mail_view/ui/compose_box.js
@@ -54,6 +54,8 @@ define(
 
       this.renderComposeBox = function() {
         this.render(templates.compose.box, {});
+        this.enableFloatlabel('input.floatlabel');
+        this.enableFloatlabel('textarea.floatlabel');
         this.select('recipientsFields').show();
         this.on(this.select('closeButton'), 'click', this.showNoMessageSelected);
         this.enableAutoSave();
diff --git a/web-ui/app/js/mail_view/ui/draft_box.js b/web-ui/app/js/mail_view/ui/draft_box.js
index adad108f..8c2e15c7 100644
--- a/web-ui/app/js/mail_view/ui/draft_box.js
+++ b/web-ui/app/js/mail_view/ui/draft_box.js
@@ -66,6 +66,8 @@ define(
           body: body
         });
 
+        this.enableFloatlabel('input.floatlabel');
+        this.enableFloatlabel('textarea.floatlabel');
         this.select('recipientsFields').show();
         this.select('bodyBox').focus();
         this.select('tipMsg').hide();
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
index 848fe026..3a7b14b5 100644
--- a/web-ui/app/js/mixins/with_mail_edit_base.js
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -203,6 +203,22 @@ define(
         this.trigger(document, events.ui.userAlerts.displayMessage, { message: 'Your message was sent!' });
       };
 
+      this.enableFloatlabel = function(element) {
+        var showClass = 'showfloatlabel';
+        $(element).bind('checkval', function() {
+          var label = $(this).prev('label');
+          if (this.value !== '') {
+            label.addClass(showClass);
+            $(this).addClass(showClass);
+          } else {
+            label.removeClass(showClass);
+            $(this).removeClass(showClass);
+          }
+        }).on('keyup', function() {
+          $(this).trigger('checkval');
+        }).trigger('checkval');
+      };
+
       this.after('initialize', function () {
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
         this.on(document, events.ui.recipients.updated, this.recipientsUpdated);
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index acff745d..01890797 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -24,6 +24,9 @@
 
 // COMPOSE PANE
 #compose-box, #draft-box, #reply-box {
+  div.floatlabel {
+    position: relative;
+  }
   margin: 5px 0 50px 30px;
   padding: 0;
   .input-container {
@@ -37,9 +40,26 @@
     display: inline-block;
     padding: 10px;
   }
+  label.floatlabel {
+    padding: 0.4rem !important;
+    position: absolute;
+    font-size: 0.6rem;
+    transition: all 0.1s linear;
+    opacity: 0;
+    font-weight: bold;
+  }
+  label.showfloatlabel {
+    color: #64BCD0 !important;
+    top: -0.3rem;
+    opacity: 1;
+  }
   input, textarea {
     margin: 0;
     border: none;
+    transition: all 0.1s linear;
+  }
+  input.showfloatlabel, textarea.showfloatlabel {
+    padding-top: 1rem !important;
   }
   input {
     &#subject {
diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs
index d5501e69..2a1d27b0 100644
--- a/web-ui/app/templates/compose/compose_box.hbs
+++ b/web-ui/app/templates/compose/compose_box.hbs
@@ -1,8 +1,14 @@
 <button class="close-mail-button">
   <i class="fa fa-times"></i>
 </button>
-<input type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}" tabindex="1"/>
-<textarea id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea>
+<div class="floatlabel">
+  <label class="floatlabel" for="subject">Subject</label>
+  <input class="floatlabel" name="subject" type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}" tabindex="1"/>
+</div>
+<div class="floatlabel">
+  <label class="floatlabel" for="body">Body</label>
+  <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea>
+</div>
 
 {{> recipients }}