EZP-28427: There is no red glow for a field when focused (#174)

* EZP-28427: There is no red glow for a field when focused * Added glow on focus
ezsystems · Dec 18, 2017 · 517d720 · 517d720
1 parent 0f8626d
commit 517d720
Showing 8 changed files with 47 additions and 5 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js
@@ -43,12 +43,14 @@
                 eventName: EVENT_VALUE_CHANGED,
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                invalidStateSelectors: [SELECTOR_FLATPICKR_INPUT],
             },
             {
                 selector: `${SELECTOR_FIELD} ${SELECTOR_FLATPICKR_INPUT}`,
                 eventName: 'blur',
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                invalidStateSelectors: [SELECTOR_FLATPICKR_INPUT],
             },
         ]
     });

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js
@@ -43,12 +43,14 @@
                 eventName: EVENT_VALUE_CHANGED,
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                invalidStateSelectors: [SELECTOR_FLATPICKR_INPUT],
             },
             {
                 selector: `${SELECTOR_FIELD} ${SELECTOR_FLATPICKR_INPUT}`,
                 eventName: 'blur',
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                invalidStateSelectors: [SELECTOR_FLATPICKR_INPUT],
             },
         ],
     });

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezkeyword.js b/src/bundle/Resources/public/js/scripts/fieldType/ezkeyword.js
@@ -1,6 +1,8 @@
 (function (global) {
     const SELECTOR_FIELD = '.ez-field-edit--ezkeyword';
     const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
+    const SELECTOR_TAGGIFY = '.ez-data-source__taggify';
+    const CLASS_TAGGIFY_FOCUS = 'ez-data-source__taggify--focused';
 
     class EzKeywordValidator extends global.eZ.BaseFieldValidator {
         /**
@@ -42,7 +44,7 @@
     };
 
     [...document.querySelectorAll(SELECTOR_FIELD)].forEach(field => {
-        const taggifyContainer = field.querySelector('.ez-data-source__taggify');
+        const taggifyContainer = field.querySelector(SELECTOR_TAGGIFY);
         const validator = new EzKeywordValidator({
             classInvalid: 'is-invalid',
             fieldSelector: SELECTOR_FIELD,
@@ -53,12 +55,14 @@
                     eventName: 'blur',
                     callback: 'validateKeywords',
                     errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    invalidStateSelectors: [SELECTOR_TAGGIFY],
                 },
                 {
                     selector: `${SELECTOR_FIELD} .ez-data-source__input.form-control`,
                     eventName: 'change',
                     callback: 'validateKeywords',
                     errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    invalidStateSelectors: [SELECTOR_TAGGIFY],
                 }
             ],
         });
@@ -71,9 +75,12 @@
         });
         const keywordInput = field.querySelector('.ez-data-source__input-wrapper .ez-data-source__input.form-control');
         const updateKeywords = updateValue.bind(this, keywordInput);
+        const addFocusState = () => taggifyContainer.classList.add(CLASS_TAGGIFY_FOCUS);
+        const removeFocusState = () => taggifyContainer.classList.remove(CLASS_TAGGIFY_FOCUS);
+        const taggifyInput = taggifyContainer.querySelector('.taggify__input');
 
         if (keywordInput.required) {
-            taggifyContainer.querySelector('.taggify__input').setAttribute('required', true);
+            taggifyInput.setAttribute('required', true);
         }
 
         validator.init();
@@ -87,6 +94,8 @@
 
         taggifyContainer.addEventListener('tagsCreated', updateKeywords, false);
         taggifyContainer.addEventListener('tagRemoved', updateKeywords, false);
+        taggifyInput.addEventListener('focus', addFocusState, false);
+        taggifyInput.addEventListener('blur', removeFocusState, false);
 
         global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ?
             [...global.eZ.fieldTypeValidators, validator] :

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js b/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js
@@ -17,8 +17,11 @@
          * @memberof EzSelectionValidator
          */
         validateInput(event) {
-            const isError = event.target.required && !event.target.value;
-            const label = event.target.closest(SELECTOR_FIELD).querySelector('.ez-field-edit__label').innerHTML;
+            const fieldContainer = event.currentTarget.closest(SELECTOR_FIELD);
+            const hasSelectedOptions = !!fieldContainer.querySelectorAll(`${SELECTOR_SELECTED} .selected-item`).length;
+            const isRequired = fieldContainer.classList.contains('ez-field-edit--required');
+            const isError = isRequired && !hasSelectedOptions;
+            const label = fieldContainer.querySelector('.ez-field-edit__label').innerHTML;
             const errorMessage = global.eZ.errors.emptyField.replace('{fieldName}', label);
 
             return {
@@ -33,10 +36,11 @@
         fieldSelector: SELECTOR_FIELD,
         eventsMap: [
             {
-                selector: '.ez-field-edit--ezselection .ez-data-source__input',
+                selector: '.ez-data-source__input',
                 eventName: EVENT_VALUE_CHANGED,
                 callback: 'validateInput',
                 errorNodeSelectors: ['.ez-field-edit__label-wrapper'],
+                invalidStateSelectors: [SELECTOR_SELECTED],
             },
         ],
     });
@@ -95,6 +99,8 @@
             }
 
             hideOptions();
+            container.querySelector('.ez-data-source__input').dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED));
+
         };
         const hideOptions = () => container.querySelector(SELECTOR_OPTIONS).classList.add(CLASS_HIDDEN);
         const handleClickOnInput = (event) => {

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/eztime.js b/src/bundle/Resources/public/js/scripts/fieldType/eztime.js
@@ -43,12 +43,14 @@
                 eventName: EVENT_VALUE_CHANGED,
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                invalidStateSelectors: [SELECTOR_FLATPICKR_INPUT],
             },
             {
                 selector: `${SELECTOR_FIELD} ${SELECTOR_FLATPICKR_INPUT}`,
                 eventName: 'blur',
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                invalidStateSelectors: [SELECTOR_FLATPICKR_INPUT],
             },
         ],
     });

diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
@@ -157,6 +157,12 @@
             }
         }
     }
+
+    .flatpickr-input {
+        &.is-invalid {
+            background: $ez-color-warning-pale;
+        }
+    }
 }
 
 @mixin label-required() {

diff --git a/src/bundle/Resources/public/scss/fieldType/_ezkeyword.scss b/src/bundle/Resources/public/scss/fieldType/_ezkeyword.scss
@@ -3,6 +3,14 @@
         display: flex;
         flex-wrap: wrap;
         padding-bottom: 0;
+
+        &.ez-data-source__taggify--focused {
+            border-color: $ez-color-secondary;
+        }
+
+        &.is-invalid {
+            background: $ez-color-warning-pale;
+        }
     }
 
     .taggify__wrapper {
@@ -18,6 +26,7 @@
         outline: none;
         min-width: 100px;
         padding-bottom: 8px;
+        background: transparent;
     }
 
     .taggify__tags {
@@ -44,6 +53,7 @@
     &.is-invalid {
         .ez-data-source__taggify {
             border: 1px solid $ez-color-danger;
+            background: $ez-color-warning-pale;
         }
     }
 }
diff --git a/src/bundle/Resources/public/scss/fieldType/_ezselection.scss b/src/bundle/Resources/public/scss/fieldType/_ezselection.scss
@@ -83,6 +83,11 @@
                     }
                 }
             }
+
+            &.is-invalid {
+                background: $ez-color-warning-pale;
+                border-color: $ez-color-danger;
+            }
         }
 
         &__options {