Refacotr & style fixes

Author: albozek

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

@@ -258,5 +258,5 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/core/sidebar.collapse.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.notifications.list.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.notifications.filters.js'),
-        ])
+        ]);
 };

src/bundle/Resources/public/js/scripts/admin.notifications.filters.js

@@ -1,5 +1,5 @@
 (function (global, doc) {
-    const searchForm = doc.querySelector('.ibexa-al-list-search-form');
+    const searchForm = doc.querySelector('.ibexa-list-search-form');
     const filtersContainerNode = doc.querySelector('.ibexa-list-filters');
     const applyFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--apply');
     const clearFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--clear');
@@ -49,9 +49,7 @@
         const checkboxes = filterNode.querySelectorAll(
             '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
         );
-        const picker = filterNode.querySelector(
-            '.ibexa-input--date',
-        );
+        const picker = filterNode.querySelector('.ibexa-input--date');
         picker?.addEventListener('change', filterChange, false);
         sourceSelect?.addEventListener('change', filterChange, false);
         checkboxes.forEach((checkbox) => {

src/bundle/Resources/public/js/scripts/admin.notifications.list.js

@@ -58,9 +58,10 @@
             .then(getJsonFromResponse)
             .catch(() => ibexa.helpers.notification.showErrorNotification(errorMessage));
     };
-    const getBulkOperations = (notificationIds) =>  notificationIds.reduce((total, notificationId) => {
+    const getBulkOperations = (notificationIds) =>
+        notificationIds.reduce((total, notificationId) => {
             const markAsReadLink = Routing.generate('ibexa.notifications.mark_as_read', { notificationId });
-            
+
             total[markAsReadLink] = {
                 uri: markAsReadLink,
                 method: 'GET',
@@ -69,9 +70,9 @@
                     Accept: 'application/vnd.ibexa.api.ContentType+json',
                     'X-Requested-With': 'XMLHttpRequest',
                 },
-                credentials: 'same-origin'
+                credentials: 'same-origin',
             };
-    
+
             return total;
         }, {});
 
@@ -106,8 +107,7 @@
                         notificationRow.querySelectorAll('.ibexa-notification-view-all__notice-dot').forEach((noticeDot) => {
                             noticeDot.setAttribute('data-is-read', (!isRead).toString());
                         });
-                        notificationRow.querySelector('.ibexa-notification-view-all__read').innerHTML =
-                            statusText;
+                        notificationRow.querySelector('.ibexa-notification-view-all__read').innerHTML = statusText;
 
                         return;
                     }
@@ -155,25 +155,27 @@
     markAllAsReadBtn.addEventListener('click', markAllAsRead, false);
     markAsReadBtn.addEventListener('click', markSelectedAsRead, false);
 
-
     const toggleActionButtonState = () => {
         const checkedNotifications = checkboxes.filter((el) => el.checked);
         const isAnythingSelected = checkedNotifications.length > 0;
-        const unreadLabel =     Translator.trans(/* @Desc("Unread") */ 'notification.unread',{},'ibexa_notifications');
+        const unreadLabel = Translator.trans(/* @Desc("Unread") */ 'notification.unread', {}, 'ibexa_notifications');
 
         deleteBtn.disabled = !isAnythingSelected;
-        markAsReadBtn.disabled = !isAnythingSelected || !checkedNotifications.every((checkbox) => 
-            checkbox.closest('.ibexa-table__row').querySelector('.ibexa-notification-view-all__read').innerText === unreadLabel
-        );
+        markAsReadBtn.disabled =
+            !isAnythingSelected ||
+            !checkedNotifications.every(
+                (checkbox) =>
+                    checkbox.closest('.ibexa-table__row').querySelector('.ibexa-notification-view-all__read').innerText === unreadLabel,
+            );
     };
     const handleCheckboxChange = (checkbox) => {
         const checkboxFormId = checkbox.dataset?.formRemoveId;
         const formRemoveCheckbox = doc.getElementById(checkboxFormId);
         if (formRemoveCheckbox) {
             formRemoveCheckbox.checked = checkbox.checked;
         }
-        toggleActionButtonState(); 
+        toggleActionButtonState();
     };
- 
+
     checkboxes.forEach((checkbox) => checkbox.addEventListener('change', () => handleCheckboxChange(checkbox), false));
 })(window, window.document, window.ibexa, window.Translator, window.Routing);

src/bundle/Resources/public/js/scripts/admin.notifications.modal.js

@@ -96,7 +96,6 @@
         if (notificationsCount < 10) {
             panel.querySelector('.ibexa-notifications-modal__count').textContent = `(${notificationsCount})`;
         }
-        
     };
     const updatePendingNotificationsView = (notificationsInfo) => {
         const noticeDot = doc.querySelector('.ibexa-header-user-menu__notice-dot');

src/bundle/Resources/public/js/scripts/core/sidebar.collapse.js

@@ -1,16 +1,16 @@
 (function (global, doc) {
-    const sidebar = doc.querySelector('.ibexa-notification-list__filters-wrapper');
+    const sidebar = doc.querySelector('.ibexa-list-filters__sidebar');
     const toggleBtn = sidebar.querySelector('.ibexa-list-filters__expand-btn');
     const toggleCollapseIcon = toggleBtn.querySelector('.ibexa-list-filters__collapse-icon');
     const toggleExpandIcon = toggleBtn.querySelector('.ibexa-list-filters__expand-icon');
 
     const toggleSidebar = () => {
         const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true';
-        
-        sidebar.classList.toggle('ibexa-notification-list__filters-wrapper--collapsed', !isExpanded);
+
+        sidebar.classList.toggle('ibexa-list-filters__sidebar--collapsed', isExpanded);
         toggleBtn.setAttribute('aria-expanded', (!isExpanded).toString());
-        toggleExpandIcon.toggleAttribute('hidden', isExpanded);
-        toggleCollapseIcon.toggleAttribute('hidden', !isExpanded);
+        toggleExpandIcon.toggleAttribute('hidden', !isExpanded);
+        toggleCollapseIcon.toggleAttribute('hidden', isExpanded);
     };
 
     toggleBtn.addEventListener('click', toggleSidebar, false);

src/bundle/Resources/public/scss/_list-filters.scss

@@ -1,13 +1,13 @@
 .ibexa-list-filters {
     $self: &;
-    
+
     overflow: hidden;
 
     &__header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: calculateRem(11px) calculateRem(16px);
+        padding: calculateRem(11px) calculateRem(12px);
         min-width: calculateRem(275px);
     }
 
@@ -17,6 +17,18 @@
         font-weight: 600;
     }
 
+    &__sidebar {
+        &--collapsed {
+            width: calculateRem(68px);
+            margin-right: 0;
+
+            .ibexa-list-filters__header > *:not(.ibexa-list-filters__expand-btn),
+            .ibexa-list-filters__items {
+                display: none;
+            }
+        }
+    }
+
     .accordion-item {
         background: transparent;
 

src/bundle/Resources/public/scss/_notifications-modal.scss

@@ -79,7 +79,7 @@
         font-size: $ibexa-text-font-size-small;
         color: $ibexa-color-light-700;
     }
-    
+
     &__notice-dot {
         width: calculateRem(8px);
         height: calculateRem(8px);
@@ -218,10 +218,10 @@
             width: calculateRem(6px);
             height: calculateRem(6px);
         }
-        &[data-is-read="true"] {
+        &[data-is-read='true'] {
             background: $ibexa-color-dark-300;
         }
-        &[data-is-read="false"] {
+        &[data-is-read='false'] {
             background: $ibexa-color-danger;
         }
     }

src/bundle/Resources/public/scss/_notifications.scss

@@ -36,11 +36,11 @@
 
     .ibexa-table-header {
         padding: calculateRem(8px) 0;
-        &__headline{
-        font-size: $ibexa-text-font-size-extra-large;
+        &__headline {
+            font-size: $ibexa-text-font-size-extra-large;
         }
     }
-    
+
     &__mark-all-read {
         display: flex;
         justify-content: flex-end;
@@ -58,23 +58,13 @@
         border: calculateRem(1px) solid $ibexa-color-light;
         background-color: $ibexa-color-white;
         transition: width 0.3s ease;
-        
-        &--collapsed {
-            width: calculateRem(64px);
-            margin-right: 0;
-
-            .ibexa-list-filters__header > *:not(.ibexa-list-filters__expand-btn),
-            .ibexa-list-filters__items {
-                display: none;
-            }
-        }
     }
 
     &__table-btns {
         font-size: $ibexa-text-font-size-medium;
     }
-    
+
     &__hidden-btn {
         display: none;
     }
-}
+}

src/bundle/Resources/views/themes/admin/account/notifications/list_all.html.twig

@@ -92,7 +92,7 @@
                     </div>
                 {% endif %}
             </section>
-            <div class="ibexa-notification-list__filters-wrapper">
+            <div class="ibexa-notification-list__filters-wrapper ibexa-list-filters__sidebar">
                 {% include '@ibexadesign/account/notifications/filters.html.twig' %}
             </div>
         </div>