Commit 4dc92494 authored by Tomáš Peterka's avatar Tomáš Peterka Committed by Tomáš Peterka

[renderjs] Align horizontal fields

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

/reviewed-on !566
parent 77ff21b8
......@@ -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);
......
......@@ -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>
......
......@@ -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')) {
......
......@@ -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 {
......
......@@ -1185,15 +1185,26 @@ 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;
}
}
display: flex;
& > div {
flex: 1;
.field_container > div {
// matches form-group ("left", "right" ...)
display: flex;
& > div {
flex: 1;
}
}
}
......
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