From a790f18f85c612058428068e34039b37caa4a367 Mon Sep 17 00:00:00 2001
From: pfleu <pierre.fleutot@audemarspiguet.com>
Date: Thu, 25 Jan 2024 22:56:57 +0100
Subject: [PATCH] Messages flash : on les affiche par-dessus la page et ils
disparaissent au bout de quelques secondes
---
public/assets/css/app.css | 19 +++++++++++++++++++
public/assets/js/app.js | 12 ++++++++++++
templates/_flashMessages.html.twig | 3 +--
templates/base.html.twig | 6 ++----
templates/flashes.html.twig | 3 +--
templates/reloadFlashes.html.twig | 9 +++++++++
6 files changed, 44 insertions(+), 8 deletions(-)
create mode 100644 templates/reloadFlashes.html.twig
diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index d3771b7..c85ae9e 100755
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -604,4 +604,23 @@ audio::-webkit-media-controls-mute-button {
padding: 15px;
border-radius: 15px;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.63);
+}
+
+#flashes {
+ display: none;
+ width: fit-content;
+ min-width: 33%;
+ position: absolute;
+ top: 90px;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ z-index: 150;
+}
+#flashes .alert {
+ padding-left: 40px;
+ padding-right: 40px;
+ box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.63);
}
\ No newline at end of file
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index a9f22ab..c4ed772 100755
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -54,6 +54,7 @@ $(function() {
function initializeForm() {
initializeFieldsSelect2();
initializeOverlayOnClick();
+ initializeFlashes();
// initializeToggleFields();
// initializeClickableRows();
// initializePopover();
@@ -529,4 +530,15 @@ function initializeAjaxReload() {
}
});
})
+}
+
+function initializeFlashes() {
+ // show si content puis hide
+ $flashes = $('#flashes');
+ if ($flashes.find('.alert').length) {
+ $flashes.show();
+ window.setTimeout(function () {
+ $flashes.fadeOut(1000);
+ }, 4000);
+ }
}
\ No newline at end of file
diff --git a/templates/_flashMessages.html.twig b/templates/_flashMessages.html.twig
index 3610497..2f672d7 100644
--- a/templates/_flashMessages.html.twig
+++ b/templates/_flashMessages.html.twig
@@ -1,9 +1,8 @@
{% if app.session.started %}
{% for type, flashes in app.session.flashbag.all %}
{% for message in flashes %}
- <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
+ <div class="alert alert-{{ type }}" role="alert">
{{ message|trans|raw }}
- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endfor %}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 7498dde..b389d0e 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -40,10 +40,8 @@
{# {% for flashMessage in app.flashes('notice') %} <div class="alert alert-notice"> {{ flashMessage }} </div> {% endfor %}#}
- <div id="flashes" class="row mx-lg-5 mx-sm-3 text-center">
- <div class="col-md-12">
- {% include "_flashMessages.html.twig" %}
- </div>
+ <div id="flashes">
+ {% include "_flashMessages.html.twig" %}
</div>
{% endblock flash_messages %}
diff --git a/templates/flashes.html.twig b/templates/flashes.html.twig
index 2fb9959..2277bd5 100644
--- a/templates/flashes.html.twig
+++ b/templates/flashes.html.twig
@@ -3,9 +3,8 @@
{% if app.session.started %}
{% for type, flashes in app.session.flashbag.all %}
{% for message in flashes %}
- <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
+ <div class="alert alert-{{ type }}" role="alert">
{{ message|trans|raw }}
- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endfor %}
diff --git a/templates/reloadFlashes.html.twig b/templates/reloadFlashes.html.twig
new file mode 100644
index 0000000..49b3cae
--- /dev/null
+++ b/templates/reloadFlashes.html.twig
@@ -0,0 +1,9 @@
+<script id="refreshedFlashes" type="text/template">
+ {% include 'flashes.html.twig' %}
+</script>
+
+<script type="text/javascript">
+ $('#flashes').html($('#refreshedFlashes').html());
+ $('#refreshedFlashes').remove();
+ initializeFlashes();
+</script>
\ No newline at end of file
--
GitLab