Fix SortBox widget

refs #7876

library/Icinga/Web/Controller.php

@@ -14,7 +14,7 @@ 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
      *                               submit value as the key and the label as the value
@@ -22,7 +22,7 @@ class Controller extends ModuleActionController
     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,20 +3,17 @@
 
 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
  * to  make sure the form is correctly populated when a request with a sort parameter is being made.
  *
@@ -28,39 +25,35 @@ use Icinga\Web\Form\Decorator\ConditionalHidden;
  *      );
  *      $this->view->sortControl->applyRequest($this->getRequest());
  *  </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)
     {
@@ -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(
+            'select',
+            'dir',
+            array(
+                'autosubmit'    => true,
                 'multiOptions'  => array(
                     'asc'       => 'Asc',
                     'desc'      => 'Desc',
                 ),
-            'style'         => 'width: 5em',
+                'decorators'    => array(
-            'autosubmit'    => true
+                    array('ViewHelper')
-        ));
+                )
-        $sort = $form->getElement('sort')->setDecorators(array('ViewHelper'));
+            )
-        $dir = $form->getElement('dir')->setDecorators(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;
+  }
+}