From 6db1bce1e0ffcb575d65a68cde117ab95e9795f8 Mon Sep 17 00:00:00 2001
From: tischsoic <symfiz@gmail.com>
Date: Mon, 24 Feb 2025 13:27:52 +0100
Subject: [PATCH] IBX-9628: ellipsized details content

---
 .../Resources/encore/ibexa.js.config.js       |  1 +
 .../Resources/public/img/ibexa-icons.svg      |  3 ++
 .../Resources/public/img/icons/arrow-down.svg |  4 ++
 .../Resources/public/js/scripts/details.js    | 26 ++++++++++
 .../Resources/public/scss/_details.scss       | 38 +++++++++++++++
 .../ui/component/details/details.html.twig    | 47 ++++++++++++++++---
 6 files changed, 112 insertions(+), 7 deletions(-)
 create mode 100755 src/bundle/Resources/public/img/icons/arrow-down.svg
 create mode 100644 src/bundle/Resources/public/js/scripts/details.js

diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js
index 25a21db5cf..b0e571de94 100644
--- 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
index e0293dff56..375b1e8fff 100644
--- a/src/bundle/Resources/public/img/ibexa-icons.svg
+++ b/src/bundle/Resources/public/img/ibexa-icons.svg
@@ -23,6 +23,9 @@
 <symbol id="archive-restore" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.333 22.667c0-0.736 0.597-1.333 1.333-1.333v0h6.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333v0h-6.667c-0.736 0-1.333-0.597-1.333-1.333v0zM31.813 11.333l-4.147 7.030v11.71c-0.004 1.065-0.868 1.927-1.933 1.927-0.001 0-0.002 0-0.004 0h-19.46c-0.001 0-0.002 0-0.003 0-1.065 0-1.93-0.862-1.933-1.926v-11.71l-4.147-7.030c-0.159-0.217-0.255-0.489-0.255-0.784 0-0.736 0.597-1.333 1.333-1.333 0.537 0 1.001 0.318 1.212 0.776l0.003 0.008 3.947 6.667h19.147l3.947-6.667c0.214-0.466 0.678-0.784 1.215-0.784 0.736 0 1.333 0.597 1.333 1.333 0 0.295-0.096 0.567-0.258 0.788l0.003-0.004zM25 19.333h-18v10h18zM21.28 4.393l-3.717-3.727c-0.399-0.402-0.951-0.65-1.562-0.65s-1.163 0.249-1.562 0.65l-0 0-3.72 3.727c-0.239 0.241-0.387 0.573-0.387 0.94 0 0.737 0.597 1.334 1.334 1.334 0.37 0 0.705-0.151 0.947-0.394l0-0 2.053-2.067v9.127c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-9.13l2.053 2.070c0.242 0.243 0.577 0.394 0.947 0.394 0.737 0 1.334-0.597 1.334-1.334 0-0.367-0.148-0.699-0.387-0.94l0 0z"></path>
 </symbol>
+<symbol id="arrow-down" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.967 22.667c-0.41-0.002-0.775-0.189-1.018-0.481l-0.002-0.002-6.633-8c-0.177-0.224-0.284-0.511-0.284-0.823 0-0.736 0.597-1.333 1.333-1.333 0.4 0 0.759 0.176 1.003 0.455l0.001 0.002 5.61 6.767 5.667-6.773c0.246-0.293 0.613-0.478 1.023-0.478 0.737 0 1.335 0.598 1.335 1.335 0 0.327-0.118 0.627-0.313 0.859l0.002-0.002-6.69 8c-0.246 0.292-0.612 0.477-1.022 0.477-0.004 0-0.008-0-0.012-0h0.001z"></path>
+</symbol>
 <symbol id="arrow-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
 <path d="M19.6797 16L10.0007 8V24L19.6797 16Z"/>
 </symbol>
diff --git a/src/bundle/Resources/public/img/icons/arrow-down.svg b/src/bundle/Resources/public/img/icons/arrow-down.svg
new file mode 100755
index 0000000000..9623919c38
--- /dev/null
+++ b/src/bundle/Resources/public/img/icons/arrow-down.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<title>arrow-down</title>
+<path d="M15.967 22.667c-0.41-0.002-0.775-0.189-1.018-0.481l-0.002-0.002-6.633-8c-0.177-0.224-0.284-0.511-0.284-0.823 0-0.736 0.597-1.333 1.333-1.333 0.4 0 0.759 0.176 1.003 0.455l0.001 0.002 5.61 6.767 5.667-6.773c0.246-0.293 0.613-0.478 1.023-0.478 0.737 0 1.335 0.598 1.335 1.335 0 0.327-0.118 0.627-0.313 0.859l0.002-0.002-6.69 8c-0.246 0.292-0.612 0.477-1.022 0.477-0.004 0-0.008-0-0.012-0h0.001z"></path>
+</svg>
diff --git a/src/bundle/Resources/public/js/scripts/details.js b/src/bundle/Resources/public/js/scripts/details.js
new file mode 100644
index 0000000000..27884ec477
--- /dev/null
+++ 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
index 99105ff7db..6854daca1c 100644
--- 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
index a8c4d434c5..4a59c521c6 100644
--- 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>