diff options
| -rw-r--r-- | web-ui/app/js/mail_view/ui/compose_box.js | 2 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/draft_box.js | 2 | ||||
| -rw-r--r-- | web-ui/app/js/mixins/with_mail_edit_base.js | 16 | ||||
| -rw-r--r-- | web-ui/app/scss/_compose.scss | 20 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/compose_box.hbs | 10 |
5 files changed, 48 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..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); diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss index acff745d..01890797 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.floatlabel { + 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..2a1d27b0 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="floatlabel"> + <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="floatlabel"> + <label class="floatlabel" for="body">Body</label> + <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea> +</div> {{> recipients }} |