IBX-7781: Upgraded toast notifications

ibexa · Mar 11, 2024 · 882cfb3 · 882cfb3
1 parent 28a9fb8
commit 882cfb3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 82 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.notifications.js b/src/bundle/Resources/public/js/scripts/admin.notifications.js
@@ -3,10 +3,10 @@
     const notifications = JSON.parse(notificationsContainer.dataset.notifications);
     const { template } = notificationsContainer.dataset;
     const iconsMap = {
-        info: 'system-information',
-        error: 'circle-close',
-        warning: 'warning-triangle',
-        success: 'checkmark',
+        info: 'about',
+        error: 'notice',
+        warning: 'warning',
+        success: 'approved',
     };
     const addNotification = ({ detail }) => {
         const { onShow, label, message, customIconPath, rawPlaceholdersMap = {} } = detail;

diff --git a/src/bundle/Resources/public/scss/_alerts.scss b/src/bundle/Resources/public/scss/_alerts.scss
@@ -16,6 +16,10 @@
         padding: 0 calculateRem(8px);
 
         #{$self} {
+            &__content {
+                padding: calculateRem(4px);
+            }
+
             &__title {
                 font-size: calculateRem(12px);
             }
@@ -28,7 +32,7 @@
 
     &--no-close-btn {
         grid-template: 'icon content actions';
-        grid-template-columns: calculateRem(32px) 1fr auto;
+        grid-template-columns: auto 1fr auto;
     }
 
     &__icon-wrapper {
@@ -60,7 +64,7 @@
         display: flex;
         flex-wrap: wrap;
         align-items: baseline;
-        padding: calculateRem(6px);
+        padding: calculateRem(4px) calculateRem(8px);
 
         &--subtitle-below {
             flex-direction: column;
@@ -236,91 +240,24 @@
         &.ibexa-alert {
             border-radius: $ibexa-border-radius;
 
+            .ibexa-alert__icon-wrapper {
+                margin-top: calculateRem(7px);
+            }
+
             &--info {
                 border: calculateRem(1px) solid $ibexa-color-info;
-
-                .ibexa-alert {
-                    &__icon-wrapper {
-                        border-radius: 50%;
-                        background: $ibexa-color-info;
-                    }
-                }
             }
 
             &--error {
                 border: calculateRem(1px) solid $ibexa-color-danger;
-
-                .ibexa-alert {
-                    &__icon-wrapper {
-                        border-radius: $ibexa-border-radius-small;
-                        background: $ibexa-color-danger;
-                        transform: rotate(45deg);
-
-                        .ibexa-icon {
-                            transform: rotate(-45deg);
-                        }
-                    }
-                }
             }
 
             &--warning {
                 border: calculateRem(1px) solid $ibexa-color-accent;
-
-                .ibexa-alert {
-                    &__icon-wrapper {
-                        position: relative;
-
-                        &:before {
-                            display: inline-block;
-                            margin-left: calculateRem(3px);
-                            border: solid calculateRem(15px) transparent;
-                            border-top-width: 0;
-                            border-bottom-width: calculateRem(25px);
-                            border-bottom-color: $ibexa-color-accent;
-                            clip-path: circle(54% at 50% 69%);
-                            vertical-align: bottom;
-                            content: '';
-                        }
-
-                        .ibexa-icon {
-                            position: absolute;
-                            top: calculateRem(9px);
-                            left: calculateRem(8px);
-                        }
-                    }
-                }
             }
 
             &--success {
                 border: calculateRem(1px) solid $ibexa-color-success;
-
-                .ibexa-alert {
-                    &__icon-wrapper {
-                        border-radius: $ibexa-border-radius-small;
-                        background: $ibexa-color-success;
-                    }
-                }
-            }
-        }
-
-        .ibexa-alert {
-            &__icon-wrapper {
-                width: calculateRem(24px);
-                height: calculateRem(24px);
-                justify-content: center;
-                align-items: center;
-
-                .ibexa-icon {
-                    fill: $ibexa-color-white;
-                }
-            }
-
-            &__close-btn {
-                margin: 0;
-            }
-
-            &__content {
-                margin-top: calculateRem(4px);
             }
         }
     }

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig
@@ -19,9 +19,8 @@
 >
     {% block icon %}
         {% set icon = icon_name_map[type] is defined ? icon_name_map[type] : '' %}
-        {% set icon_class = is_toast|default(false) ? 'ibexa-icon--tiny-small' : 'ibexa-icon--small' %}
         <div class="ibexa-alert__icon-wrapper">
-            <svg class="ibexa-icon ibexa-alert__icon {{ icon_class }}">
+            <svg class="ibexa-icon ibexa-alert__icon ibexa-icon--small">
                 <use xlink:href="{{ icon_path is defined ? icon_path : ibexa_icon_path(icon) }}"></use>
             </svg>
         </div>
@@ -59,7 +58,7 @@
     {% block close_btn %}
         {% if show_close_btn|default(false) %}
             <button class="btn ibexa-btn ibexa-btn--no-text ibexa-alert__close-btn" data-bs-dismiss="alert">
-                <svg class="ibexa-icon ibexa-icon--tiny-small">
+                <svg class="ibexa-icon ibexa-icon--tiny">
                     <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                 </svg>
             </button>

diff --git a/src/bundle/ui-dev/src/modules/common/alert/alert.js b/src/bundle/ui-dev/src/modules/common/alert/alert.js
@@ -4,7 +4,7 @@ import Icon from '../icon/icon';
 import { createCssClassNames } from '../helpers/css.class.names';
 
 const ICON_NAME_MAP = {
-    info: 'system-information',
+    info: 'about',
     error: 'notice',
     warning: 'warning',
     success: 'approved',
@@ -52,7 +52,7 @@ const Alert = ({
             </div>
             {showCloseBtn && (
                 <button className="btn ibexa-btn ibexa-btn--no-text ibexa-alert__close-btn" type="button" onClick={onClose}>
-                    <Icon name="discard" extraClasses="ibexa-icon--tiny-small" />
+                    <Icon name="discard" extraClasses="ibexa-icon--tiny" />
                 </button>
             )}
         </div>