Refactored flash messages

Author: benatespina

src/LIN3S/AdminBundle/Resources/private/scss/app.scss

@@ -11,13 +11,12 @@
 @import 'base/reset';
 @import 'base/common';
 
-@import '../node_modules/lin3s-front-foundation/src/scss/atoms/_parsley-form-error.scss';
-
 @import 'components/button';
 @import 'components/confirm-dialog';
-@import 'components/flash';
+@import 'components/flash-message';
 @import 'components/form';
 @import 'components/form-collection';
+@import 'components/form-error';
 @import 'components/filter';
 @import 'components/header';
 @import 'components/layout';

…rces/private/scss/components/_flash.scss …vate/scss/components/_flash-message.scsssrc/LIN3S/AdminBundle/Resources/private/scss/components/_flash.scss renamed to src/LIN3S/AdminBundle/Resources/private/scss/components/_flash-message.scss src/LIN3S/AdminBundle/Resources/private/scss/components/_flash.scss renamed to src/LIN3S/AdminBundle/Resources/private/scss/components/_flash-message.scss

@@ -11,19 +11,19 @@
 @import '../variables/typography';
 @import '../helpers/panel';
 
-$flash-success-color: $color-chateau-green !default;
-$flash-error-color: $color-thunderbird !default;
+$flash-message-success-color: $color-chateau-green !default;
+$flash-message-error-color: $color-thunderbird !default;
 
-.flash {
+.flash-message {
   @extend %panel;
   margin-bottom: 30px;
   padding: 10px 15px;
 }
 
-.flash--success {
-  border-left: 3px solid $flash-success-color;
+.flash-message--success {
+  border-left: 3px solid $flash-message-success-color;
 }
 
-.flash--error {
-  border-left: 3px solid $flash-error-color;
+.flash-message--error {
+  border-left: 3px solid $flash-message-error-color;
 }

src/LIN3S/AdminBundle/Resources/private/scss/components/_form-error.scss

@@ -0,0 +1,10 @@
+// This file is part of the Admin Bundle.
+//
+// Copyright (c) 2015-present LIN3S <info@lin3s.com>
+//
+// For the full copyright and license information, please view the LICENSE
+// file that was distributed with this source code.
+//
+// @author Beñat Espiña <benatespina@gmail.com>
+
+@import '../../node_modules/lin3s-front-foundation/src/scss/atoms/_parsley-form-error.scss';

src/LIN3S/AdminBundle/Resources/views/components/flash_message.html.twig

@@ -0,0 +1,3 @@
+<div class="flash-message {% if type is defined and type == 'error' %}flash-message--error{% else %}flash-message--success{% endif %}">
+    {{ flash_message }}
+</div>

src/LIN3S/AdminBundle/Resources/views/components/macros/flash_messages.html.twig

@@ -0,0 +1,12 @@
+{% macro success(message) %}
+    {% include 'Lin3sAdminBundle:components:flash_message.html.twig' with {
+        flash_message: message
+    } %}
+{% endmacro %}
+
+{% macro error(message) %}
+    {% include 'Lin3sAdminBundle:components:flash_message.html.twig' with {
+        type: 'error',
+        flash_message: message
+    } %}
+{% endmacro %}

src/LIN3S/AdminBundle/Resources/views/layout.html.twig

@@ -53,9 +53,19 @@
                     </div>
                 </header>
                 {% block lin3s_admin_flash_messages %}
-                    {% include 'Lin3sAdminBundle:partial:flash.html.twig' %}
+                    {% import 'Lin3sAdminBundle:components/macros:flash_messages.html.twig' as flash_messages %}
+
+                    {% for message in app.session.flashbag.get('lin3s_admin_error') %}
+                        {{ flash_messages.error(message) }}
+                    {% endfor %}
+
+                    {% for message in app.session.flashbag.get('lin3s_admin_success') %}
+                        {{ flash_messages.success(message) }}
+                    {% endfor %}
                 {% endblock %}
+
                 {% block lin3s_admin_content_top %}{% endblock %}
+
                 {% block lin3s_admin_content %}{% endblock %}
             </div>
         </main>