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 nexedi/erp5!566
parent 77ff21b8
...@@ -14,8 +14,7 @@ ...@@ -14,8 +14,7 @@
rJS(window) rJS(window)
.setState({ .setState({
subgadget_template: undefined, subgadget_template: undefined,
editable: undefined, editable: undefined
css_class: ''
}) })
.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment") .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
...@@ -33,7 +32,6 @@ ...@@ -33,7 +32,6 @@
title: field_json.title, title: field_json.title,
hidden: field_json.hidden, hidden: field_json.hidden,
view: field_json.view, view: field_json.view,
css_class: field_json.css_class,
// field_json._embedded is HATEOASed subobj specs included in FormBox // field_json._embedded is HATEOASed subobj specs included in FormBox
erp5_embedded_document: field_json._embedded erp5_embedded_document: field_json._embedded
}; };
...@@ -77,11 +75,6 @@ ...@@ -77,11 +75,6 @@
// do not preserve objects in the state // do not preserve objects in the state
delete gadget.state.erp5_embedded_document; 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') return gadget.getDeclaredGadget('sub')
.push(function (subgadget) { .push(function (subgadget) {
subgadget.render(form_options); subgadget.render(form_options);
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.29423.48444.21077</string> </value> <value> <string>961.56527.16709.20804</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>1502977334.64</float> <float>1517248866.15</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
this.state.label_element.setAttribute('for', gadget.state.scope); this.state.label_element.setAttribute('for', gadget.state.scope);
if (modification_dict.hasOwnProperty('css_class') && this.state.css_class) { 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')) { if (modification_dict.hasOwnProperty('error_text')) {
......
...@@ -1029,13 +1029,16 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1029,13 +1029,16 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content .field_container > div > div > div.ui-field-contain div { .gadget-content .field_container > div > div > div.ui-field-contain div {
width: 100%; width: 100%;
} }
.gadget-content .horizontal_align_form_box .field_container > div { .gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain {
/* Class .horizontal_align_form_box is here only for backward-compatibility! padding: 0;
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 > label {
padding-top: 9pt;
}
.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div {
display: flex; 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; flex: 1;
} }
.gadget-content .ui-content-header-plain { .gadget-content .ui-content-header-plain {
......
...@@ -1185,17 +1185,28 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -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! & > label {
It is used to force horizontal rendering of fields inside FormBox. padding-top: @margin-size + @half-margin-size;
The first > div represents form-group ("left", "right" ...) */ }
}
.field_container > div {
// matches form-group ("left", "right" ...)
display: flex; display: flex;
& > div { & > div {
flex: 1; flex: 1;
} }
} }
}
.ui-content-header-plain { .ui-content-header-plain {
font-size: 150%; font-size: 150%;
......
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