Added batch flash message template (#657)

docs/reference/flash_messages.rst

@@ -9,6 +9,27 @@ to be returned as a ``success``, ``warning`` or ``error`` type (or even all your
 
 Additionally, you can also add a ``css_class`` section for each flash messages that will be displayed on rendering.
 
+An Example of type ``success``
+
+.. figure:: ../images/normal_flashmessage.png
+   :align: center
+   :alt: Default Flashmessage
+
+When there are more than one flasmessage of a type (``success``, ``warning`` or ``error``),
+the flashmessages automatically group.
+
+Grouped flashmessage (collapsed)
+
+.. figure:: ../images/collapsed_flashmessage.png
+   :align: center
+   :alt: Grouped Flashmessage (collapsed)
+
+Grouped flashmessage (expanded)
+
+.. figure:: ../images/expanded_flashmessage.png
+   :align: center
+   :alt: Grouped Flashmessage (expanded)
+
 Configuration
 -------------
 

src/CoreBundle/Resources/public/css/flashmessage.css

@@ -0,0 +1,28 @@
+.read-more-state {
+    display: none;
+}
+
+.read-more-target {
+    opacity: 0;
+    display: none;
+    max-height: 0;
+    font-size: 0;
+    transition: .40s ease;
+}
+
+.read-more-state:checked ~ .read-more-wrap .read-more-target {
+    opacity: 1;
+    display: block;
+    font-size: inherit;
+    max-height: 999em;
+}
+
+.read-more-trigger {
+    cursor: pointer;
+    margin: auto;
+}
+
+.alert .read-more-trigger {
+    position: relative;
+    left: calc(50% - 1rem);
+}

src/CoreBundle/Resources/public/js/base.js

@@ -1,5 +1,7 @@
 jQuery(document).ready(function() {
     SonataCore.setup_select2(document);
+    SonataCore.remove_iCheck_in_flashmessage();
+    SonataCore.addFlashmessageListener();
 });
 
 var SonataCore = {
@@ -35,6 +37,25 @@ var SonataCore = {
                 ;
             }
         });
+    },
+    remove_iCheck_in_flashmessage: () => {
+        jQuery('.read-more-state').iCheck('destroy');
+    },
+    addFlashmessageListener: () => {
+        document.querySelectorAll('.read-more-state').forEach((element) => {
+            element.addEventListener('change', (event) => {
+                let label = document.querySelector('label[for="' + element.id + '"]')
+                let labelMore = label.querySelector('.more')
+                let labelLess = label.querySelector('.less')
+
+                if (event.target.checked) {
+                    labelMore.classList.add('hide')
+                    labelLess.classList.remove('hide')
+                } else {
+                    labelMore.classList.remove('hide')
+                    labelLess.classList.add('hide')
+                }
+            });
+        })
     }
-
 };

src/CoreBundle/Resources/translations/SonataCoreBundle.de.xliff

@@ -602,6 +602,14 @@
                 <source>message_close</source>
                 <target>Schließen</target>
             </trans-unit>
+            <trans-unit id="more">
+                <source>more</source>
+                <target>mehr</target>
+            </trans-unit>
+            <trans-unit id="less">
+                <source>less</source>
+                <target>weniger</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

src/CoreBundle/Resources/translations/SonataCoreBundle.en.xliff

@@ -602,6 +602,14 @@
                 <source>message_close</source>
                 <target>Close</target>
             </trans-unit>
+            <trans-unit id="more">
+                <source>more</source>
+                <target>more</target>
+            </trans-unit>
+            <trans-unit id="less">
+                <source>less</source>
+                <target>less</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

src/CoreBundle/Resources/views/FlashMessage/render.html.twig

@@ -8,18 +8,48 @@ For the full copyright and license information, please view the LICENSE
 file that was distributed with this source code.
 
 #}
+
 {% for type in sonata_flashmessages_types() %}
     {% set domain = domain is defined ? domain : null %}
-    {% for message in sonata_flashmessages_get(type, domain) %}
+    {% set messages = sonata_flashmessages_get(type, domain) %}
+    {% if messages|length > 1 %}
+        <div class="alert alert-{{ type|sonata_status_class }} alert-dismissible collapsed-box">
+            <button
+                    type="button"
+                    class="close"
+                    data-dismiss="alert"
+                    aria-hidden="true"
+                    aria-label="{{ 'message_close'|trans({}, 'SonataCoreBundle') }}">
+                &times;
+            </button>
+            <input type="checkbox" class="read-more-state" id="toggle-more-{{ loop.index }}" />
+            <div class="read-more-wrap">
+                {% for message in messages %}
+                    {% if loop.index >= 2 %}
+                        <span class="read-more-target">{{ message|raw }}</span>
+                    {% else %}
+                        {{ message|raw }}
+                    {% endif %}
+                {% endfor %}
+            </div>
+
+            <label for="toggle-more-{{ loop.index }}" class="read-more-trigger">
+                <span class="more">{{ 'more'|trans({}, 'SonataCoreBundle') }} &#9660;</span>
+                <span class="less hide">{{ 'less'|trans({}, 'SonataCoreBundle') }} &#9650;</span>
+                <span class="badge badge-default">{{ messages|length }}</span>
+            </label>
+        </div>
+    {% elseif messages|length == 1 %}
         <div class="alert alert-{{ type|sonata_status_class }} alert-dismissable">
             <button
-                type="button"
-                class="close"
-                data-dismiss="alert"
-                aria-hidden="true"
-                aria-label="{{ 'message_close'|trans({}, 'SonataCoreBundle') }}"
-            >&times;</button>
-            {{ message|raw }}
+                    type="button"
+                    class="close"
+                    data-dismiss="alert"
+                    aria-hidden="true"
+                    aria-label="{{ 'message_close'|trans({}, 'SonataCoreBundle') }}">
+                &times;
+            </button>
+            {{ messages|first|raw }}
         </div>
-    {% endfor %}
+    {% endif %}
 {% endfor %}