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

Improve look of our forms
2019-07-30 08:26:08 +02:00 · 2019-07-30 08:26:08 +02:00 · b31dd77812
parent ac03ea67b3 f22d759858
commit b31dd77812
51 changed files with 1004 additions and 777 deletions
--- a/application/controllers/GroupController.php
+++ b/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))
            );
--- a/application/controllers/NavigationController.php
+++ b/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')
        ));
--- a/application/controllers/UserController.php
+++ b/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,
--- a/application/forms/AcknowledgeApplicationStateMessageForm.php
+++ b/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');
    }

--- a/application/forms/Announcement/AcknowledgeAnnouncementForm.php
+++ b/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');
    }

--- a/application/forms/Announcement/AnnouncementForm.php
+++ b/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');
    }

    /**
--- a/application/forms/Authentication/LoginForm.php
+++ b/application/forms/Authentication/LoginForm.php
@ -16,6 +16,8 @@ use Icinga\Web\Url;
 */
 class LoginForm extends Form
 {
+    const DEFAULT_CLASSES = 'icinga-controls';
+
    /**
     * Redirect URL
     */
--- a/application/forms/Config/User/UserForm.php
+++ b/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');
    }

    /**
--- a/application/forms/Config/UserGroup/UserGroupForm.php
+++ b/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');
    }

    /**
--- a/application/forms/ConfirmRemovalForm.php
+++ b/application/forms/ConfirmRemovalForm.php
@ -10,6 +10,8 @@ use Icinga\Web\Form;
 */
 class ConfirmRemovalForm extends Form
 {
+    const DEFAULT_CLASSES = 'icinga-controls';
+
    /**
     * {@inheritdoc}
     */
--- a/application/forms/Control/LimiterControlForm.php
+++ b/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
     *
--- a/application/forms/PreferenceForm.php
+++ b/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'))
                )
            )
        );
--- a/application/forms/Security/RoleForm.php
+++ b/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'
+            $helper->filterName('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'
+            $helper->filterName('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'
+            $helper->filterName('admin') => [
+                'name'          => 'admin',
+                'description'   => $this->translate(
+                    'Grant admin permissions, e.g. manage announcements'
+                )
            ],
-            $helper->filterName('config/*')                     => [
-                'label' => $this->translate('Allow config access'),
-                'name'  => 'config/*'
+            $helper->filterName('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'),
-                    'name'          => $moduleName . '/*',
-                    'isFullPerm'    => true
-                ];
-            }
+            $this->providedPermissions[$moduleName][$helper->filterName($moduleName . '/*')] = [
+                'isFullPerm'    => true,
+                'name'          => $moduleName . '/*',
+                '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'],
-                            'description'   => $spec['label']
+                            'label'         => isset($spec['label']) ? $spec['label'] : $spec['name'],
+                            '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'],
-                                'description'   => $spec['label']
+                                'label'         => isset($spec['label']) ? $spec['label'] : $spec['name'],
+                                '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
+                        ]]
                    ]
                ]);
            }
--- a/application/views/scripts/group/show.phtml
+++ b/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; ?>
--- a/application/views/scripts/layout/menu.phtml
+++ b/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>
--- a/application/views/scripts/list/applicationlog.phtml
+++ b/application/views/scripts/list/applicationlog.phtml
@ -1,9 +1,9 @@
 <?php if (! $this->compact): ?>
 <div class="controls separated">
    <?= $this->tabs ?>
-    <div class="grid">
+    <?= $this->paginator ?>
+    <div class="sort-controls-container">
        <?= $this->limiter ?>
-        <?= $this->paginator ?>
    </div>
 </div>
 <?php endif ?>
--- a/application/views/scripts/user/show.phtml
+++ b/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; ?>
--- a/library/Icinga/Web/Form.php
+++ b/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(),
--- a/library/Icinga/Web/Form/Decorator/FormDescriptions.php
+++ b/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;
        }
    }

--- a/library/Icinga/Web/Form/Decorator/FormNotifications.php
+++ b/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;
        }
    }

--- a/library/Icinga/Web/Form/Element/Checkbox.php
+++ b/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';
+}
--- a/library/Icinga/Web/Form/Element/Textarea.php
+++ b/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);
+        }
+    }
+}
--- a/library/Icinga/Web/View.php
+++ b/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);
    }

--- a/library/Icinga/Web/View/Helper/IcingaCheckbox.php
+++ b/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>';
+    }
+}
--- a/library/Icinga/Web/Widget/Announcements.php
+++ b/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
--- a/library/Icinga/Web/Widget/ApplicationStateMessages.php
+++ b/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>';

--- a/library/Icinga/Web/Widget/FilterEditor.php
+++ b/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" />'
+            . '<input type="submit" name="cancel" value="Cancel" class="button btn-cancel" />'
+            . '<input type="submit" name="submit" value="Apply" class="button btn-primary"/>'
            . '</div>'
            . '<input type="hidden" name="formUID" value="FilterEditor">'
            . '</form>'
