Merge pull request #643 from creative-commoners/pulls/4.3/bootstrap-a…

…lerts NEW Use Bootstrap alerts throughout the CMS
silverstripe · Nov 9, 2018 · 58fab47 · 58fab47
2 parents 81aaa37 + f11cd44
commit 58fab47
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 16 deletions.
diff --git a/_config/forms.yml b/_config/forms.yml
@@ -4,3 +4,11 @@ Name: adminforms
 SilverStripe\Forms\GridField\GridFieldPrintButton:
   extensions:
     - SilverStripe\Admin\Forms\GridFieldPrintButtonExtension
+
+SilverStripe\Forms\Form:
+  extensions:
+  - SilverStripe\Forms\FormMessageBootstrapExtension
+
+SilverStripe\Forms\FormField:
+  extensions:
+  - SilverStripe\Forms\FormMessageBootstrapExtension
diff --git a/code/Forms/FormMessageBootstrapAdapter.php b/code/Forms/FormMessageBootstrapAdapter.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace SilverStripe\Forms;
+
+use SilverStripe\Core\Extension;
+
+/**
+ * Will convert a SilverStripe message type into a Bootstrap alert type
+ */
+class FormMessageBootstrapExtension extends Extension
+{
+    /**
+     * @var string[]
+     */
+    protected $bootstrapAlertsMap = [
+        'good' => 'alert-success',
+        'bad' => 'alert-danger',
+        'required' => 'alert-danger',
+        'warning' => 'alert-warning',
+    ];
+
+    /**
+     * Maps a SilverStripe message type to a Bootstrap alert type
+     *
+     * {@inheritdoc}
+     */
+    public function getAlertType()
+    {
+        $type = $this->owner->getMessageType();
+
+        if (isset($this->bootstrapAlertsMap[$type])) {
+            return $this->bootstrapAlertsMap[$type];
+        }
+
+        // Fallback to original
+        return $type;
+    }
+}
diff --git a/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss b/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss
@@ -2,9 +2,9 @@
 
 	<div class="panel panel--padded panel--scrollable flexbox-area-grow cms-content-fields">
 		<% if $Message %>
-		<p id="{$FormName}_error" class="message $MessageType">$Message</p>
+		<p id="{$FormName}_error" class="alert $AlertType">$Message</p>
 		<% else %>
-		<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
+		<p id="{$FormName}_error" class="alert $AlertType" style="display: none"></p>
 		<% end_if %>
 
 		<fieldset>

diff --git a/templates/SilverStripe/Admin/Includes/LeftAndMain_EditForm.ss b/templates/SilverStripe/Admin/Includes/LeftAndMain_EditForm.ss
@@ -29,9 +29,9 @@
 
 	<div class="panel panel--padded panel--scrollable flexbox-area-grow <% if not $Fields.hasTabset %>cms-panel-padded<% end_if %>">
 		<% if $Message %>
-		<p id="{$FormName}_error" class="message $MessageType">$Message</p>
+		<p id="{$FormName}_error" class="alert $AlertType">$Message</p>
 		<% else %>
-		<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
+		<p id="{$FormName}_error" class="alert $AlertType" style="display: none"></p>
 		<% end_if %>
 
 		<fieldset>

diff --git a/themes/cms-forms/templates/RightLabelledFieldHolder.ss b/themes/cms-forms/templates/RightLabelledFieldHolder.ss
@@ -0,0 +1,5 @@
+<p id="$Name" class="field $Type">
+	$Field
+	<label class="right" for="$id">$Title</label>
+	<% if $Message %><span class="alert $AlertType">$Message</span><% end_if %>
+</p>
diff --git a/themes/cms-forms/templates/SilverStripe/Forms/CheckboxField_holder.ss b/themes/cms-forms/templates/SilverStripe/Forms/CheckboxField_holder.ss
@@ -4,8 +4,7 @@
             $Field
             $Title
         </label>
-		<%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
-        <% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+        <% if $Message %><p class="alert $AlertType" role="alert" id="message-$ID">$Message</p><% end_if %>
         <% if $Description %><p class="form__field-description form-text" id="describes-$ID">$Description</p><% end_if %>
     </div>
     <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>

