Merge pull request #3676 from Icinga/feature/form-styling

Improve look of our forms

application/controllers/GroupController.php

@@ -46,7 +46,7 @@ class GroupController extends AuthBackendController
         }
 
         $this->view->backendSelection = new Form();
-        $this->view->backendSelection->setAttrib('class', 'backend-selection');
+        $this->view->backendSelection->setAttrib('class', 'backend-selection icinga-controls');
         $this->view->backendSelection->setUidDisabled();
         $this->view->backendSelection->setMethod('GET');
         $this->view->backendSelection->setTokenDisabled();
@@ -128,6 +128,7 @@ class GroupController extends AuthBackendController
         if ($this->hasPermission('config/authentication/groups/edit') && $backend instanceof Reducible) {
             $removeForm = new Form();
             $removeForm->setUidDisabled();
+            $removeForm->setAttrib('class', 'inline');
             $removeForm->setAction(
                 Url::fromPath('group/removemember', array('backend' => $backend->getName(), 'group' => $groupName))
             );

application/controllers/NavigationController.php

@@ -167,6 +167,7 @@ class NavigationController extends Controller
 
         $removeForm = new Form();
         $removeForm->setUidDisabled();
+        $removeForm->setAttrib('class', 'inline');
         $removeForm->addElement('hidden', 'name', array(
             'decorators'    => array('ViewHelper')
         ));

application/controllers/UserController.php

@@ -45,7 +45,7 @@ class UserController extends AuthBackendController
         }
 
         $this->view->backendSelection = new Form();
-        $this->view->backendSelection->setAttrib('class', 'backend-selection');
+        $this->view->backendSelection->setAttrib('class', 'backend-selection icinga-controls');
         $this->view->backendSelection->setUidDisabled();
         $this->view->backendSelection->setMethod('GET');
         $this->view->backendSelection->setTokenDisabled();
