Skip to content

erp5
erp5
Commit cf1a0610 authored by Tomáš Peterka's avatar Tomáš Peterka Committed by Tomáš Peterka
Browse files
Options

[renderjs_ui] Errors are rendered even when the label is hidden

parent 9ec0e743
Hide whitespace changes
Inline Side-by-side
Showing with 31 additions and 24 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html
View file @ cf1a0610
......@@ -12,7 +12,7 @@
</head>
<body>
<div class="ui-field-contain">
<label> <span></span></label>
<label></label>
<div></div>
</div>
</body>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
View file @ cf1a0610
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.24197.36337.41506</string> </value>
<value> <string>961.42413.53044.57736</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1475585351.18</float>
<float>1503674612.29</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
View file @ cf1a0610
......@@ -20,16 +20,14 @@
.setState({
label_text: '',
error_text: '',
label: true,
label: true, // the label element is already present in the HTML template
css_class: ''
})
.ready(function () {
return this.changeState({
label_element: this.element.querySelector('label'),
label_text_element: this.element.querySelector('label').firstChild,
error_element: this.element.querySelector('span'),
container_element: this.element.querySelector('div')
container_element: this.element.querySelector('div'), // matches the closest div
label_element: this.element.querySelector('label')
});
})
......@@ -44,6 +42,11 @@
hidden: options.field_json.hidden,
css_class: options.field_json.css_class
};
// RenderJS would overwrite default value with empty variables :-(
// So we have to mitigate this behaviour
if (state_dict.label === undefined) {
state_dict.label = true;
}
return this.changeState(state_dict);
})
......@@ -58,7 +61,7 @@
}
if (modification_dict.hasOwnProperty('label_text')) {
this.state.label_text_element.textContent = this.state.label_text;
this.state.label_element.textContent = this.state.label_text;
}
this.state.label_element.setAttribute('for', gadget.state.scope);
......@@ -67,11 +70,16 @@
}
if (modification_dict.hasOwnProperty('error_text')) {
this.state.error_element.textContent = "";
// first remove old errors
span = this.state.container_element.querySelector('span');
if (span) {
this.state.container_element.removeChild(span);
}
// display new error if present
if (this.state.error_text) {
span = document.createElement('span');
span.textContent = this.state.error_text;
this.state.error_element.appendChild(span);
this.state.container_element.appendChild(span);
}
}
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ cf1a0610
......@@ -932,7 +932,6 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
*/
/* form validation (assuming label>span is used) */
}
.gadget-content div[data-gadget-scope='m'] {
animation: fadein 0.2s ease-out;
......@@ -1069,26 +1068,26 @@ div[data-gadget-scope='header'] .ui-header ul {
flex: 7;
}
}
.gadget-content form label {
.gadget-content form .ui-field-contain {
position: relative;
}
.gadget-content form label span span {
.gadget-content form .ui-field-contain > span {
animation: fadein 0.2s ease-out;
}
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
.gadget-content form label span span {
.gadget-content form .ui-field-contain > span {
background-color: #FF6600;
color: #f8fff3;
left: 110%;
left: 25%;
position: absolute;
bottom: 130%;
bottom: 110%;
white-space: pre;
padding: 6pt;
border-radius: 0.325em;
width: auto;
z-index: 1001;
}
.gadget-content form label span span:before {
.gadget-content form .ui-field-contain > span:before {
position: absolute;
top: 100%;
left: 2em;
......@@ -1100,7 +1099,7 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
@media not screen and (min-width: 45em) {
.gadget-content form label span span {
.gadget-content form .ui-field-contain > span {
margin-left: 6pt;
color: #FF6600;
}
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ cf1a0610
......@@ -1247,19 +1247,19 @@ div[data-gadget-scope='header'] .ui-header {
}
*/
/* form validation (assuming label>span is used) */
form label {
form .ui-field-contain {
// relative for displaying popups with errors
position: relative;
span span {
& > span {
animation: fadein @transition-timing;
@media @desktop, @tablet {
background-color: @coloraccent;
color: @colorsubheaderlink;
left: 110%;
left: 25%;
position: absolute;
bottom: 130%;
bottom: 110%;
white-space: pre;
padding: @margin-size;
border-radius: @border-radius;
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7