EZP-28322: No space between validation message and field label

ezsystems · Dec 13, 2017 · e67ef6a · e67ef6a
1 parent 4fe3505
commit e67ef6a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
@@ -3,6 +3,7 @@
     const SELECTOR_INPUT_FILE = 'input[type="file"]';
     const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
     const SELECTOR_ALT_WRAPPER = '.ez-field-edit-preview__image-alt';
+    const SELECTOR_INPUT_ALT = '.ez-field-edit-preview__image-alt .ez-data-source__input';
 
     class EzImageFilePreviewField extends global.eZ.BasePreviewField {
         /**
@@ -42,6 +43,7 @@
             sizeContainer.title = fileSize;
 
             preview.querySelector('.ez-field-edit-preview__action--preview').href = URL.createObjectURL(files[0]);
+            this.fieldContainer.querySelector(SELECTOR_INPUT_ALT).dispatchEvent(new CustomEvent('cancelErrors'));
         }
     }
 
@@ -81,7 +83,7 @@
                     errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
                 },
                 {
-                    selector: `${SELECTOR_ALT_WRAPPER} .ez-data-source__input`,
+                    selector: SELECTOR_INPUT_ALT,
                     eventName: 'blur',
                     callback: 'validateAltInput',
                     invalidStateSelectors: ['.ez-data-source__field--alternativeText'],
@@ -94,6 +96,14 @@
                     callback: 'showFileSizeError',
                     errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
                 },
+                {
+                    isValueValidator: false,
+                    selector: SELECTOR_INPUT_ALT,
+                    eventName: 'cancelErrors',
+                    callback: 'cancelErrors',
+                    invalidStateSelectors: ['.ez-data-source__field--alternativeText'],
+                    errorNodeSelectors: [`${SELECTOR_ALT_WRAPPER} .ez-data-source__label-wrapper`],
+                }
             ],
         });
         const previewField = new EzImageFilePreviewField({

diff --git a/src/bundle/Resources/public/scss/fieldType/_base-field.scss b/src/bundle/Resources/public/scss/fieldType/_base-field.scss
@@ -35,4 +35,9 @@
             }
         }
     }
+
+    &__error {
+        display: inline-block;
+        margin-left: 8px;
+    }
 }
diff --git a/src/bundle/Resources/public/scss/fieldType/_ezgmaplocation.scss b/src/bundle/Resources/public/scss/fieldType/_ezgmaplocation.scss
@@ -47,7 +47,7 @@
 
                 .ez-data-source__input {
                     border: 1px solid $ez-color-danger;
-                    background: #fceaec;
+                    background: $ez-color-warning-pale;
                 }
             }
         }

diff --git a/src/bundle/Resources/public/scss/fieldType/_ezimage.scss b/src/bundle/Resources/public/scss/fieldType/_ezimage.scss
@@ -34,13 +34,22 @@
                 border-bottom-left-radius: 5px;
             }
         }
+    }
+
+    .ez-data-source__field--alternativeText {
+        &.is-invalid {
+            .ez-data-source__label-wrapper,
+            .ez-data-source__label-wrapper .form-control-label {
+                color: $ez-color-danger;
+            }
+
+            .ez-field-edit__error {
+                margin-left: 8px;
+                display: inline-block;
+            }
 
-        .ez-data-source__field--alternativeText {
-            &.is-invalid {
-                .ez-data-source__label-wrapper,
-                .ez-data-source__label-wrapper .form-control-label {
-                    color: $ez-color-danger;
-                }
+            .ez-data-source__input {
+                background: $ez-color-warning-pale;
             }
         }
     }