diff --git a/src/bundle/Resources/public/js/scripts/admin.input.text.js b/src/bundle/Resources/public/js/scripts/admin.input.text.js index 58a24381c8..663f93f783 100644 --- 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 index 73c49176d7..8b7f293f6a 100644 --- 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 index b0f6d7dc34..f26f1af1a8 100644 --- 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 index 1aa38698b8..a6bb7ec7cf 100644 --- 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,6 +3,15 @@ {% 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('') @@ -10,6 +19,7 @@ ~ (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 @@ + {% elseif extra_btn.label is not empty %} + {% endif %} {% endblock %}