Review fixes pt 2

Author: albozek

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

@@ -20,7 +20,9 @@
         const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
 
         if (sourceSelect) {
-            sourceSelectOptions.forEach((option) => (option.selected = false));
+            sourceSelectOptions.forEach((option) => {
+                option.selected = false;
+            });
 
             if (isNodeTimeFilter(filterNode)) {
                 sourceSelectOptions[0].selected = true;
@@ -78,7 +80,7 @@
     const isSomeFilterSet = () => {
         const hasStatusFilterValue = hasFilterValue(statusFilterNode);
         const hasTypeFilterValue = hasFilterValue(typeFilterNode);
-        const hasDatetimeFilterValue = [...datetimeFilterNodes].some((input) => hasFilterValue(input));
+        const hasDatetimeFilterValue = [...datetimeFilterNodes].some(hasFilterValue);
 
         return hasStatusFilterValue || hasTypeFilterValue || hasDatetimeFilterValue;
     };

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

@@ -7,7 +7,9 @@
     const markAllAsReadBtn = doc.querySelector('.ibexa-notification-list__mark-all-read');
     const markAsReadBtn = doc.querySelector('.ibexa-notification-list__btn--mark-as-read');
     const deleteBtn = doc.querySelector('.ibexa-notification-list__btn--delete');
-    const checkboxes = [...doc.querySelectorAll('.ibexa-notification-list .ibexa-table__cell--has-checkbox .ibexa-input--checkbox')];
+    const notificationsCheckboxes = [
+        ...doc.querySelectorAll('.ibexa-notification-list .ibexa-table__cell--has-checkbox .ibexa-input--checkbox'),
+    ];
     const markAllAsRead = () => {
         const markAllAsReadLink = Routing.generate('ibexa.notifications.mark_all_as_read');
 
@@ -30,7 +32,7 @@
     };
 
     const markSelectedAsRead = () => {
-        const selectedNotifications = [...checkboxes]
+        const selectedNotifications = [...notificationsCheckboxes]
             .filter((checkbox) => checkbox.checked)
             .map((checkbox) => checkbox.dataset.notificationId);
 
@@ -145,7 +147,7 @@
     markAsReadBtn.addEventListener('click', markSelectedAsRead, false);
 
     const toggleActionButtonState = () => {
-        const checkedNotifications = checkboxes.filter((el) => el.checked);
+        const checkedNotifications = notificationsCheckboxes.filter((el) => el.checked);
         const isAnythingSelected = checkedNotifications.length > 0;
         const unreadLabel = Translator.trans(/* @Desc("Unread") */ 'notification.unread', {}, 'ibexa_notifications');
 
@@ -170,5 +172,5 @@
         toggleActionButtonState();
     };
 
-    checkboxes.forEach((checkbox) => checkbox.addEventListener('change', () => handleCheckboxChange(checkbox), false));
+    notificationsCheckboxes.forEach((checkbox) => checkbox.addEventListener('change', () => handleCheckboxChange(checkbox), false));
 })(window, window.document, window.ibexa, window.Translator, window.Routing);

src/bundle/Resources/public/scss/_header-user-menu.scss

@@ -95,7 +95,7 @@
         position: absolute;
         left: calculateRem(8px);
         top: 0;
-        color: white;
+        color: $ibexa-color-white;
 
         &::after {
             display: flex;

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

@@ -104,15 +104,15 @@
     &__description {
         .description__title {
             margin-bottom: 0;
+        }
 
-            &--item {
-                display: inline-block;
-                vertical-align: top;
-                max-width: 100%;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-weight: bold;
-            }
+        .description__title-item {
+            display: inline-block;
+            vertical-align: top;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-weight: bold;
         }
 
         .description__text {
@@ -218,9 +218,11 @@
             width: calculateRem(6px);
             height: calculateRem(6px);
         }
+
         &[data-is-read='true'] {
             background: $ibexa-color-dark-300;
         }
+
         &[data-is-read='false'] {
             background: $ibexa-color-danger;
         }
@@ -233,6 +235,10 @@
         max-width: 100%;
         overflow: hidden;
 
+        .type__text {
+            white-space: nowrap;
+        }
+
         .ibexa-notifications-modal__description {
             display: flex;
             max-width: 100%;
@@ -249,16 +255,16 @@
 
     &__cell-wrapper {
         font-size: $ibexa-text-font-size-medium;
+        padding-left: 0;
+        min-width: 0;
+        max-width: 100%;
 
         p {
             margin-bottom: 0;
         }
-        padding-left: 0;
-        min-width: 0;
-        max-width: 100%;
 
         .ibexa-table__cell.ibexa-table__cell {
-            padding: calculateRem(12px) 0 calculateRem(12px) 0;
+            padding: calculateRem(12px) 0;
         }
     }
 

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

@@ -21,19 +21,23 @@
 
     .ibexa-table__header-cell {
         padding: calculateRem(16px) calculateRem(8px);
+
         &:first-child {
             padding-left: calculateRem(16px);
         }
+
         &:last-child {
             padding-right: calculateRem(16px);
         }
     }
 
     .ibexa-table__cell {
         padding: calculateRem(8px);
+
         &:first-child {
             padding-left: calculateRem(16px);
         }
+
         &:last-child {
             padding-right: calculateRem(16px);
         }
@@ -46,6 +50,7 @@
 
     .ibexa-table-header {
         padding: calculateRem(8px) 0;
+
         &__headline {
             font-size: $ibexa-text-font-size-extra-large;
         }

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

@@ -1,11 +1,11 @@
 {% extends "@ibexadesign/ui/layout.html.twig" %}
 
 {% import '@ibexadesign/ui/component/macros.html.twig' as html %}
+{% import _self as macros %}
 {% from '@ibexadesign/ui/component/macros.html.twig' import results_headline %}
 
 {% trans_default_domain 'ibexa_notifications' %}
 {% form_theme form_remove '@ibexadesign/ui/form_fields.html.twig' %}
-{% import _self as macros %}
 
 {% block main_container_class %}{{ parent() }} ibexa-notification-list__container {% endblock %}
 
@@ -104,13 +104,15 @@
 {% block javascripts %}
     {{ encore_entry_script_tags('ibexa-admin-notifications-list-js', null, 'ibexa') }}
 {% endblock %}
+
 {% macro table_header_tools(form,) %}
     {% set modal_data_target = 'modal-' ~ form.remove.vars.id %}
+
     <div class="ibexa-notification-list__table-btns">
         <button
             id="confirm-mark-selected-as-read"
             type="button"
-            class="btn ibexa-btn ibexa-btn--ghost ibexa-notification-list__btn--mark-as-read"
+            class="btn ibexa-btn ibexa-btn--ghost ibexa-notification-list__btn ibexa-notification-list__btn--mark-as-read"
             disabled
         >
             <svg class="ibexa-icon ibexa-icon--small">
@@ -123,7 +125,7 @@
         <button
             id="confirm-{{ form.remove.vars.id }}"
             type="button"
-            class="btn ibexa-btn ibexa-btn--ghost ibexa-notification-list__btn--delete"
+            class="btn ibexa-btn ibexa-btn--ghost ibexa-notification-list__btn ibexa-notification-list__btn--delete"
             data-bs-toggle="modal"
             data-bs-target="#{{ modal_data_target }}"
             disabled

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

@@ -63,7 +63,7 @@
     }
 } %}
     {% block body_row_cells %}
-        {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: '' } %}
+        {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' %}
             {% block content %}
                 <div>
                     <span class="ibexa-notifications-modal__notice-dot"></span>
@@ -80,10 +80,10 @@
                 </div>
             {% endblock %}
         {% endembed %}
-        {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: '' } %}
+        {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' %}
             {% block content %}
                 <div class="ibexa-notifications-modal__actions">
-                    <button class="btn ibexa-btn ibexa-btn--ghost" id={{ 'ibexa-notifications-modal-popup-trigger-' ~ notification.id }}>
+                    <button class="btn ibexa-btn ibexa-btn--ghost" id="ibexa-notifications-modal-popup-trigger-{{ notification.id }}">
                         <svg class="ibexa-icon ibexa-icon--small">
                             <use xlink:href="{{ ibexa_icon_path('options') }}"></use>
                         </svg>

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

@@ -72,7 +72,7 @@
 }
 } %}
     {% block body_row_cells %}
