Add decorator FormDescriptions

This decorator displays a list of messages at the top of a form.

refs #7947

library/Icinga/Web/Form.php

@@ -126,6 +126,13 @@ class Form extends Zend_Form
      */
     protected $requiredCue = '*';
 
+    /**
+     * The descriptions of this form
+     *
+     * @var array
+     */
+    protected $descriptions;
+
     /**
      * Authentication manager
      *
@@ -436,6 +443,49 @@ class Form extends Zend_Form
         return $this->requiredCue;
     }
 
+    /**
+     * Set the descriptions for this form
+     *
+     * @param   array   $descriptions
+     *
+     * @return  Form
+     */
+    public function setDescriptions(array $descriptions)
+    {
+        $this->descriptions = $descriptions;
+        return $this;
+    }
+
+    /**
+     * Add a description for this form
+     *
+     * If $description is an array the second value should be
+     * an array as well containing additional HTML properties.
+     *
+     * @param   string|array    $description
+     *
+     * @return  Form
+     */
+    public function addDescription($description)
+    {
+        $this->descriptions[] = $description;
+        return $this;
+    }
+
+    /**
+     * Return the descriptions of this form
+     *
+     * @return  array
+     */
+    public function getDescriptions()
+    {
+        if ($this->descriptions === null) {
+            return array();
+        }
+
+        return $this->descriptions;
+    }
+
     /**
      * Create this form
      *
@@ -860,6 +910,7 @@ class Form extends Zend_Form
                 ));
             } else {
                 $this->addDecorator('FormErrors', array('onlyCustomFormErrors' => true))
+                    ->addDecorator('FormDescriptions')
                     ->addDecorator('FormElements')
                     //->addDecorator('HtmlTag', array('tag' => 'dl', 'class' => 'zend_form'))
                     ->addDecorator('Form');

library/Icinga/Web/Form/Decorator/FormDescriptions.php

@@ -0,0 +1,55 @@
+<?php
+/* Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
+namespace Icinga\Web\Form\Decorator;
+
+use Zend_Form_Decorator_Abstract;
+use Icinga\Web\Form;
+
+/**
+ * Decorator to add a list of descriptions at the top of a form
+ */
+class FormDescriptions extends Zend_Form_Decorator_Abstract
+{
+    /**
+     * Render form descriptions
+     *
+     * @param   string      $content    The html rendered so far
+     *
+     * @return  string                  The updated html
+     */
+    public function render($content = '')
+    {
+        $form = $this->getElement();
+        if (! $form instanceof Form) {
+            return $content;
+        }
+
+        $view = $form->getView();
+        if ($view === null) {
+            return $content;
+        }
+
+        $descriptions = $form->getDescriptions();
+        if (empty($descriptions)) {
+            return $content;
+        }
+
+        $html = '<ul class="descriptions">';
+        foreach ($descriptions as $description) {
+            if (is_array($description)) {
+                list($description, $properties) = $description;
+                $html .= '<li' . $view->propertiesToString($properties) . '>' . $view->escape($description) . '</li>';
+            } else {
+                $html .= '<li>' . $view->escape($description) . '</li>';
+            }
+        }
+
+        switch ($this->getPlacement()) {
+            case self::APPEND:
+                return $content . $html . '</ul>';
+            case self::PREPEND:
+                return $html . '</ul>' . $content;
+        }
+    }
+}

public/css/icinga/forms.less

@@ -126,10 +126,10 @@ input.link-like:hover, button.link-like:focus {
 .non-list-like-list {
   list-style-type: none;
   margin: 0;
-  padding: 0;
+  padding: 0.5em 0.5em 0;
 
   li {
-    margin: 0.5em;
+    padding-bottom: 0.5em;
   }
 }
 
@@ -146,12 +146,16 @@ form div.element ul.errors {
 
 form ul.form-errors {
   .non-list-like-list;
-  display: inline-block;
   margin-bottom: 1em;
   background-color: @colorCritical;
 
   ul.errors {
     .non-list-like-list;
+    padding: 0;
+
+    li:last-child {
+      padding-bottom: 0;
+    }
   }
 
   li {
@@ -209,4 +213,18 @@ button.noscript-apply {
 
 html.no-js i.autosubmit-warning {
   .sr-only;
+}
+
+form ul.descriptions {
+  .info-box;
+  padding: 0.5em 0.5em 0 1.8em;
+
+  li {
+    padding-bottom: 0.5em;
+
+    &:only-child {
+      margin-left: -1.3em;
+      list-style-type: none;
+    }
+  }
 }

public/css/icinga/main-content.less

@@ -206,5 +206,5 @@ table.benchmark {
 .info-box {
   padding: 0.5em;
   border: 1px solid lightgrey;
-  background-color: infobackground;
+  background-color: #fbfcc5;
 }