From 073be79c6c9eedd949ab183ab8c2c8cc5b448d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Fr=C3=A9mont?= <lc.fremont@gmail.com>
Date: Tue, 10 Dec 2024 09:37:27 +0100
Subject: [PATCH 1/2] [BootstrapAdminUi] Close button to flash messages

---
 .../assets/styles/_flashes.scss               | 14 ++++++
 src/BootstrapAdminUi/assets/styles/main.scss  |  1 +
 src/BootstrapAdminUi/public/app.css           |  7 +++
 src/BootstrapAdminUi/public/app.rtl.css       |  7 +++
 .../crud/common/content/flashes.html.twig     | 43 +++++++++++--------
 5 files changed, 53 insertions(+), 19 deletions(-)
 create mode 100644 src/BootstrapAdminUi/assets/styles/_flashes.scss

diff --git a/src/BootstrapAdminUi/assets/styles/_flashes.scss b/src/BootstrapAdminUi/assets/styles/_flashes.scss
new file mode 100644
index 00000000..c5628ed0
--- /dev/null
+++ 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
index 247ca512..570d77d2 100644
--- 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
index 5be68ca1..40602eae 100644
--- a/src/BootstrapAdminUi/public/app.css
+++ b/src/BootstrapAdminUi/public/app.css
@@ -40,6 +40,13 @@
  *
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
+ */.alert .close{cursor:pointer}/*!
+ * 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.
  */textarea.form-control{height:12rem;min-height:8rem}.accordion-item:has(.accordion-error),.list-group-item.active:has(.tab-error),.list-group-item:has(.tab-error){border-left:2px solid #ff0017}.form-select:disabled{color:var(--tblr-gray-600)}.input-group{box-shadow:none}.input-group .form-check{flex-grow:1}.input-group .input-group-text{color:var(--tblr-gray-600)}.form-control:focus{box-shadow:none}/*!
  * This file is part of the Sylius package.
  *
diff --git a/src/BootstrapAdminUi/public/app.rtl.css b/src/BootstrapAdminUi/public/app.rtl.css
index 77f3ca4a..eb9db02f 100644
--- a/src/BootstrapAdminUi/public/app.rtl.css
+++ b/src/BootstrapAdminUi/public/app.rtl.css
@@ -40,6 +40,13 @@
  *
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
+ */.alert .close{cursor:pointer}/*!
+ * 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.
  */textarea.form-control{height:12rem;min-height:8rem}.accordion-item:has(.accordion-error),.list-group-item.active:has(.tab-error),.list-group-item:has(.tab-error){border-right:2px solid #ff0017}.form-select:disabled{color:var(--tblr-gray-600)}.input-group{box-shadow:none}.input-group .form-check{flex-grow:1}.input-group .input-group-text{color:var(--tblr-gray-600)}.form-control:focus{box-shadow:none}/*!
  * This file is part of the Sylius package.
  *
diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
index c642fc20..de401776 100644
--- a/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
+++ b/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
@@ -12,28 +12,33 @@
         {% for type in ['success', 'error', 'info', 'warning'] %}
             {% for flash in session.flashbag.get(type) %}
                 <div
-                    class="sylius alert alert-{{ type == 'error' ? 'danger' : type }}"
-                    role="alert"
-                    {{ sylius_test_html_attribute('sylius-flash-message') }}
-                    {{ sylius_test_html_attribute('sylius-flash-message-type', type) }}
+                        class="sylius alert alert-{{ type == 'error' ? 'danger' : type }}"
+                        role="alert"
+                        {{ 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 %}

From ce0434f8e16fc80668eaaec117f50a50e2c40dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Fr=C3=A9mont?= <lc.fremont@gmail.com>
Date: Tue, 10 Dec 2024 14:01:20 +0100
Subject: [PATCH 2/2] Update
 src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig

Co-authored-by: Dmitri Perunov <diimpp@gmail.com>
---
 .../shared/crud/common/content/flashes.html.twig          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
index de401776..c3ca4b3a 100644
--- a/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
+++ b/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
@@ -12,10 +12,10 @@
         {% for type in ['success', 'error', 'info', 'warning'] %}
             {% for flash in session.flashbag.get(type) %}
                 <div
-                        class="sylius alert alert-{{ type == 'error' ? 'danger' : type }}"
-                        role="alert"
-                        {{ sylius_test_html_attribute('sylius-flash-message') }}
-                        {{ sylius_test_html_attribute('sylius-flash-message-type', type) }}
+                    class="sylius alert alert-{{ type == 'error' ? 'danger' : type }}"
+                    role="alert"
+                    {{ sylius_test_html_attribute('sylius-flash-message') }}
+                    {{ sylius_test_html_attribute('sylius-flash-message-type', type) }}
                 >
                     <div class="d-flex justify-content-between">
                         <div class="d-flex">