From 5487ddebc2c0fff66450b27b554af525f7ef2cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Sch=C3=A4ffer?= Date: Sun, 7 Jun 2015 18:51:11 -0300 Subject: Implemented floatlabels for input fields when composing email --- web-ui/app/js/mail_view/ui/compose_box.js | 20 ++++++++++++++++++++ web-ui/app/js/mail_view/ui/draft_box.js | 20 ++++++++++++++++++++ web-ui/app/scss/_compose.scss | 20 ++++++++++++++++++++ web-ui/app/templates/compose/compose_box.hbs | 10 ++++++++-- 4 files changed, 68 insertions(+), 2 deletions(-) (limited to 'web-ui/app') 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 @@ - - +
+ + +
+
+ + +
{{> recipients }} -- cgit v1.2.3 From 7f349abe67b8e1a71798478f6c26b08773f2d869 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Sch=C3=A4ffer?= Date: Sun, 7 Jun 2015 19:27:47 -0300 Subject: Fixed quotes in javascript files --- web-ui/app/js/mail_view/ui/compose_box.js | 18 +++++++++--------- web-ui/app/js/mail_view/ui/draft_box.js | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) (limited to 'web-ui/app') 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 1b17e5a3..e8210193 100644 --- a/web-ui/app/js/mail_view/ui/compose_box.js +++ b/web-ui/app/js/mail_view/ui/compose_box.js @@ -60,23 +60,23 @@ define( function floatlabelHandler(element) { $(function() { - var showClass = "showfloatlabel"; - $(element).bind("checkval", function() { - var label = $(this).prev("label"); - if (this.value !== "") { + 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"); + }).on('keyup',function() { + $(this).trigger('checkval'); + }).trigger('checkval'); }); } - floatlabelHandler("input.floatlabel"); - floatlabelHandler("textarea.floatlabel"); + 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 09376b97..da8b3055 100644 --- a/web-ui/app/js/mail_view/ui/draft_box.js +++ b/web-ui/app/js/mail_view/ui/draft_box.js @@ -75,23 +75,23 @@ define( function floatlabelHandler(element) { $(function() { - var showClass = "showfloatlabel"; - $(element).bind("checkval", function() { - var label = $(this).prev("label"); - if (this.value !== "") { + 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"); + }).on('keyup',function() { + $(this).trigger('checkval'); + }).trigger('checkval'); }); } - floatlabelHandler("input.floatlabel"); - floatlabelHandler("textarea.floatlabel"); + floatlabelHandler('input.floatlabel'); + floatlabelHandler('textarea.floatlabel'); }; this.mailDeleted = function(event, data) { -- cgit v1.2.3 From 8d7adde3179d12fc215a899d8f533789a440441b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Sch=C3=A4ffer?= Date: Thu, 25 Jun 2015 11:23:24 -0300 Subject: Renamed css div class 'compose' to 'floatlabel' --- web-ui/app/scss/_compose.scss | 2 +- web-ui/app/templates/compose/compose_box.hbs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'web-ui/app') diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss index 1faa54dd..01890797 100644 --- a/web-ui/app/scss/_compose.scss +++ b/web-ui/app/scss/_compose.scss @@ -24,7 +24,7 @@ // COMPOSE PANE #compose-box, #draft-box, #reply-box { - div.compose { + div.floatlabel { position: relative; } margin: 5px 0 50px 30px; diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs index 407a025a..2a1d27b0 100644 --- a/web-ui/app/templates/compose/compose_box.hbs +++ b/web-ui/app/templates/compose/compose_box.hbs @@ -1,11 +1,11 @@ -
+
-
+
-- cgit v1.2.3 From e07a76471291256094028f0a29e4f278baa83cf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Sch=C3=A4ffer?= Date: Sun, 5 Jul 2015 18:39:17 -0300 Subject: Moved floatlabel function to a mixin --- web-ui/app/js/mail_view/ui/compose_box.js | 22 ++-------------------- web-ui/app/js/mail_view/ui/draft_box.js | 22 ++-------------------- web-ui/app/js/mixins/with_mail_edit_base.js | 16 ++++++++++++++++ 3 files changed, 20 insertions(+), 40 deletions(-) (limited to 'web-ui/app') 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 e8210193..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,29 +54,11 @@ 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(); - - 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 da8b3055..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,32 +66,14 @@ define( body: body }); + this.enableFloatlabel('input.floatlabel'); + this.enableFloatlabel('textarea.floatlabel'); this.select('recipientsFields').show(); this.select('bodyBox').focus(); this.select('tipMsg').hide(); 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/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); -- cgit v1.2.3