@@ -141,6 +141,7 @@ class UserController extends AuthBackendController
         if ($this->hasPermission('config/authentication/groups/edit')) {
             $removeForm = new Form();
             $removeForm->setUidDisabled();
+            $removeForm->setAttrib('class', 'inline');
             $removeForm->addElement('hidden', 'user_name', array(
                 'isArray'       => true,
                 'value'         => $userName,

application/forms/AcknowledgeApplicationStateMessageForm.php

@@ -13,7 +13,7 @@ class AcknowledgeApplicationStateMessageForm extends Form
     public function init()
     {
         $this->setAction(Url::fromPath('application-state/acknowledge-message'));
-        $this->setAttrib('class', 'form-inline application-state-acknowledge-message-control');
+        $this->setAttrib('class', 'application-state-acknowledge-message-control');
         $this->setRedirectUrl('application-state/summary');
     }
 

application/forms/Announcement/AcknowledgeAnnouncementForm.php

@@ -17,7 +17,7 @@ class AcknowledgeAnnouncementForm extends Form
     public function init()
     {
         $this->setAction(Url::fromPath('announcements/acknowledge'));
-        $this->setAttrib('class', 'form-inline acknowledge-announcement-control');
+        $this->setAttrib('class', 'acknowledge-announcement-control');
         $this->setRedirectUrl('layout/announcements');
     }
 

application/forms/Announcement/AnnouncementForm.php

@@ -92,6 +92,7 @@ class AnnouncementForm extends RepositoryForm
     {
         $this->setTitle(sprintf($this->translate('Remove announcement %s?'), $this->getIdentifier()));
         $this->setSubmitLabel($this->translate('Yes'));
+        $this->setAttrib('class', 'icinga-controls');
     }
 
     /**

application/forms/Authentication/LoginForm.php

@@ -16,6 +16,8 @@ use Icinga\Web\Url;
  */
 class LoginForm extends Form
 {
+    const DEFAULT_CLASSES = 'icinga-controls';
+
     /**
      * Redirect URL
      */

application/forms/Config/User/UserForm.php

@@ -114,6 +114,7 @@ class UserForm extends RepositoryForm
     {
         $this->setTitle(sprintf($this->translate('Remove user %s?'), $this->getIdentifier()));
         $this->setSubmitLabel($this->translate('Yes'));
+        $this->setAttrib('class', 'icinga-controls');
     }
 
     /**

application/forms/Config/UserGroup/UserGroupForm.php

@@ -64,6 +64,7 @@ class UserGroupForm extends RepositoryForm
             . ' have their membership cleared automatically.'
         ));
         $this->setSubmitLabel($this->translate('Yes'));
+        $this->setAttrib('class', 'icinga-form icinga-controls');
     }
 
     /**

application/forms/ConfirmRemovalForm.php

@@ -10,6 +10,8 @@ use Icinga\Web\Form;
  */
 class ConfirmRemovalForm extends Form
 {
+    const DEFAULT_CLASSES = 'icinga-controls';
+
     /**
      * {@inheritdoc}
      */

application/forms/Control/LimiterControlForm.php

@@ -15,7 +15,7 @@ class LimiterControlForm extends Form
      *
      * @var string
      */
-    const CSS_CLASS_LIMITER = 'limiter-control';
+    const CSS_CLASS_LIMITER = 'limiter-control icinga-controls';
 
     /**
      * Default limit
@@ -37,6 +37,11 @@ class LimiterControlForm extends Form
         500 => '500'
     );
 
+    public static $defaultElementDecorators = [
+        ['Label', ['tag' => 'span', 'separator' => '']],
+        ['ViewHelper', ['separator' => '']],
+    ];
+
     /**
      * Default limit for this instance
      *

application/forms/PreferenceForm.php

@@ -302,7 +302,8 @@ class PreferenceForm extends Form
                 array(
                     'ignore'        => true,
                     'label'         => $this->translate('Save to the Preferences'),
-                    'decorators'    => array('ViewHelper')
+                    'decorators'    => array('ViewHelper'),
+                    'class'         => 'btn-primary'
                 )
             );
         }
@@ -335,7 +336,7 @@ class PreferenceForm extends Form
             array(
                 'decorators' => array(
                     'FormElements',
-                    array('HtmlTag', array('tag' => 'div', 'class' => 'control-group'))
+                    array('HtmlTag', array('tag' => 'div', 'class' => 'control-group form-controls'))
                 )
             )
         );

application/forms/Security/RoleForm.php

@@ -37,39 +37,50 @@ class RoleForm extends RepositoryForm
 
     public function init()
     {
+        $this->setAttrib('class', self::DEFAULT_CLASSES . ' role-form');
+
         $helper = new Zend_Form_Element('bogus');
+        $view = $this->getView();
 
         $this->providedPermissions['application'] = [
             $helper->filterName('application/share/navigation') => [
-                'label' => $this->translate('Allow to share navigation items'),
+                'name'          => 'application/share/navigation',
-                'name'  => 'application/share/navigation'
+                'description'   => $this->translate('Allow to share navigation items')
             ],
             $helper->filterName('application/stacktraces') => [
-                'label' => $this->translate('Allow to adjust in the preferences whether to show stacktraces'),
+                'name'          => 'application/stacktraces',
-                'name'  => 'application/stacktraces'
+                'description'   => $this->translate(
+                    'Allow to adjust in the preferences whether to show stacktraces'
+                )
             ],
             $helper->filterName('application/log') => [
-                'label' => $this->translate('Allow to view the application log'),
+                'name'          => 'application/log',
-                'name'  => 'application/log'
+                'description'   => $this->translate('Allow to view the application log')
             ],
             $helper->filterName('admin') => [
-                'label' => $this->translate('Grant admin permissions, e.g. manage announcements'),
+                'name'          => 'admin',
-                'name'  => 'admin'
+                'description'   => $this->translate(
+                    'Grant admin permissions, e.g. manage announcements'
+                )
             ],
             $helper->filterName('config/*') => [
-                'label' => $this->translate('Allow config access'),
+                'name'          => 'config/*',
-                'name'  => 'config/*'
+                'description'   => $this->translate('Allow config access')
             ]
         ];
 
         $this->providedRestrictions['application'] = [
             $helper->filterName('application/share/users') => [
-                'label' => $this->translate('Restrict which users this role can share items and information with'),
+                'name'          => 'application/share/users',
-                'name'  => 'application/share/users'
+                'description'   => $this->translate(
+                    'Restrict which users this role can share items and information with'
+                )
             ],
             $helper->filterName('application/share/groups') => [
-                'label' => $this->translate('Restrict which groups this role can share items and information with'),
+                'name'          => 'application/share/groups',
-                'name'  => 'application/share/groups'
+                'description'   => $this->translate(
+                    'Restrict which groups this role can share items and information with'
+                )
             ]
         ];
 
@@ -77,34 +88,43 @@ class RoleForm extends RepositoryForm
         foreach ($mm->listInstalledModules() as $moduleName) {
             $modulePermission = Manager::MODULE_PERMISSION_NS . $moduleName;
             $this->providedPermissions[$moduleName][$helper->filterName($modulePermission)] = [
-                'label'         => sprintf($this->translate('Allow access to module %s'), $moduleName),
+                'isUsagePerm'   => true,
                 'name'          => $modulePermission,
-                'isUsagePerm'   => true
+                'label'         => $view->escape($this->translate('General Module Access')),
+                'description'   => sprintf($this->translate('Allow access to module %s'), $moduleName)
             ];
 
             $module = $mm->getModule($moduleName, false);
             $permissions = $module->getProvidedPermissions();
 
-            if (count($permissions) > 1) {
             $this->providedPermissions[$moduleName][$helper->filterName($moduleName . '/*')] = [
-                    'label'         => $this->translate('Full Access'),
+                'isFullPerm'    => true,
                 'name'          => $moduleName . '/*',
-                    'isFullPerm'    => true
+                'label'         => $view->escape($this->translate('Full Module Access'))
             ];
-            }
 
             foreach ($permissions as $permission) {
                 /** @var object $permission */
                 $this->providedPermissions[$moduleName][$helper->filterName($permission->name)] = [
-                    'label' => $permission->description,
+                    'name'          => $permission->name,
-                    'name'  => $permission->name
+                    'label'         => preg_replace(
+                        '~^(\w+)(\/.*)~',
+                        '<em>$1</em>$2',
+                        $view->escape($permission->name)
+                    ),
+                    'description'   => $permission->description
                 ];
             }
 
             foreach ($module->getProvidedRestrictions() as $restriction) {
                 $this->providedRestrictions[$moduleName][$helper->filterName($restriction->name)] = [
-                    'label' => $restriction->description,
+                    'name'          => $restriction->name,
-                    'name'  => $restriction->name
+                    'label'         => preg_replace(
+                        '~^(\w+)(\/.*)~',
+                        '<em>$1</em>$2',
+                        $view->escape($restriction->name)
+                    ),
+                    'description'   => $restriction->description
                 ];
             }
         }
@@ -156,7 +176,24 @@ class RoleForm extends RepositoryForm
             foreach ($this->providedPermissions as $moduleName => $permissionList) {
                 $this->sortPermissions($permissionList);
 
-                $elements = [];
+                $elements = [$moduleName . '_header'];
+                $this->addElement(
+                    'note',
+                    $moduleName . '_header',
+                    [
+                        'decorators'    => ['ViewHelper'],
+                        'value'         => '<h3>' . ($moduleName !== 'application'
+                            ? sprintf('%s <em>%s</em>', $moduleName, $this->translate('Module'))
+                            :  'Icinga Web 2') . '</h3>'
+                    ]
+                );
+
+                $elements[] = 'permission_header';
+                $this->addElement('note', 'permission_header', [
+                    'value'         => '<h4>' . $this->translate('Permissions') . '</h4>',
+                    'decorators'    => ['ViewHelper']
+                ]);
+
                 $hasFullPerm = false;
                 foreach ($permissionList as $name => $spec) {
                     $elements[] = $name;
@@ -168,36 +205,49 @@ class RoleForm extends RepositoryForm
                             'autosubmit'    => isset($spec['isFullPerm']),
                             'disabled'      => $hasFullPerm ?: null,
                             'value'         => $hasFullPerm,
-                            'label'         => $spec['name'],
+                            'label'         => isset($spec['label']) ? $spec['label'] : $spec['name'],
-                            'description'   => $spec['label']
+                            'description'   => isset($spec['description']) ? $spec['description'] : $spec['name']
                         ]
-                    );
+                    )
+                        ->getElement($name)
+                        ->getDecorator('Label')
+                        ->setOption('escape', false);
                     if (isset($spec['isFullPerm'])) {
                         $hasFullPerm = isset($formData[$name]) && $formData[$name];
                     }
                 }
 
                 if (isset($this->providedRestrictions[$moduleName])) {
+                    $elements[] = 'restriction_header';
+                    $this->addElement('note', 'restriction_header', [
+                        'value'         => '<h4>' . $this->translate('Restrictions') . '</h4>',
+                        'decorators'    => ['ViewHelper']
+                    ]);
+
                     foreach ($this->providedRestrictions[$moduleName] as $name => $spec) {
                         $elements[] = $name;
                         $this->addElement(
                             'text',
                             $name,
                             [
-                                'label'         => $spec['name'],
+                                'label'         => isset($spec['label']) ? $spec['label'] : $spec['name'],
-                                'description'   => $spec['label']
+                                'description'   => $spec['description']
                             ]
-                        );
+                        )
+                            ->getElement($name)
+                            ->getDecorator('Label')
+                            ->setOption('escape', false);
                     }
                 }
 
                 $this->addDisplayGroup($elements, $moduleName . '_elements', [
-                    'legend'        => $moduleName !== 'application'
-                        ? sprintf($this->translate('Module: %s'), $moduleName)
-                        :  'Icinga Web 2',
                     'decorators'    => [
                         'FormElements',
-                        ['Fieldset', ['class' => 'collapsible']]
+                        ['Fieldset', [
+                            'class'                 => 'collapsible',
+                            'data-toggle-element'   => 'h3',
+                            'data-visible-height'   => 0
+                        ]]
                     ]
                 ]);
             }

