SortBox: Utilize a separate form for each control

refs #9421

library/Icinga/Web/Controller.php

@@ -37,13 +37,13 @@ class Controller extends ModuleActionController
             return;
         }
 
-        if (($sort = $request->getPost('sort'))) {
+        if (($sort = $request->getPost('sort')) || ($direction = $request->getPost('dir'))) {
             $url = Url::fromRequest();
-            $url->setParam('sort', $sort);
-            if (($dir = $request->getPost('dir'))) {
-                $url->setParam('dir', $dir);
+            if ($sort) {
+                $url->setParam('sort', $sort);
+                $url->remove('dir');
             } else {
-                $url->removeParam('dir');
+                $url->setParam('dir', $direction);
             }
 
             $this->redirectNow($url);

library/Icinga/Web/Widget/SortBox.php

@@ -127,43 +127,56 @@ class SortBox extends AbstractWidget
      */
     public function render()
     {
-        $form = new Form();
-        $form->setTokenDisabled();
-        $form->setName($this->name);
-        $form->setAttrib('class', 'sort-control inline');
-
-        $form->addElement(
+        $columnForm = new Form();
+        $columnForm->setTokenDisabled();
+        $columnForm->setName($this->name . '-column');
+        $columnForm->setAttrib('class', 'inline');
+        $columnForm->addElement(
             'select',
             'sort',
             array(
                 'autosubmit'    => true,
                 'label'         => $this->view()->translate('Sort by'),
-                'multiOptions'  => $this->sortFields
+                'multiOptions'  => $this->sortFields,
+                'decorators'    => array(
+                    array('ViewHelper'),
+                    array('Label')
+                )
             )
         );
-        $form->getElement('sort')->setDecorators(array(
-            array('ViewHelper'),
-            array('Label')
-        ));
-        $form->addElement(
+
+        $orderForm = new Form();
+        $orderForm->setTokenDisabled();
+        $orderForm->setName($this->name . '-order');
+        $orderForm->setAttrib('class', 'inline');
+        $orderForm->addElement(
             'select',
             'dir',
             array(
                 'autosubmit'    => true,
+                'label'         => $this->view()->translate('Direction', 'sort direction'),
                 'multiOptions'  => array(
-                    'asc'       => 'Asc',
-                    'desc'      => 'Desc',
+                    'asc'       => $this->view()->translate('Ascending', 'sort direction'),
+                    'desc'      => $this->view()->translate('Descending', 'sort direction')
                 ),
                 'decorators'    => array(
-                    array('ViewHelper')
+                    array('ViewHelper'),
+                    array('Label', array('class' => 'no-js'))
                 )
             )
         );
 
         if ($this->request) {
-            $form->populate($this->request->getParams());
+            $url = $this->request->getUrl();
+            if ($url->hasParam('sort')) {
+                $columnForm->populate(array('sort' => $url->getParam('sort')));
+            }
+
+            if ($url->hasParam('dir')) {
+                $orderForm->populate(array('dir' => $url->getParam('dir')));
+            }
         }
 
-        return $form;
+        return '<div class="sort-control">' . $columnForm . $orderForm . '</div>';
     }
 }

public/css/icinga/controls.less

@@ -1,6 +1,6 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
-form.sort-control {
+div.sort-control {
   .dontprint;
   float: right;
 
@@ -15,7 +15,13 @@ form.sort-control {
   }
 
   select[name=dir] {
-    width: 5em;
+    width: 8em;
     margin-left: 0;
   }
 }
+
+html.no-js div.sort-control form {
+  display: table;
+  margin-left: auto;
+  margin-top: 0.25em;
+}