[BUGFIX] Add severity classes to flash messages (#76)

Fixes: #75 Releases: master, 9.1, 9.0, 8.7
TYPO3GmbH · May 3, 2019 · cfbacfa · cfbacfa
1 parent dfc4767
commit cfbacfa
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/Configuration/TypoScript/Static/setup.typoscript b/Configuration/TypoScript/Static/setup.typoscript
@@ -134,6 +134,16 @@ plugin.tx_blog {
     pageInfo.sharingEnabled {
         data = page:sharing_enabled
     }
+    _CSS_DEFAULT_STYLE (
+        .alert__title {
+            font-weight: bold;
+        }
+        .alert__list {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+    )
 }
 
 lib.blog.pageInfo < plugin.tx_blog.pageInfo

diff --git a/Resources/Private/Partials/General/FlashMessages.html b/Resources/Private/Partials/General/FlashMessages.html
@@ -1,7 +1,15 @@
 <f:flashMessages as="flashMessages">
     <f:for each="{flashMessages}" as="flashMessage">
-        <div class="alert {flashMessage.class}" role="alert">
-            <strong>{flashMessage.title}</strong> {flashMessage.message}
+        <f:switch expression="{flashMessage.severity}">
+            <f:case value="-1"><f:variable name="class" value="info" /></f:case>
+            <f:case value="0"><f:variable name="class" value="success" /></f:case>
+            <f:case value="1"><f:variable name="class" value="warning" /></f:case>
+            <f:case value="2"><f:variable name="class" value="danger" /></f:case>
+            <f:defaultCase><f:variable name="class" value="notice" /></f:defaultCase>
+        </f:switch>
+        <div class="alert alert-{class}" role="alert">
+            <div class="alert__title">{flashMessage.title}</div>
+            <div class="alert__message">{flashMessage.message}</div>
         </div>
     </f:for>
-</f:flashMessages>
+</f:flashMessages>
diff --git a/Resources/Private/Partials/General/FormErrors.html b/Resources/Private/Partials/General/FormErrors.html
@@ -1,13 +1,17 @@
 <f:form.validationResults>
     <f:if condition="{validationResults.flattenedErrors}">
-    <dl class="errors">
-        <f:for each="{validationResults.flattenedErrors}" as="errors" key="propertyPath">
-        <dd class="alert alert-danger" role="alert"><!-- {propertyPath} -->
-            <f:for each="{errors}" as="error">
-                <!-- {error.code}: -->{error}
+        <div class="errors">
+            <f:for each="{validationResults.flattenedErrors}" as="errors" key="propertyPath">
+                <div class="alert alert-danger" role="alert">
+                    <div class="alert__message">
+                        <ul class="alert__list">
+                            <f:for each="{errors}" as="error">
+                                <li><span>{error}</span></li>
+                            </f:for>
+                        </ul>
+                    </div>
+                </div>
             </f:for>
-        </dd>
-        </f:for>
-    </dl>
+        </div>
     </f:if>
-</f:form.validationResults>
+</f:form.validationResults>
diff --git a/Resources/Private/Templates/Comment/AddComment.html b/Resources/Private/Templates/Comment/AddComment.html
@@ -1,8 +1 @@
-<f:flashMessages as="flashMessages">
-    <f:for each="{flashMessages}" as="flashMessage">
-        <div class="alert alert-{flashMessage.class}" role="alert">
-            <strong>{flashMessage.title}</strong> {flashMessage.message}
-        </div>
-    </f:for>
-</f:flashMessages>
-
+<f:render partial="General/FlashMessages"/>