Implemented floatlabels for input fields when composing email

2 files changed, 40 insertions, 0 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) {