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 1bd7c84d9b625ebfb79bb3bef879e0df485df385..955bfe7d10a803bc4404b0491f918a36f525c577 100644 (file)
--- 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 9226e0a32c643184d573e3090f2b7c1f5186d876..e6823b0cb94fb0be84dc45a9de3e7a2cfede9665 100644 (file)
--- 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 7d655bd69f79b5cc52116a902f40face8aa4916b..9067e15019bc6bb2ce01e8ea783f362dbee04ee4 100644 (file)
--- 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 e6b553506746a27a1e3ee4085f396002f887c2e5..409828fbabd43ecb0bbcae59d0a2435b6af40a74 100644 (file)
--- 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 98458ec30af21c0e5bb1a40047e89d79f155ae35..be0488be09bf67ceb7a02adb2f203e27348ceec1 100644 (file)
--- 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 5c0df85f072a1e91e72a35dd3e50da6adc91ba90..8459ffb88da3c01e10796c068b81ccbbc6635174 100644 (file)
--- 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 7b8ea16ac18e67aeb7ea034b70625850d09f82f3..ef2301e26b0f8543d85c74fce682f04acfb4aade 100644 (file)
--- 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