-        {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: 'ibexa-table__cell--has-checkbox' }%}
+        {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: 'ibexa-table__cell--has-checkbox' } %}
             {% block content %}
                 <div class="form-check">
                     <input
@@ -113,7 +113,8 @@
                 <button 
                     title="{{ 'notification.go_to_content'|trans({}, 'ibexa_notifications')|desc('Go to content') }}" 
                     type="button" 
-                    class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--small ibexa-notification-view-all__show">
+                    class="btn ibexa-btn ibexa-btn--no-text ibexa-btn--small ibexa-notification-view-all__show"
+                >
                         {{ icon_show }}
                 </button>
             {% endblock %}

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

@@ -22,7 +22,7 @@
         {% block content %}
             <p class="description__title">
                 {{ 'notification.title'|trans|desc('Title:') }}
-                <span class="description__title--item"><strong>{{ title }}</strong></span>
+                <span class="description__title-item"><strong>{{ title }}</strong></span>
             </p>
             <p class="description__text description__text--permanently-deleted">{{ 'notification.no_longer_available'|trans({}, 'ibexa_notifications')|desc('The Content item is no longer available')}}</p>
         {% endblock %}

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

@@ -1,3 +1,5 @@
+{% set max_visible_notifications_count = 10 %}
+
 {% embed '@ibexadesign/ui/component/side_panel/side_panel.html.twig' with {
     title: 'ibexa_notifications'|trans|desc('Notifications'),
     attr: {
@@ -9,7 +11,7 @@
     {% block header %}
         <div class="ibexa-side-panel__header">
             <span>{{ 'ibexa_notifications'|trans|desc('Notifications')}}
-                <span class="ibexa-notifications-modal__count">(10)</span>
+                <span class="ibexa-notifications-modal__count">({{max_visible_notifications_count}})</span>
             </span>
             <button class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--small ibexa-notifications-modal__mark-all-read-btn">
                 {{ 'ibexa_notifications.btn.mark_all_as_read'|trans|desc('Mark all as read') }}

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

@@ -12,7 +12,7 @@
 }) %}
 
 {% if id is defined %}
-    {% set attr = attr|default({})|merge({ id }) %}
+    {% set attr = attr|merge({ id }) %}
 {% endif %}
 
 <div {{ html.attributes(attr) }}>