--- a/library/Icinga/Web/Widget/SortBox.php
+++ b/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',
--- a/library/Icinga/Web/Wizard.php
+++ b/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'),
--- a/modules/monitoring/application/forms/Command/Instance/ToggleInstanceFeaturesCommandForm.php
+++ b/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');
    }

    /**
--- a/modules/monitoring/application/forms/Command/Object/ToggleObjectFeaturesCommandForm.php
+++ b/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'),
--- a/modules/monitoring/application/forms/Config/BackendConfigForm.php
+++ b/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
--- a/modules/monitoring/library/Monitoring/Web/Widget/SelectBox.php
+++ b/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();
--- a/modules/monitoring/public/css/module.less
+++ b/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;
-    padding-left: 0;
+    margin-right: 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"],
-  input[type="radio"] {
-    margin: @table-column-padding;
+  .toggle-switch {
+    margin-left: @table-column-padding;
  }
 }

--- a/modules/setup/application/views/scripts/form/setup-modules.phtml
+++ b/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,9 +17,13 @@ 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">
-    <h3><label for="<?= $element->getId(); ?>"><strong><?= $element->getLabel(); ?></strong></label></h3>
-    <label for="<?= $element->getId(); ?>"><?= $element->getDescription(); ?></label>
-    <?= $element; ?>
+    <div class="header">
+      <h3><label for="<?= $element->getId(); ?>"><strong><?= $element->getLabel(); ?></strong></label></h3>
+      <div class="element">
+        <?= $element; ?>
+      </div>
+    </div>
+    <label class="description" for="<?= $element->getId(); ?>"><?= $element->getDescription(); ?></label>
  </div>
 <?php endif ?>
 <?php endforeach ?>
--- a/modules/setup/application/views/scripts/form/setup-welcome.phtml
+++ b/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()); ?>
--- a/public/css/icinga/controls.less
+++ b/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 {
-    padding: 0;
+  .control-label-group, select {
+    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 {
-  padding: 0;
-  // Note that the sort-control form does not have padding as it's utilizing different decorators
-
-  > .control-label-group {
-    text-align: left;
-    padding: 0;
-    width: 1em;
+  > a {
+    color: @icinga-blue;
+    padding: .5em;
+    line-height: 1;
  }

-  > select {
-    width: 4.5em;
+  > a > i {
+    text-align: center;
+     &:before {
+       margin-right: 0;
+     }
  }

-  > i {
-    .sr-only();
+  .form input {
+    padding: @vertical-padding @vertical-padding;
  }
 }

-.limiter-control,
-.sort-control {
-  // Display limiter and sort control both on the same line; floating could be used here too to achieve the same
-  display: inline-block;
+.controls .filter {
+  form .search {
+    height: 2em;
+  }
+}
+
+.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;

-  > * {
-    vertical-align: middle;
+  > *:not(:last-child) {
+    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;
+  }
+}
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
--- a/public/css/icinga/main.less
+++ b/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;
  }
--- a/public/css/icinga/menu.less
+++ b/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
--- a/public/css/icinga/mixins.less
+++ b/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;
-  color: @color;
+  border: 2px solid @border-font-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
-  -webkit-transition: background 0.3s ease, color 0.3s ease;
-     -moz-transition: background 0.3s ease, color 0.3s ease;
-       -o-transition: background 0.3s ease, color 0.3s ease;
-          transition: background 0.3s ease, color 0.3s ease;
+  @duration: 0.2s;
+  // The trailing semicolon is needed to be able to pass this as a css list
+  .transition(background @duration, border @duration ease, color @duration ease;);

  &:focus,
-  &:hover {
-    background-color: @color;
+  &:hover,
+  &.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;
--- a/public/css/icinga/setup.less
+++ b/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;
-      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;

      label {
-        margin: 0;
-        width: 15em;
        cursor: pointer;
      }
    }

-    h3 + label {
+    label.description {
      display: inline-block;
-      width: 13.5em;
-      height: 13.9em;
-      overflow: visible;
+      width: 14.4em;
+      height: 12em;
+      overflow: auto;
      cursor: pointer;
      font-weight: normal;
    }
--- a/public/css/icinga/widgets.less
+++ b/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;
-    }
-
-    div.buttons {
-      float: right;
+      background-color: @gray-lightest;
    }

    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;
-}
-
-ul.tree, ul.tree ul {
-  padding-left: 1.5em;
+  padding-top: .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;
-  background-position: -3px 3px;
+  left: 0em;
+  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 {
--- a/public/img/select-icon-2x.png
+++ b/public/img/select-icon-2x.png
--- a/public/img/select-icon.png
+++ b/public/img/select-icon.png
--- a/public/img/select-icon.svg
+++ b/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>
--- a/public/img/textarea-corner-2x.png
+++ b/public/img/textarea-corner-2x.png
--- a/public/img/textarea-corner.png
+++ b/public/img/textarea-corner.png
--- a/public/js/helpers.js
+++ b/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)
--- a/public/js/icinga/behavior/collapsible.js
+++ b/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)) {
-                $collapsible.after($('#collapsible-control-ghost').clone().removeAttr('id'));
+                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 maxHeight = $collapsible.data('visibleHeight') || this.defaultVisibleHeight;
+            var actualHeight = $collapsible[0].scrollHeight - parseFloat($collapsible.css('padding-top'));
+            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;
-            $rows.outerHeight(function(_, height) {
-                totalHeight += height;
+            var $rows = $(rowSelector, $collapsible).slice(
+                $collapsible.getData('visibleRows', this.defaultVisibleRows)
+            );
+            $rows.outerHeight(function (i, contentHeight) {
+                var $el = $(this);
+                var $prev = $el.prev();
+
+                if (i === 0 && ! $prev.length) { // very first element
+                    height -= parseFloat($el.css('margin-top')) + contentHeight;
+                } 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);
+                }
            });
-
-            $collapsible.css({display: 'block', height: totalHeight});
        } else {
-            $collapsible.css({display: 'block', height: $collapsible.data('visibleHeight') || this.defaultVisibleHeight});
+            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;
--- a/public/js/icinga/events.js
+++ b/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')) {
-                $el.next().addClass('active');
+            if (autosubmit && typeof $el !== 'undefined' && $el.siblings('.spinner').length) {
+                $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')) {