Skip to content

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

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

parent f1ee3489
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 @ cf3c4cfd
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</head> </head>
<body> <body>
<div class="ui-field-contain"> <div class="ui-field-contain">
<label> <span></span></label> <label></label>
<div></div> <div></div>
</div> </div>
</body> </body>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
View file @ cf3c4cfd
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.24197.36337.41506</string> </value> <value> <string>961.42413.53044.57736</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1475585351.18</float> <float>1503674612.29</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
View file @ cf3c4cfd
...@@ -20,16 +20,14 @@ ...@@ -20,16 +20,14 @@
.setState({ .setState({
label_text: '', label_text: '',
error_text: '', error_text: '',
label: true, label: true, // the label element is already present in the HTML template
css_class: '' css_class: ''
}) })
.ready(function () { .ready(function () {
return this.changeState({ return this.changeState({
label_element: this.element.querySelector('label'), container_element: this.element.querySelector('div'), // matches the closest div
label_text_element: this.element.querySelector('label').firstChild, label_element: this.element.querySelector('label')
error_element: this.element.querySelector('span'),
container_element: this.element.querySelector('div')
}); });
}) })
...@@ -44,6 +42,11 @@ ...@@ -44,6 +42,11 @@
hidden: options.field_json.hidden, hidden: options.field_json.hidden,
css_class: options.field_json.css_class 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); return this.changeState(state_dict);
}) })
...@@ -58,7 +61,7 @@ ...@@ -58,7 +61,7 @@
} }
if (modification_dict.hasOwnProperty('label_text')) { 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); this.state.label_element.setAttribute('for', gadget.state.scope);
...@@ -67,11 +70,16 @@ ...@@ -67,11 +70,16 @@
} }
if (modification_dict.hasOwnProperty('error_text')) { 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) { if (this.state.error_text) {
span = document.createElement('span'); span = document.createElement('span');
span.textContent = this.state.error_text; 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 @ cf3c4cfd
...@@ -932,7 +932,6 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -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'] { .gadget-content div[data-gadget-scope='m'] {
animation: fadein 0.2s ease-out; animation: fadein 0.2s ease-out;
...@@ -1069,26 +1068,26 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1069,26 +1068,26 @@ div[data-gadget-scope='header'] .ui-header ul {
flex: 7; flex: 7;
} }
} }
.gadget-content form label { .gadget-content form .ui-field-contain {
position: relative; position: relative;
} }
.gadget-content form label span span { .gadget-content form .ui-field-contain > span {
animation: fadein 0.2s ease-out; animation: fadein 0.2s ease-out;
} }
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) { @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; background-color: #FF6600;
color: #f8fff3; color: #f8fff3;
left: 110%; left: 25%;
position: absolute; position: absolute;
bottom: 130%; bottom: 110%;
white-space: pre; white-space: pre;
padding: 6pt; padding: 6pt;
border-radius: 0.325em; border-radius: 0.325em;
width: auto; width: auto;
z-index: 1001; z-index: 1001;
} }
.gadget-content form label span span:before { .gadget-content form .ui-field-contain > span:before {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 2em; left: 2em;
...@@ -1100,7 +1099,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1100,7 +1099,7 @@ div[data-gadget-scope='header'] .ui-header ul {
} }
} }
@media not screen and (min-width: 45em) { @media not screen and (min-width: 45em) {
.gadget-content form label span span { .gadget-content form .ui-field-contain > span {
margin-left: 6pt; margin-left: 6pt;
color: #FF6600; color: #FF6600;
} }
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ cf3c4cfd
...@@ -1247,19 +1247,19 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1247,19 +1247,19 @@ div[data-gadget-scope='header'] .ui-header {
} }
*/ */
/* form validation (assuming label>span is used) */ form .ui-field-contain {
form label { // relative for displaying popups with errors
position: relative; position: relative;
span span { & > span {
animation: fadein @transition-timing; animation: fadein @transition-timing;
@media @desktop, @tablet { @media @desktop, @tablet {
background-color: @coloraccent; background-color: @coloraccent;
color: @colorsubheaderlink; color: @colorsubheaderlink;
left: 110%; left: 25%;
position: absolute; position: absolute;
bottom: 130%; bottom: 110%;
white-space: pre; white-space: pre;
padding: @margin-size; padding: @margin-size;
border-radius: @border-radius; 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