Fix SortBox widget

refs #7876

library/Icinga/Web/Controller.php

@@ -14,15 +14,15 @@ use Icinga\Web\Widget\SortBox;
 class Controller extends ModuleActionController
 {
     /**
-     * Create a sort control box at the 'sortControl' view parameter
+     * Create a SortBox widget at the `sortBox' view property
      *
-     * @param array $columns    An array containing the sort columns, with the
+     * @param   array   $columns    An array containing the sort columns, with the
-     *                          submit value as the key and the label as the value
+     *                               submit value as the key and the label as the value
      */
     protected function setupSortControl(array $columns)
     {
         $req = $this->getRequest();
-        $this->view->sortControl = SortBox::create(
+        $this->view->sortBox = SortBox::create(
             'sortbox-' . $req->getActionName(),
             $columns
         )->applyRequest($req);

library/Icinga/Web/StyleSheet.php

@@ -26,7 +26,8 @@ class StyleSheet
         'css/icinga/pagination.less',
         'css/icinga/monitoring-colors.less',
         'css/icinga/selection-toolbar.less',
-        'css/icinga/login.less'
+        'css/icinga/login.less',
+        'css/icinga/controls.less'
     );
 
     public static function compileForPdf()

library/Icinga/Web/Widget/SortBox.php

@@ -3,64 +3,57 @@
 
 namespace Icinga\Web\Widget;
 
-use Zend_Form_Element_Submit;
 use Icinga\Web\Form;
 use Icinga\Web\Request;
-use Icinga\Web\Form\Decorator\ConditionalHidden;
 
 /**
- *  Sortbox widget
+ * SortBox widget
  *
- *  The "SortBox" Widget allows you to create a generic sort input for sortable views.
+ * The "SortBox" Widget allows you to create a generic sort input for sortable views. It automatically creates a form
- *  It automatically creates a form containing a select box with all sort options and a
+ * containing a select box with all sort options and a dropbox with the sort direction. It also handles automatic
- *  dropbox with the sort direction. It also handles automatic submission of sorting changes and draws an additional
+ * submission of sorting changes and draws an additional submit button when JavaScript is disabled.
- *  submit button when JavaScript is disabled.
  *
- *  The constructor takes an string for the component name ad an array containing the select options, where the key is
+ * The constructor takes an string for the component name and an array containing the select options, where the key is
- *  the value to be submitted and the value is the label that will be shown. You then should call applyRequest in order
+ * the value to be submitted and the value is the label that will be shown. You then should call applyRequest in order
- *  to  make sure the form is correctly populated when a request with a sort parameter is being made.
+ * to  make sure the form is correctly populated when a request with a sort parameter is being made.
  *
- *  Example:
+ * Example:
- *      <pre><code>
+ *  <pre><code>
  *      $this->view->sortControl = new SortBox(
- *      $this->getRequest()->getActionName(),
+ *          $this->getRequest()->getActionName(),
  *          $columns
  *      );
  *      $this->view->sortControl->applyRequest($this->getRequest());
- *      </code></pre>
+ *  </code></pre>
- * By default the sortBox uses the GET parameter 'sort' for the sorting key and 'dir' for the sorting direction
- *
  */
 class SortBox extends AbstractWidget
 {
-
     /**
      * An array containing all sort columns with their associated labels
      *
      * @var array
      */
-    private $sortFields;
+    protected $sortFields;
 
     /**
      * The name of the form that will be created
      *
      * @var string
      */
-    private $name;
+    protected $name;
 
     /**
      * A request object used for initial form population
      *
-     * @var \Icinga\Web\Request
+     * @var Request
      */
-    private $request;
+    protected $request;
 
     /**
      * Create a SortBox with the entries from $sortFields
      *
-     * @param string    $name           The name of the sort form
+     * @param   string  $name           The name for the SortBox
-     * @param array     $sortFields     An array containing the columns and their labels to be displayed
+     * @param   array   $sortFields     An array containing the columns and their labels to be displayed in the SortBox
-     *                                  in the sort select box
      */
     public function __construct($name, array $sortFields)
     {
@@ -69,13 +62,12 @@ class SortBox extends AbstractWidget
     }
 
     /**
-     * Create a SortBox with the entries from $sortFields
+     * Create a SortBox
      *
-     * @param string    $name           The name of the sort form
+     * @param   string  $name           The name for the SortBox
-     * @param array     $sortFields     An array containing the columns and their labels to be displayed
+     * @param   array   $sortFields     An array containing the columns and their labels to be displayed in the SortBox
-     *                                  in the sort select box
      *
-     * @return static
+     * @return  SortBox
      */
     public static function create($name, array $sortFields)
     {
@@ -85,9 +77,9 @@ class SortBox extends AbstractWidget
     /**
      * Apply the parameters from the given request on this SortBox
      *
-     * @param Request $request The request to use for populating the form
+     * @param   Request     $request    The request to use for populating the form
      *
-     * @return $this
+     * @return  $this
      */
     public function applyRequest($request)
     {
@@ -96,60 +88,49 @@ class SortBox extends AbstractWidget
     }
 
     /**
-     * Create a submit button that is hidden via the ConditionalDecorator
+     * Render this SortBox as HTML
-     * in order to allow sorting changes to be submitted in a JavaScript-less environment
-     *
-     * @return  Zend_Form_Element_Submit    The submit button that is hidden by default
-     * @see     ConditionalDecorator
-     */
-    private function createFallbackSubmitButton()
-    {
-        $manualSubmitButton = new Zend_Form_Element_Submit(
-            array(
-                'name'      => 'submit_' . $this->name,
-                'label'     => 'Sort',
-                'class'     => '',
-                'condition' => 0,
-                'value'     => '{{SUBMIT_ICON}}'
-            )
-        );
-        $manualSubmitButton->addDecorator(new ConditionalHidden());
-        $manualSubmitButton->setAttrib('addLabelPlaceholder', true);
-        return $manualSubmitButton;
-    }
-
-    /**
-     * Renders this widget via the given view and returns the
-     * HTML as a string
      *
      * @return  string
      */
     public function render()
     {
         $form = new Form();
-        $form->setAttrib('class', 'inline');
-        $form->setMethod('POST');
         $form->setTokenDisabled();
         $form->setName($this->name);
-        $form->addElement('select', 'sort', array(
+        $form->setAttrib('class', 'sort-control inline');
-            'label'         => 'Sort By',
+
-            'multiOptions'  => $this->sortFields,
+        $form->addElement(
-            'style'         => 'width: 12em',
+            'select',
-            'autosubmit'    => true
+            'sort',
+            array(
+                'autosubmit'    => true,
+                'label'         => $this->view()->translate('Sort by'),
+                'multiOptions'  => $this->sortFields
+            )
+        );
+        $form->getElement('sort')->setDecorators(array(
+            array('ViewHelper'),
+            array('Label')
         ));
-        $form->addElement('select', 'dir', array(
+        $form->addElement(
-            'multiOptions'  => array(
+            'select',
-                'asc'       => 'Asc',
+            'dir',
-                'desc'      => 'Desc',
+            array(
-            ),
+                'autosubmit'    => true,
-            'style'         => 'width: 5em',
+                'multiOptions'  => array(
-            'autosubmit'    => true
+                    'asc'       => 'Asc',
-        ));
+                    'desc'      => 'Desc',
-        $sort = $form->getElement('sort')->setDecorators(array('ViewHelper'));
+                ),
-        $dir = $form->getElement('dir')->setDecorators(array('ViewHelper'));
+                'decorators'    => array(
+                    array('ViewHelper')
+                )
+            )
+        );
+
         if ($this->request) {
             $form->populate($this->request->getParams());
         }
+
         return $form;
     }
 }

public/css/icinga/controls.less

@@ -0,0 +1,18 @@
+/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
+form.sort-control {
+  label {
+    width: auto;
+    margin-right: 0.5em;
+  }
+
+  select[name=sort] {
+    width: 12em;
+    margin-left: 0;
+  }
+
+  select[name=dir] {
+    width: 5em;
+    margin-left: 0;
+  }
+}