[erp5_web_renderjs_ui] Improve rendering of field validation error

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js

-/*global window, rJS, RSVP */
+/*global window, document, rJS, RSVP */
 /*jslint indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP) {
+(function (window, document, rJS, RSVP) {
   "use strict";
 
   var SCOPE = 'field';
@@ -34,7 +34,8 @@
     })
 
     .onStateChange(function (modification_dict) {
-      var gadget = this;
+      var gadget = this,
+        span;
 
       if (gadget.state.hidden) {
         this.element.hidden = true;
@@ -48,10 +49,11 @@
       this.state.label_element.setAttribute('for', gadget.state.scope);
 
       if (modification_dict.hasOwnProperty('error_text')) {
+        this.state.error_element.textContent = "";
         if (this.state.error_text) {
-          this.state.error_element.textContent = " (" + this.state.error_text + ")";
-        } else {
-          this.state.error_element.textContent = "";
+          span = document.createElement('span');
+          span.textContent = this.state.error_text;
+          this.state.error_element.appendChild(span);
         }
       }
 
@@ -127,4 +129,4 @@
       return this.changeState({error_text: ''});
     });
 
-}(window, rJS, RSVP));
\ No newline at end of file
+}(window, document, rJS, RSVP));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>955.29626.47611.24814</string> </value>
+                <value> <string>956.17308.23196.16947</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1479998167.15</float>
+                        <float>1482938684.96</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -306,6 +306,16 @@ select:focus {
   border: 1px solid #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 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -960,8 +970,41 @@ div[data-gadget-scope='header'] .ui-header ul {
     flex: 7;
   }
 }
-.gadget-content form label span {
-  color: red;
+.gadget-content form label {
+  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
@@ -1281,6 +1324,14 @@ div[data-gadget-scope='notification'] button {
     transform: rotate(360deg);
   }
 }
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 /**********************************************
 * Icons
 **********************************************/

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>956.15601.59473.18841</string> </value>
+                <value> <string>956.17306.22052.36932</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1482836317.11</float>
+                        <float>1482939003.57</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -84,6 +84,8 @@
 @focus-border: @border-size @border-type @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;
 @margin-size: 6pt;
@@ -378,6 +380,12 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
     border: @focus-border;
     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 {
 */
 
   /* form validation (assuming label>span is used) */
-  form label span {
-    color: red;
-  }
+  form label {
+    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'] {
     to {transform:rotate(360deg);}
 }
 
+@keyframes fadein {
+    from {opacity:0;}
+    to {opacity:1;}
+}
+
 /**********************************************
 * Icons
 **********************************************/