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

cf1a0610 · Tomáš Peterka · Tomáš Peterka · 9ec0e743 · cf1a0610 · cf1a0610
Commit cf1a0610 authored Aug 29, 2017 by Tomáš Peterka Committed by Tomáš Peterka Sep 01, 2017
5 changed files
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.html
@@ -12,7 +12,7 @@
  </head>
  <body>
    <div class="ui-field-contain">
-      <label> <span></span></label>
+      <label></label>
      <div></div>
    </div>
  </body>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_html.xml
@@ -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>

--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
@@ -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);
        }
      }


--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
@@ -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;
  }

--- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
@@ -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;