Skip to content

Commit 61cd3f1

Browse files
tischsoictischsoic
committed
IBX-9448: Input side label (#1432)
1 parent 1dae107 commit 61cd3f1

File tree

2 files changed

+82
-41
lines changed

2 files changed

+82
-41
lines changed

‎src/bundle/Resources/public/scss/_inputs.scss‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,12 @@
400400
}
401401

402402
.ibexa-input-text-wrapper {
403-
position: relative;
403+
display: flex;
404+
405+
&__input-wrapper {
406+
position: relative;
407+
flex-grow: 1;
408+
}
404409

405410
&__actions {
406411
display: flex;
@@ -425,6 +430,23 @@
425430
padding: 0;
426431
}
427432

433+
&__right-side-label-wrapper {
434+
display: flex;
435+
}
436+
437+
&__right-side-label {
438+
display: flex;
439+
justify-content: center;
440+
align-items: center;
441+
background-color: $ibexa-color-light-200;
442+
border: calculateRem(1px) solid $ibexa-color-dark-200;
443+
border-left: 0;
444+
border-radius: 0 $ibexa-border-radius $ibexa-border-radius 0;
445+
padding-left: calculateRem(16px);
446+
padding-right: calculateRem(16px);
447+
font-size: $ibexa-text-font-size-medium;
448+
}
449+
428450
&--type-number {
429451
max-width: calculateRem(150px);
430452

@@ -482,6 +504,13 @@
482504
}
483505
}
484506
}
507+
508+
&--has-right-side-label {
509+
.ibexa-input {
510+
border-bottom-right-radius: 0;
511+
border-top-right-radius: 0;
512+
}
513+
}
485514
}
486515

487516
.ibexa-input--date:placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--clear,

‎src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,55 +23,67 @@
2323
~ (type is defined ? " ibexa-input-text-wrapper--type-#{type}")
2424
~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn')
2525
~ (is_multiline ? ' ibexa-input-text-wrapper--multiline')
26+
~ (right_side_label is defined ? ' ibexa-input-text-wrapper--has-right-side-label')
2627
)|trim
2728
}) %}
2829

2930
<div {{ html.attributes(wrapper_attr) }}>
30-
{% block content %}{% endblock %}
31-
<div class="ibexa-input-text-wrapper__actions">
32-
{% block actions %}
33-
<button
34-
type="button"
35-
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
36-
tabindex="-1"
37-
{{ is_disabled ? 'disabled' }}
38-
{% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
39-
>
40-
<svg class="ibexa-icon ibexa-icon--tiny-small">
41-
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
42-
</svg>
43-
</button>
44-
{% if is_password_input %}
45-
<button
46-
type="button"
47-
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"
48-
tabindex="5"
49-
{{ is_disabled ? 'disabled' }}
50-
>
51-
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
52-
<use xlink:href="{{ ibexa_icon_path('view') }}"></use>
53-
</svg>
54-
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-hide d-none">
55-
<use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
56-
</svg>
57-
</button>
58-
{% elseif has_search %}
31+
<div class="ibexa-input-text-wrapper__input-wrapper">
32+
{% block content %}{% endblock %}
33+
<div class="ibexa-input-text-wrapper__actions">
34+
{% block actions %}
5935
<button
60-
type="{{ search_button_type|default('submit') }}"
61-
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search"
62-
tabindex="-1"
36+
type="button"
37+
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
38+
tabindex="-1"
6339
{{ is_disabled ? 'disabled' }}
40+
{% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
6441
>
65-
<svg class="ibexa-icon ibexa-icon--small">
66-
<use xlink:href="{{ ibexa_icon_path('search') }}"></use>
42+
<svg class="ibexa-icon ibexa-icon--tiny-small">
43+
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
6744
</svg>
6845
</button>
69-
{% elseif extra_btn.label is not empty %}
70-
<button {{html.attributes(extra_btn.attr)}}>
71-
{{- extra_btn.label -}}
72-
</button>
73-
{% endif %}
74-
{% endblock %}
46+
{% if is_password_input %}
47+
<button
48+
type="button"
49+
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"
50+
tabindex="5"
51+
{{ is_disabled ? 'disabled' }}
52+
>
53+
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
54+
<use xlink:href="{{ ibexa_icon_path('view') }}"></use>
55+
</svg>
56+
<svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-hide d-none">
57+
<use xlink:href="{{ ibexa_icon_path('view-hide') }}"></use>
58+
</svg>
59+
</button>
60+
{% elseif has_search %}
61+
<button
62+
type="{{ search_button_type|default('submit') }}"
63+
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search"
64+
tabindex="-1"
65+
{{ is_disabled ? 'disabled' }}
66+
>
67+
<svg class="ibexa-icon ibexa-icon--small">
68+
<use xlink:href="{{ ibexa_icon_path('search') }}"></use>
69+
</svg>
70+
</button>
71+
{% elseif extra_btn.label is not empty %}
72+
<button {{html.attributes(extra_btn.attr)}}>
73+
{{- extra_btn.label -}}
74+
</button>
75+
{% endif %}
76+
{% endblock %}
77+
</div>
7578
</div>
79+
{% block right_side_label %}
80+
{% if right_side_label is defined %}
81+
<div class="ibexa-input-text-wrapper__right-side-label-wrapper">
82+
<div class="ibexa-input-text-wrapper__right-side-label">
83+
{{ right_side_label }}
84+
</div>
85+
</div>
86+
{% endif %}
87+
{% endblock %}
7688
{% block extra_content %}{% endblock %}
7789
</div>

0 commit comments

Comments
 (0)