[renderjs_ui] Add CSS classes (form field attribute) support to renderjs label and formbox

bt5/erp5_hal_json_style/SkinTemplateItem/portal_skins/erp5_hal_json_style/ERP5Document_getHateoas.py

@@ -463,6 +463,7 @@ def renderField(traversed_document, field, form_relative_url, value=None, meta_t
       'type': meta_type,
       'title': Base_translateString(field.get_value("title")),
       'key': key,
+      "css_class": field.get_value("css_class"),
       "editable": field.get_value("editable"),
       '_embedded': {
         '_view': {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_field_formbox_js.js

@@ -32,8 +32,9 @@
           title: field_json.title,
           hidden: field_json.hidden,
           view: field_json.view,
+          css_class: field_json.css_class,
           // field_json._embedded is HATEOASed subobj specs included in FormBox
-          erp5_form: field_json._embedded
+          erp5_embedded_document: field_json._embedded
         };
 
       // prefer editability from the global context (form)
@@ -61,11 +62,11 @@
 
     .onStateChange(function (modification_dict) {
       var gadget = this,
-        erp5_document_uri = new URI(gadget.state.erp5_form._view._links.traversed_document.href),
+        erp5_document_uri = new URI(gadget.state.erp5_embedded_document._view._links.traversed_document.href),
         form_options = {
           erp5_document: {
-            _embedded: gadget.state.erp5_form
-            },
+            _embedded: gadget.state.erp5_embedded_document
+          },
           key: gadget.state.name,
           view: gadget.state.view,
           jio_key: erp5_document_uri.segment(2),
@@ -73,7 +74,12 @@
         };
 
       // do not preserve objects in the state
-      delete gadget.state.erp5_form;
+      delete gadget.state.erp5_embedded_document;
+
+      // pass CSS class to the DIV element
+      if (modification_dict.hasOwnProperty('css_class')) {
+        gadget.element.classList.add(modification_dict.css_class);
+      }
 
       return gadget.getDeclaredGadget('sub')
         .push(function (subgadget) {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js

 /*global window, document, rJS, RSVP */
 /*jslint indent: 2, maxerr: 3 */
+/**
+ * Label gadget takes care of displaying validation errors and label.
+ *
+ * Every form field is wrapped in that widget which has some consequences:
+ *
+ * -  CSS classes sharing: label copy CSS classes of embedded field for itself
+ *    because CSS selectors are not good in selectin up the DOM tree
+ *    -  class "invisible" despite its name is supposed to hide only label
+ *    -  class "horizontal_align_form_box" will prevent any label to show as well
+ *
+ */
 (function (window, document, rJS, RSVP) {
   "use strict";
 
@@ -9,8 +20,10 @@
     .setState({
       label_text: '',
       error_text: '',
-      label: true
+      label: true,
+      css_class: ''
     })
+
     .ready(function () {
       return this.changeState({
         label_element: this.element.querySelector('label'),
@@ -28,7 +41,8 @@
         error_text: options.field_json.error_text || '',
         options: options,
         scope: options.field_json.key,
-        hidden: options.field_json.hidden
+        hidden: options.field_json.hidden,
+        css_class: options.field_json.css_class
       };
       return this.changeState(state_dict);
     })
@@ -48,6 +62,10 @@
       }
       this.state.label_element.setAttribute('for', gadget.state.scope);
 
+      if (modification_dict.hasOwnProperty('css_class') && this.state.css_class) {
+        this.state.label_element.classList.add(this.state.css_class);
+      }
+
       if (modification_dict.hasOwnProperty('error_text')) {
         this.state.error_element.textContent = "";
         if (this.state.error_text) {

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>956.17308.23196.16947</string> </value>
+                <value> <string>961.17833.11141.14523</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1482938684.96</float>
+                        <float>1502198959.61</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -974,6 +974,9 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content .ui-field-contain div {
   width: 100%;
 }
+.gadget-content .horizontal_align_form_box .ui-field-contain > div {
+  display: block-inline;
+}
 .gadget-content .ui-content-header-plain {
   font-size: 150%;
 }
@@ -1048,6 +1051,9 @@ div[data-gadget-scope='header'] .ui-header ul {
     flex: 1;
     color: #777777;
   }
+  .gadget-content .ui-field-contain > label.invisible {
+    display: none;
+  }
   .gadget-content .ui-field-contain > label + div {
     flex: 3;
   }

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>961.19028.47293.9045</string> </value>
+                <value> <string>961.17799.14348.6348</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1502271576.03</float>
+                        <float>1502199260.7</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -1117,6 +1117,10 @@ div[data-gadget-scope='header'] .ui-header {
     }
   }
 
+  .horizontal_align_form_box .ui-field-contain > div {
+    display: block-inline;
+  }
+
   .ui-content-header-plain {
     font-size: 150%;
   }
@@ -1206,6 +1210,9 @@ div[data-gadget-scope='header'] .ui-header {
       & > label {
         flex: 1;
         color: @grey;
+        &.invisible {
+          display: none;
+        }
       }
       & > label + div {
         flex: 3;