From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Mon, 19 Feb 2024 23:17:52 +0000 (+0100)
Subject: Improve toasts messages display; refs #1786
X-Git-Tag: 1.0.3~5
X-Git-Url: https://git.agnieray.net/?a=commitdiff_plain;h=d67fb22be2b6610e2d58c04a577581ffcc55aedd;p=galette.git

Improve toasts messages display; refs #1786

Use top attached position variation
Use close icon
Use Progress bar on messages with display time
---

diff --git a/galette/lib/Galette/Controllers/AjaxController.php b/galette/lib/Galette/Controllers/AjaxController.php
index 1bd7c84d9..955bfe7d1 100644
--- a/galette/lib/Galette/Controllers/AjaxController.php
+++ b/galette/lib/Galette/Controllers/AjaxController.php
@@ -81,7 +81,7 @@ class AjaxController extends AbstractController
         if (count($errors) > 0) {
             $messages['error'] = [
                 'title' => _T('- ERROR -'),
-                'icon' => 'times',
+                'icon' => 'exclamation circle',
                 'messages' => $errors
             ];
         }
diff --git a/galette/templates/default/elements/js/messages.js.twig b/galette/templates/default/elements/js/messages.js.twig
index 9226e0a32..e6823b0cb 100644
--- a/galette/templates/default/elements/js/messages.js.twig
+++ b/galette/templates/default/elements/js/messages.js.twig
@@ -27,7 +27,9 @@ $('.message.with-transition')
             displayTime: 'auto',
             minDisplayTime: 5000,
             wordsPerMinute: 80,
-            position: 'top right',
+            showProgress: 'bottom',
+            closeIcon: true,
+            position: 'top attached',
             message: '{{ success|e('js') }}',
             showIcon: 'check circle outline',
             class: 'success'
@@ -55,7 +57,9 @@ $('.message.with-transition')
             displayTime: 'auto',
             minDisplayTime: 5000,
             wordsPerMinute: 80,
-            position: 'top right',
+            showProgress: 'bottom',
+            closeIcon: true,
+            position: 'top attached',
             title: '{{ info_title|e('js') }}',
             message: '{{ i|e('js') }}',
             showIcon: 'info',
@@ -85,9 +89,10 @@ $('.message.with-transition')
         $('body')
           .toast({
             displayTime: 0,
-            position: 'top right',
+            closeIcon: true,
+            position: 'top attached',
             message: '{{ error|e('js') }}',
-            showIcon: 'times',
+            showIcon: 'exclamation circle',
             class: 'error'
           })
         ;
@@ -106,7 +111,8 @@ $('.message.with-transition')
         $('body')
           .toast({
             displayTime: 0,
-            position: 'top right',
+            closeIcon: true,
+            position: 'top attached',
             message: '{{ warning|e('js') }}',
             showIcon: 'exclamation triangle',
             class: 'warning'
diff --git a/galette/templates/default/elements/js/removal.js.twig b/galette/templates/default/elements/js/removal.js.twig
index 7d655bd69..9067e1501 100644
--- a/galette/templates/default/elements/js/removal.js.twig
+++ b/galette/templates/default/elements/js/removal.js.twig
@@ -68,7 +68,9 @@
                                                         displayTime: dtime,
                                                         minDisplayTime: 5000,
                                                         wordsPerMinute: 80,
-                                                        position: 'top right',
+                                                        showProgress: 'bottom',
+                                                        closeIcon: true,
+                                                        position: 'top attached',
                                                         title: values[type]['title'],
                                                         message: values[type]['messages'].join('<br/>'),
                                                         showIcon: values[type]['icon'],
diff --git a/galette/templates/default/elements/messages_inline.html.twig b/galette/templates/default/elements/messages_inline.html.twig
index e6b553506..409828fba 100644
--- a/galette/templates/default/elements/messages_inline.html.twig
+++ b/galette/templates/default/elements/messages_inline.html.twig
@@ -16,7 +16,7 @@
 {% if errors is iterable and errors|length > 0 %}
     <noscript>
         <div class="ui error icon message">
-            <i class="times icon" aria-hidden="true"></i>
+            <i class="exclamation circle icon" aria-hidden="true"></i>
             <div class="content">
                 <div class="header">{{ _T("- ERROR -") }}</div>
                 {% if errors|length > 1 %}
diff --git a/galette/templates/default/pages/members_list.html.twig b/galette/templates/default/pages/members_list.html.twig
index 98458ec30..be0488be0 100644
--- a/galette/templates/default/pages/members_list.html.twig
+++ b/galette/templates/default/pages/members_list.html.twig
@@ -497,7 +497,9 @@
                                                     displayTime: dtime,
                                                     minDisplayTime: 5000,
                                                     wordsPerMinute: 80,
-                                                    position: 'top right',
+                                                    showProgress: 'bottom',
+                                                    closeIcon: true,
+                                                    position: 'top attached',
                                                     title: values[type]['title'],
                                                     message: values[type]['messages'].join('<br/>'),
                                                     showIcon: values[type]['icon'],
diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 5c0df85f0..8459ffb88 100644
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -955,7 +955,9 @@
                                                         displayTime: dtime,
                                                         minDisplayTime: 5000,
                                                         wordsPerMinute: 80,
-                                                        position: 'top right',
+                                                        showProgress: 'bottom',
+                                                        closeIcon: true,
+                                                        position: 'top attached',
                                                         title: values[type]['title'],
                                                         message: values[type]['messages'].join('<br/>'),
                                                         showIcon: values[type]['icon'],
diff --git a/semantic.json b/semantic.json
index 7b8ea16ac..ef2301e26 100644
--- a/semantic.json
+++ b/semantic.json
@@ -18,6 +18,6 @@
   "permission": "644",
   "autoInstall": true,
   "rtl": "both",
-  "components": ["reset", "site", "button", "container", "divider", "header", "icon", "input", "label", "list", "loader", "segment", "step", "form", "grid", "menu", "message", "table", "card", "item", "accordion", "checkbox", "dimmer", "dropdown", "popup", "sidebar", "tab", "transition", "text", "calendar", "toast", "modal", "api", "search", "emoji"],
+  "components": ["reset", "site", "button", "container", "divider", "header", "icon", "input", "label", "list", "loader", "segment", "step", "form", "grid", "menu", "message", "table", "card", "item", "accordion", "checkbox", "dimmer", "dropdown", "popup", "sidebar", "tab", "transition", "text", "calendar", "progress", "toast", "modal", "api", "search", "emoji"],
   "version": "2.9.3"
 }
\ No newline at end of file