IBX-9628: ellipsized details content

ibexa · Feb 24, 2025 · 6db1bce · 6db1bce
1 parent 734e5b3
commit 6db1bce
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 7 deletions.
diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js
@@ -31,6 +31,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/button.prevent.default.js'),
     path.resolve(__dirname, '../public/js/scripts/toggle.button.state.toggle.js'),
     path.resolve(__dirname, '../public/js/scripts/split.btns.js'),
+    path.resolve(__dirname, '../public/js/scripts/details.js'),
     path.resolve(__dirname, '../public/js/scripts/udw/browse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.multilevel.popup.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.user.menu.js'),

diff --git a/src/bundle/Resources/public/img/ibexa-icons.svg b/src/bundle/Resources/public/img/ibexa-icons.svg
diff --git a/src/bundle/Resources/public/img/icons/arrow-down.svg b/src/bundle/Resources/public/img/icons/arrow-down.svg
diff --git a/src/bundle/Resources/public/js/scripts/details.js b/src/bundle/Resources/public/js/scripts/details.js
@@ -0,0 +1,26 @@
+(function (global, doc) {
+    const showMoreBtns = doc.querySelectorAll('.ibexa-details__show-more-btn');
+    const toggleShowMore = (ellipsizedContent, showMoreBtn) => {
+        const showMoreIcon = showMoreBtn.querySelector('.ibexa-details__show-more-btn-icon');
+        const showMoreLabel = showMoreBtn.querySelector('.ibexa-details__show-more-label');
+        const showLessLabel = showMoreBtn.querySelector('.ibexa-details__show-less-label');
+
+        ellipsizedContent.classList.toggle('ibexa-details__item-content--ellipsized');
+
+        showMoreLabel.classList.toggle('ibexa-details__show-more-label--hidden');
+        showLessLabel.classList.toggle('ibexa-details__show-less-label--hidden');
+        showMoreIcon.classList.toggle('ibexa-details__show-more-btn-icon--opened')
+        showMoreBtn.classList.toggle('ibexa-details__show-more-btn--opened');
+
+    };
+
+    showMoreBtns.forEach((showMoreBtn) => {
+        const contentWrapper = showMoreBtn.closest('.ibexa-details__item-content-wrapper');
+        const ellipsizedContent = contentWrapper.querySelector('.ibexa-details__item-content');
+        const isEllipsized = ellipsizedContent.offsetWidth < ellipsizedContent.scrollWidth;
+
+        showMoreBtn.classList.toggle('ibexa-details__show-more-btn--hidden', !isEllipsized);
+
+        showMoreBtn.addEventListener('click', () => toggleShowMore(ellipsizedContent, showMoreBtn), false);
+    });
+})(window, document);
diff --git a/src/bundle/Resources/public/scss/_details.scss b/src/bundle/Resources/public/scss/_details.scss
@@ -48,6 +48,44 @@
         .ibexa-dropdown {
             margin-left: 0;
         }
+
+        &--ellipsized {
+            white-space: nowrap;
+            overflow: hidden;
+            display: inline-block;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &__item-content-wrapper {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    &__show-more-btn {
+        display: flex;
+        align-items: center;
+        padding-left: 0;
+    }
+
+    &__show-more-label,
+    &__show-less-label {
+        &--hidden {
+            display: none;
+        }
+    }
+
+    &__show-more-btn-icon {
+        &--opened {
+            transform: rotate(-180deg);
+        }
+
+        &.ibexa-icon {
+            margin-left: calculateRem(12px);
+            margin-right: 0;
+            transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+        }
     }
 
     &__header {

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig
@@ -40,13 +40,46 @@
                         (is_field_empty ? ' ibexa-details__item--hidden') }}"
                     >
                         <div class="ibexa-details__item-label {{ item_inline|default(false) ? '' : 'ibexa-label' }}">{{ item.label }}</div>
-                        <div class="ibexa-details__item-content">
-                            {% if item.content_raw is defined %}
-                                {{ item.content_raw|raw }}
-                            {% elseif item.content == 'undefined' %}
-                                -
-                            {% else %}
-                                {{ item.content }}
+                        <div class="ibexa-details__item-content-wrapper">
+                            <div class="
+                                ibexa-details__item-content
+                                {{ item.is_ellipsized|default(false) ? 'ibexa-details__item-content--ellipsized' }}"
+                            >
+                                {% if item.content_raw is defined %}
+                                    {{ item.content_raw|raw }}
+                                {% elseif item.content == 'undefined' %}
+                                    -
+                                {% else %}
+                                    {{ item.content }}
+                                {% endif %}
+                            </div>
+                            {% if item.is_ellipsized|default(false) %}
+                                <div class="ibexa-details__item-content-actions">
+                                    <button
+                                        type="button"
+                                        class="
+                                            btn ibexa-btn ibexa-btn--small ibexa-btn--ghost
+                                            ibexa-details__show-more-btn ibexa-details__show-more-btn--hidden"
+                                    >
+                                        <span class="ibexa-btn__label ibexa-details__show-more-label">
+                                            {{ 'details.show_more.label'|trans()|desc('Show more') }}
+                                        </span>
+                                        <span
+                                            class="
+                                                ibexa-btn__label
+                                                ibexa-details__show-less-label ibexa-details__show-less-label--hidden"
+                                        >
+                                            {{ 'details.show_less.label'|trans()|desc('Show less') }}
+                                        </span>
+                                        <svg
+                                            class="
+                                                ibexa-icon ibexa-icon--tiny-small
+                                                ibexa-details__show-more-btn-icon"
+                                        >
+                                            <use xlink:href="{{ ibexa_icon_path('arrow-down') }}"></use>
+                                        </svg>
+                                    </button>
+                                </div>
                             {% endif %}
                         </div>
                     </div>