diff options
| -rw-r--r-- | web-ui/app/js/mail_view/ui/compose_box.js | 20 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/draft_box.js | 20 | ||||
| -rw-r--r-- | web-ui/app/scss/_compose.scss | 20 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/compose_box.hbs | 10 |
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 }} |