diff --git a/themes/cms-forms/templates/SilverStripe/Forms/CompositeField_holder.ss b/themes/cms-forms/templates/SilverStripe/Forms/CompositeField_holder.ss
@@ -8,8 +8,7 @@
 			<% if $Zebra %> form__fieldgroup-zebra<% end_if %>"
 	>
 		$Field
-        <%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
-		<% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+		<% if $Message %><p class="alert $AlertType" role="alert" id="message-$ID">$Message</p><% end_if %>
         <% if $Description %><p class="form__field-description form-text" id="describes-$ID">$Description</p><% end_if %>
 	</$Tag>
     <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>

diff --git a/themes/cms-forms/templates/SilverStripe/Forms/DatetimeField_holder.ss b/themes/cms-forms/templates/SilverStripe/Forms/DatetimeField_holder.ss
@@ -8,8 +8,7 @@
 			<% if $extraClass %> $extraClass<% end_if %>"
 	>
 		$Field
-        <%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
-		<% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+		<% if $Message %><p class="alert $AlertType" role="alert" id="message-$ID">$Message</p><% end_if %>
         <% if $Description %><p class="form__field-description form-text" id="describes-$ID">$Description</p><% end_if %>
 	</div>
     <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>

diff --git a/themes/cms-forms/templates/SilverStripe/Forms/FieldGroup_holder.ss b/themes/cms-forms/templates/SilverStripe/Forms/FieldGroup_holder.ss
@@ -9,8 +9,7 @@
 			<% if $extraClass %> $extraClass<% end_if %>"
 	>
 		$Field
-        <%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
-		<% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+		<% if $Message %><p class="alert $AlertType" role="alert" id="message-$ID">$Message</p><% end_if %>
         <% if $Description %><p class="form__field-description form-text" id="describes-$ID">$Description</p><% end_if %>
 	</div>
     <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>

diff --git a/themes/cms-forms/templates/SilverStripe/Forms/FormField_holder.ss b/themes/cms-forms/templates/SilverStripe/Forms/FormField_holder.ss
@@ -4,8 +4,7 @@
     <% end_if %>
     <div class="form__field-holder<% if not $Title %> form__field-holder--no-label<% end_if %>">
         $Field
-        <%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
-        <% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+        <% if $Message %><p class="alert $AlertType" role="alert" id="message-$ID">$Message</p><% end_if %>
         <% if $Description %><p class="form__field-description form-text" id="describes-$ID">$Description</p><% end_if %>
     </div>
     <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>

diff --git a/themes/cms-forms/templates/SilverStripe/Forms/Includes/Form.ss b/themes/cms-forms/templates/SilverStripe/Forms/Includes/Form.ss
@@ -0,0 +1,27 @@
+<% if $IncludeFormTag %>
+<form $AttributesHTML>
+<% end_if %>
+	<% if $Message %>
+	<p id="{$FormName}_error" class="alert $AlertType">$Message</p>
+	<% else %>
+	<p id="{$FormName}_error" class="alert $AlertType" style="display: none"></p>
+	<% end_if %>
+
+	<fieldset>
+		<% if $Legend %><legend>$Legend</legend><% end_if %>
+		<% loop $Fields %>
+			$FieldHolder
+		<% end_loop %>
+		<div class="clear"><!-- --></div>
+	</fieldset>
+
+	<% if $Actions %>
+	<div class="btn-toolbar">
+		<% loop $Actions %>
+			$Field
+		<% end_loop %>
+	</div>
+	<% end_if %>
+<% if $IncludeFormTag %>
+</form>
+<% end_if %>
diff --git a/themes/cms-forms/templates/SilverStripe/Forms/OptionsetField_holder.ss b/themes/cms-forms/templates/SilverStripe/Forms/OptionsetField_holder.ss
@@ -4,8 +4,7 @@
     <% end_if %>
     <div class="form__field-holder<% if not $Title %> form__field-holder--no-label<% end_if %>">
         $Field
-        <%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
-        <% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+        <% if $Message %><p class="alert $AlertType" role="alert" id="message-$ID">$Message</p><% end_if %>
         <% if $Description %><p class="form__field-description form-text" id="describes-$ID">$Description</p><% end_if %>
     </div>
     <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>