Commit 0c72a608 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Improve rendering of field validation error

parent 4477ebf1
/*global window, rJS, RSVP */ /*global window, document, rJS, RSVP */
/*jslint indent: 2, maxerr: 3 */ /*jslint indent: 2, maxerr: 3 */
(function (window, rJS, RSVP) { (function (window, document, rJS, RSVP) {
"use strict"; "use strict";
var SCOPE = 'field'; var SCOPE = 'field';
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
}) })
.onStateChange(function (modification_dict) { .onStateChange(function (modification_dict) {
var gadget = this; var gadget = this,
span;
if (gadget.state.hidden) { if (gadget.state.hidden) {
this.element.hidden = true; this.element.hidden = true;
...@@ -48,10 +49,11 @@ ...@@ -48,10 +49,11 @@
this.state.label_element.setAttribute('for', gadget.state.scope); this.state.label_element.setAttribute('for', gadget.state.scope);
if (modification_dict.hasOwnProperty('error_text')) { if (modification_dict.hasOwnProperty('error_text')) {
this.state.error_element.textContent = "";
if (this.state.error_text) { if (this.state.error_text) {
this.state.error_element.textContent = " (" + this.state.error_text + ")"; span = document.createElement('span');
} else { span.textContent = this.state.error_text;
this.state.error_element.textContent = ""; this.state.error_element.appendChild(span);
} }
} }
...@@ -127,4 +129,4 @@ ...@@ -127,4 +129,4 @@
return this.changeState({error_text: ''}); return this.changeState({error_text: ''});
}); });
}(window, rJS, RSVP)); }(window, document, rJS, RSVP));
\ No newline at end of file \ No newline at end of file
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>955.29626.47611.24814</string> </value> <value> <string>956.17308.23196.16947</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1479998167.15</float> <float>1482938684.96</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -306,6 +306,16 @@ select:focus { ...@@ -306,6 +306,16 @@ select:focus {
border: 1px solid #3388cc; border: 1px solid #3388cc;
box-shadow: 0 0 12pt #3388cc; box-shadow: 0 0 12pt #3388cc;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid,
textarea:invalid,
select:invalid {
border: 1px solid #FF6600;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid:focus,
textarea:invalid:focus,
select:invalid:focus {
box-shadow: 0 0 12pt #FF6600;
}
select { select {
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -960,8 +970,41 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -960,8 +970,41 @@ div[data-gadget-scope='header'] .ui-header ul {
flex: 7; flex: 7;
} }
} }
.gadget-content form label span { .gadget-content form label {
color: red; position: relative;
}
.gadget-content form label span span {
animation: fadein 0.2s ease-out;
}
@media only screen and (min-width: 90em), only screen and (min-width: 45em) and (max-width: 90em) {
.gadget-content form label span span {
background-color: #FF6600;
color: #f8fff3;
left: 110%;
position: absolute;
bottom: 130%;
white-space: pre;
padding: 6pt;
border-radius: 0.325em;
width: auto;
z-index: 1001;
}
.gadget-content form label span span:before {
position: absolute;
top: 100%;
left: 2em;
display: inline-block;
border-right: 6pt solid transparent;
border-top: 6pt solid #FF6600;
border-left: 6pt solid transparent;
content: '';
}
}
@media only screen and (max-width: 45em) {
.gadget-content form label span span {
margin-left: 6pt;
color: #FF6600;
}
} }
/********************************************** /**********************************************
* Gadget: relation field * Gadget: relation field
...@@ -1281,6 +1324,14 @@ div[data-gadget-scope='notification'] button { ...@@ -1281,6 +1324,14 @@ div[data-gadget-scope='notification'] button {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/********************************************** /**********************************************
* Icons * Icons
**********************************************/ **********************************************/
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>956.15601.59473.18841</string> </value> <value> <string>956.17306.22052.36932</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1482836317.11</float> <float>1482939003.57</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -84,6 +84,8 @@ ...@@ -84,6 +84,8 @@
@focus-border: @border-size @border-type @focus-border-color; @focus-border: @border-size @border-type @focus-border-color;
@focus-box-shadow: 0 0 @double-margin-size @focus-border-color; @focus-box-shadow: 0 0 @double-margin-size @focus-border-color;
@invalid-border: @border-size @border-type @coloraccent;
@invalid-box-shadow: 0 0 @double-margin-size @coloraccent;
@half-margin-size: 3pt; @half-margin-size: 3pt;
@margin-size: 6pt; @margin-size: 6pt;
...@@ -378,6 +380,12 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]) ...@@ -378,6 +380,12 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
border: @focus-border; border: @focus-border;
box-shadow: @focus-box-shadow; box-shadow: @focus-box-shadow;
} }
&:invalid {
border: @invalid-border;
&:focus {
box-shadow: @invalid-box-shadow;
}
}
} }
...@@ -1126,10 +1134,41 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1126,10 +1134,41 @@ div[data-gadget-scope='header'] .ui-header {
*/ */
/* form validation (assuming label>span is used) */ /* form validation (assuming label>span is used) */
form label span { form label {
color: red; position: relative;
}
span span {
animation: fadein @transition-timing;
@media @desktop, @tablet {
background-color: @coloraccent;
color: @colorsubheaderlink;
left: 110%;
position: absolute;
bottom: 130%;
white-space: pre;
padding: @margin-size;
border-radius: @border-radius;
width: auto;
z-index: 1001;
&:before {
position: absolute;
top: 100%;
left: 2em;
display: inline-block;
border-right: @margin-size solid transparent;
border-top: @margin-size solid @coloraccent;
border-left: @margin-size solid transparent;
content: '';
}
}
@media @smartphone {
margin-left: @margin-size;
color: @coloraccent;
}
}
}
} }
/********************************************** /**********************************************
...@@ -1482,6 +1521,11 @@ div[data-gadget-scope='notification'] { ...@@ -1482,6 +1521,11 @@ div[data-gadget-scope='notification'] {
to {transform:rotate(360deg);} to {transform:rotate(360deg);}
} }
@keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
/********************************************** /**********************************************
* Icons * Icons
**********************************************/ **********************************************/
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment