Implemented floatlabels for input fields when composing email

4 files changed, 68 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..1b17e5a3 100644
--- a/web-ui/app/js/mail_view/ui/compose_box.js
+++ b/web-ui/app/js/mail_view/ui/compose_box.js
@@ -57,6 +57,26 @@ define(
         this.select('recipientsFields').show();
         this.on(this.select('closeButton'), 'click', this.showNoMessageSelected);
         this.enableAutoSave();
+
+        function floatlabelHandler(element) {
+          $(function() {
+            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");
+          });
+        }
+        floatlabelHandler("input.floatlabel");
+        floatlabelHandler("textarea.floatlabel");
       };
 
       this.mailDeleted = function(event, data) {
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..09376b97 100644
--- a/web-ui/app/js/mail_view/ui/draft_box.js
+++ b/web-ui/app/js/mail_view/ui/draft_box.js
@@ -72,6 +72,26 @@ define(
         this.enableAutoSave();
         this.on(this.select('cancelButton'), 'click', this.showNoMessageSelected);
         this.on(this.select('closeMailButton'), 'click', this.showNoMessageSelected);
+
+        function floatlabelHandler(element) {
+          $(function() {
+            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");
+          });
+        }
+        floatlabelHandler("input.floatlabel");
+        floatlabelHandler("textarea.floatlabel");
       };
 
       this.mailDeleted = function(event, data) {
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index acff745d..1faa54dd 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.compose {
+    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..407a025a 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="compose">
+  <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="compose">
+  <label class="floatlabel" for="body">Body</label>
+  <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea>
+</div>
 
 {{> recipients }}