[BootstrapAdminUi] Close button to flash messages (#155)

Fixes #108
Sylius · Dec 10, 2024 · 5261f08 · 5261f08
2 parents 2422a60 + ce0434f
commit 5261f08
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 15 deletions.
diff --git a/src/BootstrapAdminUi/assets/styles/_flashes.scss b/src/BootstrapAdminUi/assets/styles/_flashes.scss
@@ -0,0 +1,14 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.alert {
+  .close {
+    cursor: pointer;
+  }
+}
diff --git a/src/BootstrapAdminUi/assets/styles/main.scss b/src/BootstrapAdminUi/assets/styles/main.scss
@@ -15,6 +15,7 @@
 
 @import "alert";
 @import "datatable";
+@import "flashes";
 @import "form";
 @import "navbar";
 @import "icons";

diff --git a/src/BootstrapAdminUi/public/app.css b/src/BootstrapAdminUi/public/app.css
diff --git a/src/BootstrapAdminUi/public/app.rtl.css b/src/BootstrapAdminUi/public/app.rtl.css
diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
@@ -17,23 +17,28 @@
                     {{ sylius_test_html_attribute('sylius-flash-message') }}
                     {{ sylius_test_html_attribute('sylius-flash-message-type', type) }}
                 >
-                    <div class="d-flex">
-                        <div>
-                            {{ ux_icon(icons[type]) }}
-                        </div>
-                        <div class="mx-2">
-                            <h4 class="alert-title">
-                                {% set header = 'sylius.ui.' ~ type %}
-                                {{ header|trans }}
-                            </h4>
-                            <div class="text-secondary">
-                                {% if flash is iterable %}
-                                    {{ flash.message|trans(flash.parameters, 'flashes') }}
-                                {% else %}
-                                    {{ flash|trans({}, 'flashes') }}
-                                {% endif %}
+                    <div class="d-flex justify-content-between">
+                        <div class="d-flex">
+                            <div>
+                                {{ ux_icon(icons[type]) }}
+                            </div>
+                            <div class="mx-2">
+                                <h4 class="alert-title">
+                                    {% set header = 'sylius.ui.' ~ type %}
+                                    {{ header|trans }}
+                                </h4>
+                                <div class="text-secondary">
+                                    {% if flash is iterable %}
+                                        {{ flash.message|trans(flash.parameters, 'flashes') }}
+                                    {% else %}
+                                        {{ flash|trans({}, 'flashes') }}
+                                    {% endif %}
+                                </div>
                             </div>
                         </div>
+                        <span class="justify-self-end close" data-bs-dismiss="alert" aria-label="Close">
+                            {{ ux_icon('tabler:x') }}
+                        </span>
                     </div>
                 </div>
             {% endfor %}