application/views/scripts/group/show.phtml

@@ -40,7 +40,7 @@ if ($this->hasPermission('config/authentication/groups/edit') && $backend instan
     </table>
 <?php if (! $this->compact): ?>
     <h2><?= $this->translate('Members'); ?></h2>
-    <div class="grid">
+    <div class="sort-controls-container">
         <?= $this->limiter; ?>
         <?= $this->paginator; ?>
         <?= $this->sortBox; ?>

application/views/scripts/layout/menu.phtml

@@ -7,7 +7,7 @@ $searchDashboard->setUser($this->Auth()->getUser());
 
 if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
     <form action="<?= $this->href('search') ?>" method="get" role="search" class="search-control">
-        <input type="text" name="q" id="search" class="search search-input"
+        <input type="text" name="q" id="search" class="search search-input" required
                placeholder="<?= $this->translate('Search') ?> &hellip;"
                autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
         <button class="search-reset icon-cancel" type="reset"></button>

application/views/scripts/list/applicationlog.phtml

@@ -1,9 +1,9 @@
 <?php if (! $this->compact): ?>
 <div class="controls separated">
     <?= $this->tabs ?>
-    <div class="grid">
-        <?= $this->limiter ?>
     <?= $this->paginator ?>
+    <div class="sort-controls-container">
+        <?= $this->limiter ?>
     </div>
 </div>
 <?php endif ?>

application/views/scripts/user/show.phtml

@@ -43,7 +43,7 @@ use Icinga\Data\Selectable;
     </table>
 <?php if (! $this->compact): ?>
     <h2><?= $this->translate('Group Memberships'); ?></h2>
-    <div class="grid">
+    <div class="sort-controls-container">
         <?= $this->limiter; ?>
         <?= $this->paginator; ?>
         <?= $this->sortBox; ?>

library/Icinga/Web/Form.php

@@ -32,6 +32,11 @@ class Form extends Zend_Form
      */
     const DEFAULT_SUFFIX = '_default';
 
+    /**
+     * A form's default CSS classes
+     */
+    const DEFAULT_CLASSES = 'icinga-form icinga-controls';
+
     /**
      * Identifier for notifications of type error
      */
@@ -211,9 +216,9 @@ class Form extends Zend_Form
      */
     public static $defaultElementDecorators = array(
         array('Label', array('tag'=>'span', 'separator' => '', 'class' => 'control-label')),
-        array('Help', array('placement' => 'APPEND')),
         array(array('labelWrap' => 'HtmlTag'), array('tag' => 'div', 'class' => 'control-label-group')),
         array('ViewHelper', array('separator' => '')),
+        array('Help', array()),
         array('Errors', array('separator' => '')),
         array('HtmlTag', array('tag' => 'div', 'class' => 'control-group'))
     );
@@ -239,6 +244,10 @@ class Form extends Zend_Form
             )
         ));
 
+        if (! isset($options['attribs']['class'])) {
+            $options['attribs']['class'] = static::DEFAULT_CLASSES;
+        }
+
         parent::__construct($options);
     }
 
