IBX-4767: Input_text updated extrabutton (#682)

ibexa · Jan 25, 2023 · caa5d24 · caa5d24
1 parent fb3d618
commit caa5d24
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 0 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.input.text.js b/src/bundle/Resources/public/js/scripts/admin.input.text.js
@@ -38,9 +38,42 @@
 
         inputClearBtns.forEach((clearBtn) => clearBtn.addEventListener('click', clearText, false));
         passwordTogglerBtns.forEach((passwordTogglerBtn) => passwordTogglerBtn.addEventListener('click', togglePasswordVisibility, false));
+        recalculateStyling();
+    };
+    const handleInputChange = ({ target: { value } }, btn) => {
+        btn.disabled = value === '';
+    };
+    const recalculateStyling = () => {
+        const extraBtns = doc.querySelectorAll('.ibexa-input-text-wrapper__action-btn--extra-btn');
+
+        extraBtns.forEach((btn) => {
+            const input = btn.closest('.ibexa-input-text-wrapper').querySelector('input');
+            const clearButton = btn.previousElementSibling?.classList.contains('ibexa-input-text-wrapper__action-btn--clear')
+                ? btn.previousElementSibling
+                : null;
+
+            if (!input) {
+                return;
+            }
+
+            btn.disabled = !input.value;
+            input.addEventListener('input', (inputEvent) => handleInputChange(inputEvent, btn), false);
+
+            if (!clearButton) {
+                return;
+            }
+
+            const clearButtonStyles = global.getComputedStyle(clearButton);
+            const clearButtonMarginRight = parseInt(clearButtonStyles.getPropertyValue('margin-right'), 10);
+            const clearButtonWidth = parseInt(clearButtonStyles.getPropertyValue('width'), 10);
+            const paddingRight = `${btn.offsetWidth + clearButtonMarginRight + clearButtonWidth}px`;
+
+            input.style.paddingRight = paddingRight;
+        });
     };
 
     doc.body.addEventListener('ibexa-inputs:added', attachListenersToAllInputs, false);
+    doc.body.addEventListener('ibexa-inputs:recalculate-styling', recalculateStyling, false);
 
     attachListenersToAllInputs();
 })(window, window.document);
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -153,6 +153,36 @@
         }
     }
 
+    &--ghost-info.ibexa-btn {
+        color: $ibexa-color-dark;
+        fill: $ibexa-color-dark;
+
+        &:hover {
+            color: $ibexa-color-info;
+
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
+
+        &:focus {
+            color: $ibexa-color-info;
+            border-color: $ibexa-color-info;
+
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
+
+        &.disabled,
+        &[disabled],
+        &:disabled {
+            color: $ibexa-color-dark-300;
+            fill: $ibexa-color-dark-300;
+            border-color: transparent;
+        }
+    }
+
     &--dark.ibexa-btn {
         color: $ibexa-color-white;
         fill: $ibexa-color-white;

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
@@ -389,6 +389,16 @@
         }
     }
 
+    &--extra-btn {
+        .ibexa-input-text-wrapper__actions {
+            right: 0;
+        }
+
+        .ibexa-input-text-wrapper__action-btn--clear {
+            margin-right: calculateRem(5px);
+        }
+    }
+
     &:hover {
         .ibexa-input {
             border-color: $ibexa-color-primary;

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
@@ -3,13 +3,23 @@
 {% set is_password_type = type|default('') == 'password' %}
 {% set is_password_input = is_password_input|default(is_password_type) %}
 {% set has_search = has_search|default(false) %}
+{% set extra_btn = extra_btn|default({})|merge({
+    label: extra_btn.label|default(''),
+    attr: extra_btn.attr|default({})|merge({
+        type: extra_btn.type|default('button'),
+        class: (extra_btn.attr.class|default('')
+            ~ ' btn ibexa-btn ibexa-btn--info ibexa-input-text-wrapper__action-btn--extra-btn'
+        )|trim
+    })
+}) %}
 {% set should_clear_button_send_form = should_clear_button_send_form|default(false) %}
 {% set wrapper_attr = wrapper_attr|default({})|merge({
     class: (wrapper_attr.class|default('')
         ~ ' ibexa-input-text-wrapper'
         ~ (has_search ? ' ibexa-input-text-wrapper--search')
         ~ (is_password_input ? ' ibexa-input-text-wrapper--password')
         ~ (type is defined ? " ibexa-input-text-wrapper--type-#{type}")
+        ~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn')
     )|trim
 }) %}
 
@@ -46,6 +56,10 @@
                         <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
                     </svg>
                 </button>
+            {% elseif extra_btn.label is not empty %}
+                <button {{html.attributes(extra_btn.attr)}}>
+                    {{- extra_btn.label -}}
+                </button>
             {% endif %}
         {% endblock %}
     </div>