Commit 9b3d880f authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Improve multicheckbox field rendering.

Make the text clickable.
Do not show text in grey.
parent cc7b9818
......@@ -6,7 +6,6 @@
function appendCheckboxField(gadget, item, checked) {
var input_gadget,
label_gadget;
if (!gadget.state.editable) {
if (checked) {
return gadget.declareGadget('gadget_html5_element.html')
......@@ -24,7 +23,10 @@
return;
}
return gadget.declareGadget('gadget_html5_input.html', {scope: item[1]})
return gadget.declareGadget('gadget_html5_input.html', {
scope: item[1],
element: document.createElement('span')
})
.push(function (result) {
input_gadget = result;
var state_dict = {
......@@ -39,21 +41,12 @@
return result.render(state_dict);
})
.push(function () {
return gadget.declareGadget('gadget_html5_element.html');
})
.push(function (result) {
label_gadget = result;
var state_dict = {
tag: 'label',
text_content: item[0]
};
return result.render(state_dict);
})
.push(function () {
var div = document.createElement("div");
div.setAttribute("class", "ui-field-contain");
div.appendChild(label_gadget.element);
div.appendChild(input_gadget.element);
var div = document.createElement("div"),
label = document.createElement("label"),
text_node = document.createTextNode(item[0]);
label.appendChild(input_gadget.element);
label.appendChild(text_node);
div.appendChild(label);
gadget.element.appendChild(div);
});
}
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.58935.16621.30429</string> </value>
<value> <string>958.24032.27808.24456</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1479375555.86</float>
<float>1490947237.26</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -279,7 +279,7 @@ hr {
* Text fields
**********************************************/
label {
color: #777777;
display: block;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
textarea,
......@@ -1019,15 +1019,16 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content .ui-field-contain {
display: flex;
}
.gadget-content .ui-field-contain label {
.gadget-content .ui-field-contain > label {
flex: 1;
color: #777777;
}
.gadget-content .ui-field-contain label + div {
.gadget-content .ui-field-contain > label + div {
flex: 3;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
.gadget-content .center .ui-field-contain label + div {
.gadget-content .center .ui-field-contain > label + div {
flex: 7;
}
}
......
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>958.19701.31404.5597</string> </value>
<value> <string>958.22948.35082.52087</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1490687640.52</float>
<float>1490947545.17</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -353,8 +353,7 @@ hr {
**********************************************/
label {
// XXX
color: @grey;
display: block;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea, select {
......@@ -1166,10 +1165,11 @@ div[data-gadget-scope='header'] .ui-header {
// Label
.ui-field-contain {
display: flex;
label {
& > label {
flex: 1;
color: @grey;
}
label + div {
& > label + div {
flex: 3;
}
}
......@@ -1178,7 +1178,7 @@ div[data-gadget-scope='header'] .ui-header {
// Align field on the left group's field
.center {
.ui-field-contain {
label + div {
& > label + div {
flex: 7;
}
}
......
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