summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
authorLeonardo Schäffer <leonardo.schaffer@gmail.com>2015-06-07 18:51:11 -0300
committerLeonardo Schäffer <leonardo.schaffer@gmail.com>2015-06-07 18:51:11 -0300
commit5487ddebc2c0fff66450b27b554af525f7ef2cc8 (patch)
treefd0d63572a75c44cae3d138b1bf6a755351151b9 /web-ui
parent4981e7ad505cd1cea767e7d12fcf9c6521994f86 (diff)
Implemented floatlabels for input fields when composing email
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/js/mail_view/ui/compose_box.js20
-rw-r--r--web-ui/app/js/mail_view/ui/draft_box.js20
-rw-r--r--web-ui/app/scss/_compose.scss20
-rw-r--r--web-ui/app/templates/compose/compose_box.hbs10
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 }}