Merge pull request #407 from schaffer/floatlabel_for_compose

Trying to fix issue #384

3 files changed, 20 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..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);