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