Skip to content

Commit

Permalink
IBX-9448: Input side label
Browse files Browse the repository at this point in the history
  • Loading branch information
@tischsoic
tischsoic committed Jan 31, 2025
1 parent b123a8b commit 2377cdc
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 36 deletions.
31 changes: 30 additions & 1 deletion src/bundle/Resources/public/scss/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,12 @@
}

.ibexa-input-text-wrapper {
position: relative;
display: flex;

&__input-wrapper {
position: relative;
flex-grow: 1;
}

&__actions {
display: flex;
Expand All @@ -421,6 +426,23 @@
padding: 0;
}

&__right-side-label-wrapper {
display: flex;
}

&__right-side-label {
display: flex;
justify-content: center;
align-items: center;
background-color: $ibexa-color-light-200;
border: calculateRem(1px) solid $ibexa-color-dark-200;
border-left: 0;
border-radius: 0 $ibexa-border-radius $ibexa-border-radius 0;
padding-left: calculateRem(16px);
padding-right: calculateRem(16px);
font-size: $h5-font-size;
}

&--type-number {
max-width: calculateRem(150px);

Expand Down Expand Up @@ -461,6 +483,13 @@
}
}
}

&--has-right-side-label {
.ibexa-input {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
}

.ibexa-input--date:placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--clear,
Expand Down
82 changes: 47 additions & 35 deletions src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,48 +20,60 @@
~ (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')
~ (right_side_label is defined ? ' ibexa-input-text-wrapper--has-right-side-label')
)|trim
}) %}

<div {{ html.attributes(wrapper_attr) }}>
{% block content %}{% endblock %}
<div class="ibexa-input-text-wrapper__actions">
{% block actions %}
<button
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
tabindex="-1"
{% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
>
<svg class="ibexa-icon ibexa-icon--tiny-small">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
{% if is_password_input %}
<button
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
tabindex="5"
<div class="ibexa-input-text-wrapper__input-wrapper">
{% block content %}{% endblock %}
<div class="ibexa-input-text-wrapper__actions">
{% block actions %}
<button
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
tabindex="-1"
{% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
>
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
<use xlink:href="{{ ibexa_icon_path('view') }}"></use>
<svg class="ibexa-icon ibexa-icon--tiny-small">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-hide d-none">
<use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
</svg>
</button>
{% elseif has_search %}
<button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
<svg class="ibexa-icon ibexa-icon--small">
<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 %}
{% if is_password_input %}
<button
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
tabindex="5"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
<use xlink:href="{{ ibexa_icon_path('view') }}"></use>
</svg>
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-hide d-none">
<use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
</svg>
</button>
{% elseif has_search %}
<button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
<svg class="ibexa-icon ibexa-icon--small">
<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>
</div>
{% block right_side_label %}
{% if right_side_label is defined %}
<div class="ibexa-input-text-wrapper__right-side-label-wrapper">
<div class="ibexa-input-text-wrapper__right-side-label">
{{ right_side_label }}
</div>
</div>
{% endif %}
{% endblock %}
{% block extra_content %}{% endblock %}
</div>

0 comments on commit 2377cdc

Please sign in to comment.