@@ -834,6 +843,7 @@ class Form extends Zend_Form
                 'submit',
                 'btn_submit',
                 array(
+                    'class'                 => 'btn-primary',
                     'ignore'                => true,
                     'label'                 => $submitLabel,
                     'data-progress-label'   => $this->getProgressLabel(),

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

@@ -3,8 +3,9 @@
 
 namespace Icinga\Web\Form\Decorator;
 
-use Zend_Form_Decorator_Abstract;
+use Icinga\Application\Icinga;
 use Icinga\Web\Form;
+use Zend_Form_Decorator_Abstract;
 
 /**
  * Decorator to add a list of descriptions at the top or bottom of a form
@@ -35,7 +36,10 @@ class FormDescriptions extends Zend_Form_Decorator_Abstract
             return $content;
         }
 
-        $html = '<ul class="form-description">';
+        $html = '<div class="form-description">'
+            . Icinga::app()->getViewRenderer()->view->icon('info-circled', '', ['class' => 'form-description-icon'])
+            . '<ul class="form-description-list">';
+
         foreach ($descriptions as $description) {
             if (is_array($description)) {
                 list($description, $properties) = $description;
@@ -47,9 +51,9 @@ class FormDescriptions extends Zend_Form_Decorator_Abstract
 
         switch ($this->getPlacement()) {
             case self::APPEND:
-                return $content . $html . '</ul>';
+                return $content . $html . '</ul></div>';
             case self::PREPEND:
-                return $html . '</ul>' . $content;
+                return $html . '</ul></div>' . $content;
         }
     }
 

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

@@ -3,9 +3,10 @@
 
 namespace Icinga\Web\Form\Decorator;
 
-use Zend_Form_Decorator_Abstract;
+use Icinga\Application\Icinga;
 use Icinga\Exception\ProgrammingError;
 use Icinga\Web\Form;
+use Zend_Form_Decorator_Abstract;
 
 /**
  * Decorator to add a list of notifications at the top or bottom of a form
@@ -36,7 +37,7 @@ class FormNotifications extends Zend_Form_Decorator_Abstract
             return $content;
         }
 
-        $html = '<ul class="form-notifications">';
+        $html = '<ul class="form-notification-list">';
         foreach (array(Form::NOTIFICATION_ERROR, Form::NOTIFICATION_WARNING, Form::NOTIFICATION_INFO) as $type) {
             if (isset($notifications[$type])) {
                 $html .= '<li><ul class="notification-' . $this->getNotificationTypeName($type) . '">';
@@ -55,11 +56,26 @@ class FormNotifications extends Zend_Form_Decorator_Abstract
             }
         }
 
+        if (isset($notifications[Form::NOTIFICATION_ERROR])) {
+            $icon = 'cancel';
+            $class = 'error';
+        } elseif (isset($notifications[Form::NOTIFICATION_WARNING])) {
+            $icon = 'warning-empty';
+            $class = 'warning';
+        } else {
+            $icon = 'info';
+            $class = 'info';
+        }
+
+        $html = "<div class=\"form-notifications $class\">"
+        . Icinga::app()->getViewRenderer()->view->icon($icon, '', ['class' => 'form-notification-icon'])
+        . $html;
+
         switch ($this->getPlacement()) {
             case self::APPEND:
-                return $content . $html . '</ul>';
+                return $content . $html . '</ul></div>';
             case self::PREPEND:
-                return $html . '</ul>' . $content;
+                return $html . '</ul></div>' . $content;
         }
     }
 

library/Icinga/Web/Form/Element/Checkbox.php

@@ -0,0 +1,9 @@
+<?php
+/* Icinga Web 2 | (c) 2019 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\Form\Element;
+
+class Checkbox extends \Zend_Form_Element_Checkbox
+{
+    public $helper = 'icingaCheckbox';
+}

library/Icinga/Web/Form/Element/Textarea.php

@@ -0,0 +1,20 @@
+<?php
+/* Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
+
+namespace Icinga\Web\Form\Element;
+
+use Icinga\Web\Form\FormElement;
+
+class Textarea extends FormElement
+{
+    public $helper = 'formTextarea';
+
+    public function __construct($spec, $options = null)
+    {
+        parent::__construct($spec, $options);
+
+        if ($this->getAttrib('rows') === null) {
+            $this->setAttrib('rows', 3);
+        }
+    }
+}

library/Icinga/Web/View.php

@@ -4,6 +4,7 @@
 namespace Icinga\Web;
 
 use Closure;
+use Icinga\Application\Icinga;
 use Zend_View_Abstract;
 use Icinga\Authentication\Auth;
 use Icinga\Exception\ProgrammingError;
@@ -92,6 +93,8 @@ class View extends Zend_View_Abstract
             }
         }
 
+        $config['helperPath']['Icinga\\Web\\View\\Helper\\'] = Icinga::app()->getLibraryDir('Icinga/Web/View/Helper');
+
         parent::__construct($config);
     }
 

library/Icinga/Web/View/Helper/IcingaCheckbox.php

@@ -0,0 +1,28 @@
+<?php
+/* Icinga Web 2 | (c) 2019 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\View\Helper;
+
+class IcingaCheckbox extends \Zend_View_Helper_FormCheckbox
+{
+    public function icingaCheckbox($name, $value = null, $attribs = null, array $checkedOptions = null)
+    {
+        if (! isset($attribs['id'])) {
+            $attribs['id'] = $this->view->protectId('icingaCheckbox_' . $name);
+        }
+
+        $html = parent::formCheckbox($name, $value, $attribs, $checkedOptions);
+
+        $class = 'toggle-switch';
+        if (isset($attribs['disabled'])) {
+            $class .= ' disabled';
+        }
+
+        return $html
+            . '<label for="'
+            . $attribs['id']
+            . '" class="'
+            . $class
+            . '"><span class="toggle-slider"></span></label>';
+    }
+}

library/Icinga/Web/Widget/Announcements.php

@@ -36,11 +36,11 @@ class Announcements extends AbstractWidget
         $announcements = $repo->findActive();
         $announcements->applyFilter($acked);
         if ($announcements->hasResult()) {
-            $html = '<ul role="alert" id="announcements">';
+            $html = '<ul role="alert">';
             foreach ($announcements as $announcement) {
                 $ackForm = new AcknowledgeAnnouncementForm();
                 $ackForm->populate(array('hash' => $announcement->hash));
-                $html .= '<li><div>'
+                $html .= '<li><div class="message">'
                     . Markdown::text($announcement->message)
                     . '</div>'
                     . $ackForm

library/Icinga/Web/Widget/ApplicationStateMessages.php

@@ -61,7 +61,11 @@ class ApplicationStateMessages extends AbstractWidget
         $ackForm = new AcknowledgeApplicationStateMessageForm();
         $ackForm->populate(['id' => $id]);
 
-        $html .= Markdown::text($message) . $ackForm;
+        $html .= '<section class="markdown">';
+        $html .= Markdown::text($message);
+        $html .= '</section>';
+
+        $html .= $ackForm;
 
         $html .= '</div>';
 

library/Icinga/Web/Widget/FilterEditor.php

@@ -768,12 +768,12 @@ class FilterEditor extends AbstractWidget
             return '';
         }
         if (! $this->preservedUrl()->getParam('modifyFilter')) {
-            return '<div class="filter">'
+            return '<div class="filter icinga-controls">'
                 . $this->renderSearch()
                 . $this->view()->escape($this->shorten($this->filter, 50))
                 . '</div>';
         }
-        return  '<div class="filter">'
+        return  '<div class="filter icinga-controls">'
             . $this->renderSearch()
             . '<form action="'
             . Url::fromRequest()
@@ -783,8 +783,8 @@ class FilterEditor extends AbstractWidget
             . $this->renderFilter($this->filter)
             . '</li></ul>'
             . '<div class="buttons">'
-            . '<input type="submit" name="submit" value="Apply" />'
+            . '<input type="submit" name="cancel" value="Cancel" class="button btn-cancel" />'
-            . '<input type="submit" name="cancel" value="Cancel" />'
+            . '<input type="submit" name="submit" value="Apply" class="button btn-primary"/>'
             . '</div>'
             . '<input type="hidden" name="formUID" value="FilterEditor">'
             . '</form>'

library/Icinga/Web/Widget/SortBox.php

@@ -187,7 +187,7 @@ class SortBox extends AbstractWidget
         $columnForm = new Form();
         $columnForm->setTokenDisabled();
         $columnForm->setName($this->name . '-column');
-        $columnForm->setAttrib('class', 'inline');
+        $columnForm->setAttrib('class', 'icinga-controls');
         $columnForm->addElement(
             'select',
             'sort',

library/Icinga/Web/Wizard.php

@@ -605,7 +605,7 @@ class Wizard
                 'button',
                 static::BTN_NEXT,
                 array(
-                    'class'         => 'control-button',
+                    'class'         => 'control-button btn-primary',
                     'type'          => 'submit',
                     'value'         => $pages[1]->getName(),
                     'label'         => t('Next'),
@@ -629,7 +629,7 @@ class Wizard
                 'button',
                 static::BTN_NEXT,
                 array(
-                    'class'         => 'control-button',
+                    'class'         => 'control-button btn-primary',
                     'type'          => 'submit',
                     'value'         => $pages[$index + 1]->getName(),
                     'label'         => t('Next'),
@@ -653,7 +653,7 @@ class Wizard
                 'button',
                 static::BTN_NEXT,
                 array(
-                    'class'         => 'control-button',
+                    'class'         => 'control-button btn-primary',
                     'type'          => 'submit',
                     'value'         => $page->getName(),
                     'label'         => t('Finish'),

modules/monitoring/application/forms/Command/Instance/ToggleInstanceFeaturesCommandForm.php

@@ -26,7 +26,7 @@ class ToggleInstanceFeaturesCommandForm extends CommandForm
     public function init()
     {
         $this->setUseFormAutosubmit();
-        $this->setAttrib('class', 'inline instance-features');
+        $this->setAttrib('class', self::DEFAULT_CLASSES . ' instance-features');
     }
 
     /**

modules/monitoring/application/forms/Command/Object/ToggleObjectFeaturesCommandForm.php

@@ -32,7 +32,7 @@ class ToggleObjectFeaturesCommandForm extends ObjectsCommandForm
     public function init()
     {
         $this->setUseFormAutosubmit();
-        $this->setAttrib('class', 'inline object-features');
+        $this->setAttrib('class', self::DEFAULT_CLASSES . ' object-features');
         $features = array(
             ToggleObjectFeatureCommand::FEATURE_ACTIVE_CHECKS => array(
                 'label'         => $this->translate('Active Checks'),

modules/monitoring/application/forms/Config/BackendConfigForm.php

@@ -216,8 +216,6 @@ class BackendConfigForm extends ConfigForm
             )
         );
 
-        $decorators = static::$defaultElementDecorators;
-        array_pop($decorators); // Removes the HtmlTag decorator
         $this->addElement(
             'select',
             'resource',
@@ -227,7 +225,6 @@ class BackendConfigForm extends ConfigForm
                 'description'   => $this->translate('The resource to use'),
                 'multiOptions'  => $this->resources[$resourceType],
                 'value'         => current($this->resources[$resourceType]),
-                'decorators'    => $decorators,
                 'autosubmit'    => true
             )
         );
@@ -237,7 +234,6 @@ class BackendConfigForm extends ConfigForm
             'resource_note',
             array(
                 'escape'        => false,
-                'decorators'    => $decorators,
                 'value'         => sprintf(
                     '<a href="%1$s" data-base-target="_next" title="%2$s" aria-label="%2$s">%3$s</a>',
                     $this->getView()->url('config/editresource', array('resource' => $resourceName)),
@@ -246,16 +242,6 @@ class BackendConfigForm extends ConfigForm
                 )
             )
         );
-        $this->addDisplayGroup(
-            array('resource', 'resource_note'),
-            'resource-group',
-            array(
-                'decorators'    => array(
-                    'FormElements',
-                    array('HtmlTag', array('tag' => 'div', 'class' => 'control-group'))
-                )
-            )
-        );
 
         if (isset($formData['skip_validation']) && $formData['skip_validation']) {
             // In case another error occured and the checkbox was displayed before

modules/monitoring/library/Monitoring/Web/Widget/SelectBox.php

@@ -96,7 +96,7 @@ class SelectBox extends AbstractWidget
     public function render()
     {
         $form = new Form();
-        $form->setAttrib('class', 'inline');
+        $form->setAttrib('class', Form::DEFAULT_CLASSES . ' inline');
         $form->setMethod('GET');
         $form->setUidDisabled();
         $form->setTokenDisabled();

modules/monitoring/public/css/module.less

@@ -590,8 +590,7 @@ form.instance-features span.description, form.object-features span.description {
 .object-features {
   .control-label-group {
     text-align: left;
-    padding: @table-column-padding;
+    margin-right: 0;
-    padding-left: 0;
     width: @name-value-table-name-width;
 
     label {
@@ -599,9 +598,8 @@ form.instance-features span.description, form.object-features span.description {
     }
   }
 
-  input[type="checkbox"],
+  .toggle-switch {
-  input[type="radio"] {
+    margin-left: @table-column-padding;
-    margin: @table-column-padding;
   }
 }
 

modules/setup/application/views/scripts/form/setup-modules.phtml

@@ -9,6 +9,7 @@ use Icinga\Web\Wizard;
  enctype="<?= $form->getEncType(); ?>"
  method="<?= $form->getMethod(); ?>"
  action="<?= $form->getAction(); ?>"
+ class="icinga-controls"
  data-progress-element="<?= Wizard::PROGRESS_ELEMENT; ?>"
 >
 <h2><?= $this->translate('Modules', 'setup.page.title'); ?></h2>
@@ -16,10 +17,14 @@ use Icinga\Web\Wizard;
 <?php foreach ($form->getElements() as $element): ?>
  <?php if (! in_array($element->getName(), array(Wizard::BTN_PREV, Wizard::BTN_NEXT, Wizard::PROGRESS_ELEMENT, $form->getTokenElementName(), $form->getUidElementName()))): ?>
   <div class="module">
+    <div class="header">
       <h3><label for="<?= $element->getId(); ?>"><strong><?= $element->getLabel(); ?></strong></label></h3>
-    <label for="<?= $element->getId(); ?>"><?= $element->getDescription(); ?></label>
+      <div class="element">
         <?= $element; ?>
       </div>
+    </div>
+    <label class="description" for="<?= $element->getId(); ?>"><?= $element->getDescription(); ?></label>
+  </div>
  <?php endif ?>
 <?php endforeach ?>
   <?= $form->getElement($form->getTokenElementName()); ?>

modules/setup/application/views/scripts/form/setup-welcome.phtml

@@ -63,7 +63,7 @@ if (! (false === ($distro = Platform::getLinuxDistro(1)) || $distro === 'linux')
     . ' finished you are able to log in and to explore all the new and stunning features!'
   ); ?></p>
  <?php endif ?>
-  <form id="<?= $form->getName(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>">
+  <form id="<?= $form->getName(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>" class="icinga-controls">
     <?= $form->getElement('token'); ?>
     <?= $form->getElement($form->getTokenElementName()); ?>
     <?= $form->getElement($form->getUidElementName()); ?>

public/css/icinga/controls.less

@@ -2,9 +2,9 @@
 
 // TODO(el): Rename .filter to .filter-control
 
-// Hide auto sumbit info in controls but keep information for screen readers
+// Hide auto sumbit info in controls
 .controls .autosubmit-info {
-  .sr-only();
+  display: none;
 }
 
 
@@ -12,13 +12,34 @@
 .backend-selection {
   float: left;
 
-  > .control-group {
+  .control-label-group, select {
-    padding: 0;
+    display: inline-block;
-
-    > .control-label-group {
-      text-align: left;
-      width: auto;
   }
+
+  select {
+    margin-left: .5em;
+  }
+}
+
+.controls input.search,
+input.search {
+  .transition(border 0.3s ease);
+  .transition(background-image 0.2s ease);
+
+  background-image: url(../img/icons/search.png);
+  background-repeat: no-repeat;
+  background-size: 1em 1em;
+  background-position: .25em center;
+  outline: none;
+  padding-left: 1.5em;
+  width: 20em;
+
+  &:focus {
+    background-image: url(../img/icons/search_icinga_blue.png);
+  }
+
+  &:focus:not([readonly]) {
+    border-color: @icinga-blue;
   }
 }
 
@@ -29,41 +50,37 @@
   margin-bottom: 0.5em;
 }
 
-.backend-selection,
-.pagination-control,
-.sort-controls-container {
-  // Select controls may not respect font-size thus leading to improperly vertical alignment w/o big enough line-height
-  line-height: 2em;
-}
-
 .filter {
   // Display filter control on a new line
   clear: both;
-}
+  margin: .5em 0;
 
-.limiter-control > .control-group {
+  > a {
-  padding: 0;
+    color: @icinga-blue;
-  // Note that the sort-control form does not have padding as it's utilizing different decorators
+    padding: .5em;
-
+    line-height: 1;
-  > .control-label-group {
-    text-align: left;
-    padding: 0;
-    width: 1em;
   }
 
-  > select {
+  > a > i {
-    width: 4.5em;
+    text-align: center;
+     &:before {
+       margin-right: 0;
+     }
   }
 
-  > i {
+  .form input {
-    .sr-only();
+    padding: @vertical-padding @vertical-padding;
   }
 }
 
-.limiter-control,
+.controls .filter {
-.sort-control {
+  form .search {
-  // Display limiter and sort control both on the same line; floating could be used here too to achieve the same
+    height: 2em;
-  display: inline-block;
+  }
+}
+
+.limiter-control > select {
+  margin-left: .5em;
 }
 
 .pagination-control {
@@ -72,12 +89,18 @@
   float: left;
 
   li {
+    line-height: 1;
+
     &.active {
+      border-bottom: 2px solid @icinga-blue;
+
       > a,
       > a:hover {
-        border-bottom: 2px solid @icinga-blue;
+        color: @icinga-blue;
-        color: @icinga-blue
+        /* Compensate border-bottom: 2px */
+        margin-bottom: -2px;
       }
