Skip to content

Commit b6c6fd3

Browse files
tischsoictischsoic
authored
IBX-9628: ellipsized details content (#1466)
1 parent 80cd3b1 commit b6c6fd3

File tree

7 files changed

+126
-7
lines changed

7 files changed

+126
-7
lines changed

‎src/bundle/Resources/encore/ibexa.js.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const layout = [
3131
path.resolve(__dirname, '../public/js/scripts/button.prevent.default.js'),
3232
path.resolve(__dirname, '../public/js/scripts/toggle.button.state.toggle.js'),
3333
path.resolve(__dirname, '../public/js/scripts/split.btns.js'),
34+
path.resolve(__dirname, '../public/js/scripts/details.js'),
3435
path.resolve(__dirname, '../public/js/scripts/udw/browse.js'),
3536
path.resolve(__dirname, '../public/js/scripts/admin.multilevel.popup.menu.js'),
3637
path.resolve(__dirname, '../public/js/scripts/admin.user.menu.js'),

‎src/bundle/Resources/public/img/ibexa-icons.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/bundle/Resources/public/img/icons/arrow-down.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/bundle/Resources/public/js/scripts/details.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
(function (global, doc) {
2+
const showMoreBtns = doc.querySelectorAll('.ibexa-details__show-more-btn');
3+
const toggleShowMore = (ellipsizedContent, showMoreBtn) => {
4+
const showMoreIcon = showMoreBtn.querySelector('.ibexa-details__show-more-btn-icon');
5+
const showMoreLabel = showMoreBtn.querySelector('.ibexa-details__show-more-label');
6+
const showLessLabel = showMoreBtn.querySelector('.ibexa-details__show-less-label');
7+
8+
ellipsizedContent.classList.toggle('ibexa-details__item-content--ellipsized');
9+
10+
showMoreLabel.classList.toggle('ibexa-details__show-more-label--hidden');
11+
showLessLabel.classList.toggle('ibexa-details__show-less-label--hidden');
12+
showMoreIcon.classList.toggle('ibexa-details__show-more-btn-icon--opened');
13+
showMoreBtn.classList.toggle('ibexa-details__show-more-btn--opened');
14+
};
15+
16+
showMoreBtns.forEach((showMoreBtn) => {
17+
const contentWrapper = showMoreBtn.closest('.ibexa-details__item-content-wrapper');
18+
const ellipsizedContent = contentWrapper.querySelector('.ibexa-details__item-content');
19+
const isEllipsized = ellipsizedContent.offsetWidth < ellipsizedContent.scrollWidth;
20+
21+
showMoreBtn.classList.toggle('ibexa-details__show-more-btn--hidden', !isEllipsized);
22+
23+
showMoreBtn.addEventListener('click', () => toggleShowMore(ellipsizedContent, showMoreBtn), false);
24+
});
25+
})(window, document);

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,49 @@
4848
.ibexa-dropdown {
4949
margin-left: 0;
5050
}
51+
52+
&--ellipsized {
53+
white-space: nowrap;
54+
overflow: hidden;
55+
display: inline-block;
56+
text-overflow: ellipsis;
57+
}
58+
}
59+
60+
&__item-content-wrapper {
61+
display: flex;
62+
flex-direction: column;
63+
overflow: hidden;
64+
}
65+
66+
&__show-more-btn {
67+
display: flex;
68+
align-items: center;
69+
padding-left: 0;
70+
padding-right: 0;
71+
72+
&--hidden {
73+
display: none;
74+
}
75+
}
76+
77+
&__show-more-label,
78+
&__show-less-label {
79+
&--hidden {
80+
display: none;
81+
}
82+
}
83+
84+
&__show-more-btn-icon {
85+
&--opened {
86+
transform: rotate(-180deg);
87+
}
88+
89+
&.ibexa-icon {
90+
margin-left: calculateRem(8px);
91+
margin-right: 0;
92+
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
93+
}
5194
}
5295

5396
&__header {

‎src/bundle/Resources/translations/ibexa_admin_ui.en.xliff‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,16 @@
1616
<target state="new">Complete your profile.</target>
1717
<note>key: details.alert.complete_profile</note>
1818
</trans-unit>
19+
<trans-unit id="bb6a66ce981e1f4c979da6d4eccc06282388f871" resname="details.show_less.label">
20+
<source>Show less</source>
21+
<target state="new">Show less</target>
22+
<note>key: details.show_less.label</note>
23+
</trans-unit>
24+
<trans-unit id="8f1aba9dd9aa37972db51830a10ec4ddfb52031e" resname="details.show_more.label">
25+
<source>Show more</source>
26+
<target state="new">Show more</target>
27+
<note>key: details.show_more.label</note>
28+
</trans-unit>
1929
<trans-unit id="68a1a5ea4fa56098f5eae44460514a09ea8f8509" resname="distraction_free_mode.disable.label">
2030
<source>Exit distraction free mode</source>
2131
<target state="new">Exit distraction free mode</target>

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

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,46 @@
4040
(is_field_empty ? ' ibexa-details__item--hidden') }}"
4141
>
4242
<div class="ibexa-details__item-label {{ item_inline|default(false) ? '' : 'ibexa-label' }}">{{ item.label }}</div>
43-
<div class="ibexa-details__item-content">
44-
{% if item.content_raw is defined %}
45-
{{ item.content_raw|raw }}
46-
{% elseif item.content == 'undefined' %}
47-
-
48-
{% else %}
49-
{{ item.content }}
43+
<div class="ibexa-details__item-content-wrapper">
44+
<div class="
45+
ibexa-details__item-content
46+
{{ item.is_ellipsized|default(false) ? 'ibexa-details__item-content--ellipsized' }}"
47+
>
48+
{% if item.content_raw is defined %}
49+
{{ item.content_raw|raw }}
50+
{% elseif item.content == 'undefined' %}
51+
-
52+
{% else %}
53+
{{ item.content }}
54+
{% endif %}
55+
</div>
56+
{% if item.is_ellipsized|default(false) %}
57+
<div class="ibexa-details__item-content-actions">
58+
<button
59+
type="button"
60+
class="
61+
btn ibexa-btn ibexa-btn--small ibexa-btn--ghost
62+
ibexa-details__show-more-btn ibexa-details__show-more-btn--hidden"
63+
>
64+
<span class="ibexa-btn__label ibexa-details__show-more-label">
65+
{{ 'details.show_more.label'|trans()|desc('Show more') }}
66+
</span>
67+
<span
68+
class="
69+
ibexa-btn__label
70+
ibexa-details__show-less-label ibexa-details__show-less-label--hidden"
71+
>
72+
{{ 'details.show_less.label'|trans()|desc('Show less') }}
73+
</span>
74+
<svg
75+
class="
76+
ibexa-icon ibexa-icon--small
77+
ibexa-details__show-more-btn-icon"
78+
>
79+
<use xlink:href="{{ ibexa_icon_path('arrow-down') }}"></use>
80+
</svg>
81+
</button>
82+
</div>
5083
{% endif %}
5184
</div>
5285
</div>

0 commit comments

Comments
 (0)