[renderjs] Align horizontal fields

-  use field defined CSS class on the top-level div only
-  compute correct paddings for horizontal elements

/reviewed-on nexedi/erp5!566

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_field_formbox_js.js

@@ -14,8 +14,7 @@
   rJS(window)
     .setState({
       subgadget_template: undefined,
-      editable: undefined,
-      css_class: ''
+      editable: undefined
     })
 
     .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
@@ -33,7 +32,6 @@
           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_embedded_document: field_json._embedded
         };
@@ -77,11 +75,6 @@
       // do not preserve objects in the state
       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) {
           subgadget.render(form_options);

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_field_formbox_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.29423.48444.21077</string> </value>
+                <value> <string>961.56527.16709.20804</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1502977334.64</float>
+                        <float>1517248866.15</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js

@@ -119,7 +119,7 @@
       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);
+        this.element.classList.add(this.state.css_class);
       }
 
       if (modification_dict.hasOwnProperty('error_text')) {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -1029,13 +1029,16 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content .field_container > div > div > div.ui-field-contain div {
   width: 100%;
 }
-.gadget-content .horizontal_align_form_box .field_container > div {
-  /* Class .horizontal_align_form_box is here only for backward-compatibility!
-       It is used to force horizontal rendering of fields inside FormBox.
-       The first > div represents form-group ("left", "right" ...) */
+.gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain {
+  padding: 0;
+}
+.gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain > label {
+  padding-top: 9pt;
+}
+.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div {
   display: flex;
 }
-.gadget-content .horizontal_align_form_box .field_container > div > div {
+.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div > div {
   flex: 1;
 }
 .gadget-content .ui-content-header-plain {

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

@@ -1185,17 +1185,28 @@ div[data-gadget-scope='header'] .ui-header {
     }
   }
 
-  .horizontal_align_form_box .field_container > div {
+  .field_container > div > div.horizontal_align_form_box {
+    // Class .horizontal_align_form_box is here only for backward-compatibility!
+    // It is used to force horizontal rendering of fields inside FormBox.
+    // we need to overwrite the padding above this statement
+    & > .ui-field-contain {
+      // makes field to high
+      padding: 0;
 
-    /* Class .horizontal_align_form_box is here only for backward-compatibility!
-       It is used to force horizontal rendering of fields inside FormBox.
-       The first > div represents form-group ("left", "right" ...) */
+      & > label {
+        padding-top: @margin-size + @half-margin-size;
+      }
+    }
 
+    .field_container > div {
+      // matches form-group ("left", "right" ...)
       display: flex;
+
       & > div {
         flex: 1;
       }
     }
+  }
 
   .ui-content-header-plain {
     font-size: 150%;