+
       > a:hover {
         background: none;
         cursor: default;
@@ -92,7 +115,7 @@
 
     > a,
     > span {
-      padding: 0 0.5em 0.25em 0.5em;
+      padding: 0.5em;
     }
     > a:hover {
       background-color: @gray-lighter;
@@ -120,8 +143,6 @@
 }
 
 .sort-control {
-  margin-left: 0.25em;
-
   label {
     width: auto;
     margin-right: 0.5em;
@@ -141,15 +162,20 @@
 .sort-controls-container {
   clear: right;
   float: right;
+  display: flex;
 
-  > * {
+  > *:not(:last-child) {
-    vertical-align: middle;
+    margin-right: .5em;
   }
 }
 
 .sort-direction-control {
   margin-left: 0.25em;
   width: 1em;
+
+  .spinner {
+    line-height: 1;
+  }
 }
 
 html.no-js .sort-control form {
@@ -157,3 +183,28 @@ html.no-js .sort-control form {
   margin-left: auto;
   margin-top: 0.25em;
 }
+
+.controls {
+  .control-label-group {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 1.5em;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
+  }
+
+  input,
+  select {
+    padding: .5em;
+    max-width: 16em;
+  }
+
+  select {
+    padding-right: 1.526em;
+    margin-top: 0;
+    margin-bottom: 0;
+    /* compensate inconsistent select height calculations */
+    line-height: 1;
+    max-height: 2em;
+  }
+}

public/css/icinga/main.less

@@ -304,8 +304,11 @@ a:hover > .icon-cancel {
 // Collapsibles
 
 .collapsible.collapsed {
-  position: relative;
   overflow: hidden;
+}
+
+.collapsible.collapsed:not([data-toggle-element]) {
+  position: relative;
 
   &:before, &:after {
     content: "";
@@ -328,7 +331,7 @@ a:hover > .icon-cancel {
   }
 }
 
-.impact .collapsible.collapsed {
+.impact .collapsible.collapsed:not([data-toggle-element]) {
   &:before {
     opacity: 0;
   }

public/css/icinga/menu.less

@@ -55,6 +55,10 @@
   white-space: nowrap;
 }
 
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item {
+  overflow: hidden;
+}
+
 #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
   // Clip overflowing content
   overflow: hidden;
@@ -208,13 +212,13 @@ ul:not(.nav-level-2) > .selected > a {
 }
 
 #menu input.search {
-  background: transparent url('../img/icons/search_white.png') no-repeat 0.7em center;
+  background: transparent url('../img/icons/search_white.png') no-repeat 1em center;
   background-size: 1em auto;
   border: none;
-  border-left: 5px solid transparent;
   color: @menu-color;
   line-height: 2.167em;
-  padding-left: @icon-width + 0.5em;
+  padding: .25em;
+  padding-left: @icon-width + .75em;
   width: 100%;
 
   &.active {
@@ -411,10 +415,13 @@ input[type=text].search-input {
   color: @gray-light;
 }
 
+.search-input ~ .search-reset {
+  opacity: 0;
+}
+
 .search-input:valid ~ .search-reset {
-  animation-duration: .4s;
-  animation-name: search-reset-in;
   display: block;
+  opacity: 1;
 }
 
 .search-input:invalid,
@@ -424,17 +431,6 @@ input[type=text].search-input {
   box-shadow: none;
 }
 
-@keyframes search-reset-in {
-  0% {
-    opacity: 0;
-    transform: translate3d(-20%, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
 // Toggle sidebar button
 #toggle-sidebar {
   // Reset button styles

public/css/icinga/mixins.less

@@ -6,26 +6,32 @@
           box-shadow: @arguments;
 }
 
-.button(@background-color: @body-bg-color, @color: @icinga-blue) {
+.button(@background-color: @body-bg-color, @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) {
   .rounded-corners(3px);
 
   background-color: @background-color;
-  border: 2px solid @color;
+  border: 2px solid @border-font-color;
-  color: @color;
+  color: @border-font-color;
   cursor: pointer;
   line-height: normal;
   outline: none;
   padding: @vertical-padding @horizontal-padding;
 
-  // Transition mixin does not work w/ comma-separated transitions
+  @duration: 0.2s;
-  -webkit-transition: background 0.3s ease, color 0.3s ease;
+  // The trailing semicolon is needed to be able to pass this as a css list
-     -moz-transition: background 0.3s ease, color 0.3s ease;
+  .transition(background @duration, border @duration ease, color @duration ease;);
-       -o-transition: background 0.3s ease, color 0.3s ease;
-          transition: background 0.3s ease, color 0.3s ease;
 
   &:focus,
-  &:hover {
+  &:hover,
-    background-color: @color;
+  &.btn-primary {
+    background-color: @border-font-color;
+    color: @background-color;
+  }
+
+  &.btn-primary:focus,
+  &.btn-primary:hover {
+    background-color: @color-dark;
+    border-color: @color-dark;
     color: @background-color;
   }
 
@@ -46,6 +52,13 @@
   opacity: @opacity;
 }
 
+.appearance(@appearance) {
+  -webkit-appearance: @appearance;
+     -moz-appearance: @appearance;
+      -ms-appearance: @appearance;
+          appearance: @appearance;
+}
+
 .transform(@transform) {
   -webkit-transform: @transform;
      -moz-transform: @transform;

public/css/icinga/setup.less

@@ -6,11 +6,11 @@
 
 
 #setup {
-  .header {
+  > .header {
     width: 100%;
     height: 5.5em;
     background-color: @icinga-blue;
-    border-bottom: 1px solid #d9d9d9d;
+    border-bottom: 1px solid #d9d9d9;
     text-align: center;
 
 
@@ -124,6 +124,11 @@
   }
 }
 
+.setup-content .control-group > * {
+  display: inline-block;
+  margin-right: 1em;
+}
+
 #setup div.buttons {
   margin-top: 1.5em; // Yes, -top and -bottom, keep it like that...
   margin-bottom: 1.5em;
@@ -133,9 +138,18 @@
     left: -1337px;
   }
 
+  .control-button,
+  input[type="submit"] {
+    .button();
+  }
+
   button.finish, a.button-like.login {
     min-width: 25em;
   }
+
+  .spinner {
+    margin-left: 1em;
+  }
 }
 
 #setup div.buttons + ul.hints {
@@ -391,30 +405,35 @@ form#setup_requirements {
 #setup_modules {
   div.module {
     float: left;
-    //width: 15em;
+    width: 15em;
     height: 15em;
     margin: 1em;
     padding: 0.3em;
     border: 1px solid #ccc;
     background-color: snow;
 
+    .header {
+      height: 2.5em;
+      display: flex;
+      justify-content: space-between;
+    }
+
     h3 {
+      margin: 0;
       border: none;
-      margin: 0.5em 0;
+      overflow: hidden;
-      text-align: center;
+      text-overflow: ellipsis;
 
       label {
-        margin: 0;
-        width: 15em;
         cursor: pointer;
       }
     }
 
-    h3 + label {
+    label.description {
       display: inline-block;
-      width: 13.5em;
+      width: 14.4em;
-      height: 13.9em;
+      height: 12em;
-      overflow: visible;
+      overflow: auto;
       cursor: pointer;
       font-weight: normal;
     }

public/css/icinga/widgets.less

@@ -33,6 +33,8 @@
     .message {
       display: inline-block;
       vertical-align: middle;
+      padding-right: 1.5em;
+      font-size: 7/6em;
     }
   }
 }
@@ -45,7 +47,7 @@
   margin-top: -0.75em;
 
   position: absolute;
-  right: 1em;
+  right: .75em;
   top: 50%;
 }
 
@@ -186,41 +188,105 @@ table.multiselect tr[href] td {
 
 #main div.filter {
   form.editor {
+    max-width: 37em;
+
     input[type=text], select {
       width: 12em;
+      height: 2em;
+      line-height: 1;
     }
 
     ul.tree li.active {
-      background-color: #eee;
+      background-color: @gray-lightest;
-    }
-
-    div.buttons {
-      float: right;
     }
 
     button {
       border: none;
       background: none;
     }
+
+    .buttons {
+      padding: .25em 0;
+      text-align: right;
+    }
+
+    .buttons input {
+      .button();
+    }
+
+    .buttons input:not(:last-child) {
+      margin-right:.5em;
+    }
   }
 }
 
-ul.tree select { /* ?? */
+form.role-form {
+  &.icinga-form .control-label-group {
+    width: 20em;
+  }
+
+  .control-label-group em {
+    color: @text-color-light;
+    font-style: normal;
+  }
+
+  fieldset.collapsible {
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    h3 em {
+      font-size: .857em;
+      font-weight: normal;
+      color: @text-color-light;
+    }
+
+    h4 {
+      margin-top: 1.5em;
+    }
+
+    .collapsible-control {
+      border-bottom: 1px solid @gray-light;
+      cursor: pointer;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    .collapsible-control:after {
+      content: "\f103";
+      display: inline-block;
+      font-family: 'ifont';
+      font-weight: normal;
+      padding: 0 .25em;
+      margin-right: .25em;
+      width: 1em;
+      opacity: .6;
+      float: right;
+    }
+
+    &.collapsed .collapsible-control:after {
+      content: "\e87a";
+    }
+  }
+}
+
+ul.tree select:first-of-type { /* ?? */
   margin-bottom: 0.3em;
-  margin-left: 1em;
+  margin-left: 2em;
 }
 
 ul.tree {
   padding: 0;
   margin: 0;
-}
+  padding-top: .5em;
-
-ul.tree, ul.tree ul {
-  padding-left: 1.5em;
 }
 
 ul.tree ul {
-  padding-left: 1.5em;
+  padding-left: 1em;
 }
 
 ul.tree li {
@@ -235,10 +301,10 @@ ul.tree li .handle {
   background-repeat: no-repeat;
   display: inline-block;
   position: absolute;
-  width: 1em;
+  width: 1.5em;
   height: 2em;
-  left: -0.6em;
+  left: 0em;
-  background-position: -3px 3px;
+  background-position: center center;
   z-index: 1;
   cursor: pointer;
 }
@@ -264,9 +330,9 @@ ul.tree li::before, ul.tree li::after {
 /* This is the left vertical line */
 ul.tree li::before {
   border-left-width: 1px;
-  top: 0;
+  top: -.5em;
   width: 1em;
-  height: 100%;
+  height: 2.5em;
   bottom: 1em;
 }
 
@@ -274,13 +340,13 @@ ul.tree li::before {
 ul.tree li::after {
   border-top-width: 1px;
   top: 1em;
-  width: 1em;
+  width: 2em;
   height: 1em;
 }
 
 /* Stop left vertical line at "mid-height" after last nodes (at each level) */
 ul.tree li:last-child::before {
-  height: 1em;
+  height: 1.5em;
 }
 
 /* No border for the root element - there must be only ONE root */
@@ -295,8 +361,8 @@ ul.tree > ul > li::before, ul.tree > ul > li::after {
 
 ul.tree li a {
   display: inline-block;
-  padding-left: 1em;
   line-height: 2em;
+  padding: 0 .5em;
   text-decoration: none;
   color: @gray;
   background-repeat: no-repeat;
@@ -356,6 +422,8 @@ ul.tree li a.error:hover {
     border: 1px solid @gray-lighter;
     box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
     position: absolute;
+    padding: @vertical-padding @horizontal-padding;
+    .rounded-corners();
   }
 
   &.flyover-arrow-top .flyover-content:before {

public/img/select-icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="253px" height="313px" viewBox="0 0 253 313" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="select-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M130.590338,127.704317 L181.781053,180.520134 C183.70293,182.503023 183.65347,185.668461 181.670581,187.590338 C180.737787,188.494431 179.489748,189 178.190714,189 L75.8092858,189 C73.0478621,189 70.8092858,186.761424 70.8092858,184 C70.8092858,182.700967 71.3148548,181.452928 72.2189475,180.520134 L123.409662,127.704317 C125.331539,125.721428 128.496977,125.671968 130.479866,127.593845 C130.517264,127.630092 130.554092,127.66692 130.590338,127.704317 Z" id="triangle" fill="#0095BF" transform="translate(127.000000, 156.500000) scale(1, -1) translate(-127.000000, -156.500000) "></path>
+    </g>
+</svg>

public/js/helpers.js

@@ -5,6 +5,16 @@
 
     'use strict';
 
+    /* Get data value or default */
+    $.fn.getData = function (name, fallback) {
+        var value = this.data(name);
+        if (typeof value !== 'undefined') {
+            return value;
+        }
+
+        return fallback;
+    };
+
     /* Whether a HTML tag has a specific attribute */
     $.fn.hasAttr = function(name) {
         // We have inconsistent behaviour across browsers (false VS undef)

public/js/icinga/behavior/collapsible.js

@@ -16,7 +16,8 @@
 
         this.on('layout-change', this.onLayoutChange, this);
         this.on('rendered', '#layout', this.onRendered, this);
-        this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this);
+        this.on('click', '.collapsible + .collapsible-control, .collapsible > .collapsible-control',
+            this.onControlClicked, this);
 
         this.icinga = icinga;
         this.defaultVisibleRows = 2;
@@ -45,7 +46,19 @@
 
             // Assumes that any newly rendered elements are expanded
             if (_this.canCollapse($collapsible)) {
+                var toggleElement = $collapsible.data('toggleElement');
+                if (!! toggleElement) {
+                    var $toggle = $collapsible.children(toggleElement).first();
+                    if (! $toggle.length) {
+                        _this.icinga.logger.error(
+                            '[Collapsible] Control `' + toggleElement + '` not found in .collapsible', $collapsible);
+                    } else if (! $toggle.is('.collapsible-control')) {
+                        $toggle.addClass('collapsible-control');
+                    }
+                } else {
                     $collapsible.after($('#collapsible-control-ghost').clone().removeAttr('id'));
+                }
+
                 $collapsible.addClass('can-collapse');
 
                 if (! _this.state.has(_this.icinga.utils.getCSSPath($collapsible))) {
@@ -119,7 +132,11 @@
     Collapsible.prototype.onControlClicked = function(event) {
         var _this = event.data.self;
         var $target = $(event.currentTarget);
+
         var $collapsible = $target.prev('.collapsible');
+        if (! $collapsible.length) {
+            $collapsible = $target.parent('.collapsible');
+        }
 
         if (! $collapsible.length) {
             _this.icinga.logger.error('[Collapsible] Collapsible control has no associated .collapsible: ', $target);
@@ -150,7 +167,7 @@
         if ($collapsible.is('table')) {
             return '> tbody > tr';
         } else if ($collapsible.is('ul, ol')) {
-            return '> li';
+            return '> li:not(.collapsible-control)';
         }
 
         return '';
@@ -166,12 +183,12 @@
     Collapsible.prototype.canCollapse = function($collapsible) {
         var rowSelector = this.getRowSelector($collapsible);
         if (!! rowSelector) {
-            var visibleRows = $collapsible.data('visibleRows') || this.defaultVisibleRows;
+            var visibleRows = $collapsible.getData('visibleRows', this.defaultVisibleRows);
 
             return $(rowSelector, $collapsible).length > visibleRows * 2;
         } else {
-            var actualHeight = $collapsible[0].scrollHeight;
+            var actualHeight = $collapsible[0].scrollHeight - parseFloat($collapsible.css('padding-top'));
-            var maxHeight = $collapsible.data('visibleHeight') || this.defaultVisibleHeight;
+            var maxHeight = $collapsible.getData('visibleHeight', this.defaultVisibleHeight);
 
             return actualHeight >= maxHeight * 2;
         }
@@ -183,21 +200,40 @@
      * @param   $collapsible    jQuery      The given collapsible container element
      */
     Collapsible.prototype.collapse = function($collapsible) {
-        $collapsible.addClass('collapsed');
+        var height;
 
         var rowSelector = this.getRowSelector($collapsible);
         if (!! rowSelector) {
-            var $rows = $(rowSelector, $collapsible).slice(0, $collapsible.data('visibleRows') || this.defaultVisibleRows);
+            height = $collapsible[0].scrollHeight;
+            height -= parseFloat($collapsible.css('padding-bottom'));
 
-            var totalHeight = $rows.offset().top - $collapsible.offset().top;
+            var $rows = $(rowSelector, $collapsible).slice(
-            $rows.outerHeight(function(_, height) {
+                $collapsible.getData('visibleRows', this.defaultVisibleRows)
-                totalHeight += height;
+            );
-            });
+            $rows.outerHeight(function (i, contentHeight) {
+                var $el = $(this);
+                var $prev = $el.prev();
 
-            $collapsible.css({display: 'block', height: totalHeight});
+                if (i === 0 && ! $prev.length) { // very first element
-        } else {
+                    height -= parseFloat($el.css('margin-top')) + contentHeight;
-            $collapsible.css({display: 'block', height: $collapsible.data('visibleHeight') || this.defaultVisibleHeight});
+                } else if (i < $rows.length - 1) { // every element but the last one
+                    var prevBottomOffset = $prev.offset().top + $prev.outerHeight();
+                    height -= ($el.offset().top - prevBottomOffset) + contentHeight;
+                } else { // the last element
+                    height -= $el.outerHeight(true);
                 }
+            });
+        } else {
+            height = $collapsible.getData('visibleHeight', this.defaultVisibleHeight);
+            height += parseFloat($collapsible.css('padding-top'));
+
+            if (!! $collapsible.data('toggleElement')) {
+                height += $collapsible.children($collapsible.data('toggleElement')).first().outerHeight(true);
+            }
+        }
+
+        $collapsible.css({display: 'block', height: height, paddingBottom: 0});
+        $collapsible.addClass('collapsed');
     };
 
     /**
@@ -207,7 +243,7 @@
      */
     Collapsible.prototype.expand = function($collapsible) {
         $collapsible.removeClass('collapsed');
-        $collapsible.css({display: '', height: ''});
+        $collapsible.css({display: '', height: '', paddingBottom: ''});
     };
 
     Icinga.Behaviors.Collapsible = Collapsible;

public/js/icinga/events.js

@@ -348,8 +348,8 @@
             }
 
             // Show a spinner depending on how the form is being submitted
-            if (autosubmit && typeof $el !== 'undefined' && $el.next().hasClass('spinner')) {
+            if (autosubmit && typeof $el !== 'undefined' && $el.siblings('.spinner').length) {
-                $el.next().addClass('active');
+                $el.siblings('.spinner').first().addClass('active');
             } else if ($button.length && $button.is('button') && $button.hasClass('animated')) {
                 $button.addClass('active');
             } else if ($button.length && $button.attr('data-progress-label')) {