IBX-6549: Implemeted redesign loader

ibexa · Nov 21, 2023 · 9d4bd2a · 9d4bd2a
1 parent dbfda9d
commit 9d4bd2a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js
@@ -219,7 +219,7 @@
         triggerElement.dataset.isMenuAttached = 1;
 
         const mainContainer = container.closest('.ibexa-embedded-item-actions');
-        const menuLoader = mainContainer.querySelector('.ibexa-embedded-item-actions__loader');
+        const menuLoader = mainContainer.querySelector('.ibexa-embedded-item-actions__loader-container');
         const askForLanguagesData = Object.keys(languages).length !== 1;
         const languagesData = askForLanguagesData
             ? await getLanguagesData({

diff --git a/src/bundle/Resources/public/scss/_embedded-item-actions.scss b/src/bundle/Resources/public/scss/_embedded-item-actions.scss
@@ -0,0 +1,13 @@
+.ibexa-embedded-item-actions {
+    &__loader-container {
+        min-width: calculateRem(100px);
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__loader {
+        margin: calculateRem(10px);
+
+        @include spinner(calculateRem(24px), calculateRem(3px));
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss
@@ -89,6 +89,7 @@
 @import 'inputs';
 @import 'links';
 @import 'footer';
+@import 'embedded-item-actions';
 @import 'popup-menu';
 @import 'multilevel-popup-menu';
 @import 'header-user-menu';

diff --git a/src/bundle/Resources/public/scss/mixins/_spinner.scss b/src/bundle/Resources/public/scss/mixins/_spinner.scss
@@ -3,6 +3,7 @@
         linear-gradient(#{$ibexa-color-black} 0 0) content-box;
 
     width: $size;
+    height: $size;
     padding: $line-size;
     aspect-ratio: 1;
     border-radius: 50%;

diff --git a/...ces/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig b/...ces/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig
@@ -1,11 +1,7 @@
 <div class="ibexa-embedded-item-actions">
     {% block loader %}
-        <ul class="ibexa-embedded-item-actions__loader ibexa-popup-menu ibexa-popup-menu--hidden">
-            <li class="ibexa-popup-menu__item">
-                <svg class="ibexa-icon ibexa-icon--small ibexa-spin">
-                    <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
-                </svg>
-            </li>
+        <ul class="ibexa-embedded-item-actions__loader-container ibexa-popup-menu ibexa-popup-menu--hidden">
+            <li class="ibexa-popup-menu____item ibexa-embedded-item-actions__loader"></li>
         </ul>
     {% endblock %}