Enhance toggle-switch, spinner and control-info placement

tested with Chromium, IE11 (Win7), Edge (Win10)

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

@@ -1,43 +1,9 @@
 <?php
-/* Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
+/* Icinga Web 2 | (c) 2019 Icinga GmbH | GPLv2+ */
 
 namespace Icinga\Web\Form\Element;
 
 class Checkbox extends \Zend_Form_Element_Checkbox
 {
-    public function loadDefaultDecorators()
+    public $helper = 'icingaCheckbox';
-    {
-        parent::loadDefaultDecorators();
-
-        if (! $this->loadDefaultDecoratorsIsDisabled()) {
-            $class = 'toggle-switch';
-            if ($this->getAttrib('disabled')) {
-                $class .= ' disabled';
-            }
-            $currentDecorators = $this->getDecorators();
-            $pos = array_search('Zend_Form_Decorator_ViewHelper', array_keys($currentDecorators), true);
-            $decorators = array_slice($currentDecorators, 0, $pos);
-            $decorators += [
-                'ToggleSwitchOpen' => [
-                    ['ToggleSwitchOpen' => 'HtmlTag'],
-                    ['tag' => 'label', 'class' => $class, 'openOnly' => true, 'placement' => 'append']
-                ]
-            ];
-            $decorators += array_slice($currentDecorators, $pos, 1);
-            $decorators += [
-                'ToggleSlider'      => [
-                    ['ToggleSlider' => 'HtmlTag'],
-                    ['tag' => 'span', 'class' => 'toggle-slider', 'placement' => 'append']
-                ],
-                'ToggleSwitchClose' => [
-                    ['ToggleSwitchClose' => 'HtmlTag'],
-                    ['tag' => 'label', 'closeOnly' => true, 'placement' => 'append']
-                ]
-            ];
-            $decorators += array_slice($currentDecorators, $pos + 1);
-            $this->setDecorators($decorators);
-        }
-
-        return $this;
-    }
 }

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>';
+    }
+}

public/css/icinga/forms.less

@@ -26,11 +26,11 @@ form.icinga-forms {
   .control-group {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 -.5em;
+    margin: 1em -.5em;
     align-items: flex-start;
 
     > * {
-      margin: .5em;
+      margin-right: 1em;
     }
   }
 
@@ -83,20 +83,20 @@ form.icinga-forms .control-group .control-label-group {
   width: @name-value-table-name-width;
 }
 
-form.icinga-forms .control-group .control-info {
+.icinga-controls .control-info {
   line-height: 2.25em;
-  margin-right: 1em;
   opacity: .6;
-  margin-left: 0;
 
   &:before {
     margin-right: 0;
   }
 }
 
+form.icinga-forms .control-group .control-info {
+  margin-left: -.5em;
+}
 form.icinga-forms .control-group .toggle-switch ~ .control-info {
-  position: relative;
+  margin-left: 0;
-  margin-left: .5em;
 }
 
 form.inline {
@@ -109,10 +109,6 @@ form.inline {
   }
 }
 
-.icinga-controls select ~ .spinner:before {
-  margin-left: -3.5em;
-}
-
 // General input styles
 
 .icinga-controls {
@@ -147,10 +143,7 @@ form.icinga-forms {
   .toggle-switch,
   button,
   select,
-  textarea,
+  textarea {
-  button,
-  .toggle-switch,
-  input {
     border: none;
     .rounded-corners(.25em);
     .appearance(none);
@@ -174,7 +167,8 @@ form.icinga-forms {
 form.icinga-forms {
   .control-group .toggle-switch,
   .form-controls .toggle-switch {
-    margin: 0.875em .5em;
+    margin-top: 0.5em*0.666666667;
+    margin-bottom: 0.5em*0.666666667;
   }
 }
 
@@ -220,12 +214,26 @@ form.inline select {
   text-align: left;
 }
 
-.icinga-controls .spinner {
+.icinga-controls {
-  margin: .5em 0;
+  input ~ .spinner,
-  line-height: 2.5em;
+  button ~ .spinner,
+  textarea ~ .spinner {
+    margin-top: 0.5em*0.666666667;
+    margin-bottom: 0.5em*0.666666667;
+
+    &:before {
+      margin-left: .5em;
+      opacity: 0.4;
+    }
+  }
+}
+
+/* selects get their spinner specifically placed */
+.icinga-controls select + .spinner {
+  margin: 0.5em*0.666666667 0;
 
   &:before {
-    margin-left: .5em;
+    margin-left: -3.75em;
     opacity: 0.4;
   }
 }
@@ -268,10 +276,12 @@ form.icinga-forms .form-controls {
 }
 
 // Hide default checkbox
-.icinga-controls .toggle-switch input {
+.icinga-controls input[type="checkbox"] {
   opacity: 0;
   width: 0;
   height: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .icinga-controls .toggle-switch .toggle-slider {
@@ -311,16 +321,16 @@ form.icinga-forms .form-controls {
   transition: @transition;
 }
 
-.icinga-controls .toggle-switch input:checked + .toggle-slider {
+.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
   background-color: @icinga-blue;
   border: 1px solid @icinga-blue;
 }
 
-.icinga-controls .toggle-switch input:focus + .toggle-slider {
+.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
   box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
 }
 
-.icinga-controls .toggle-switch input:checked + .toggle-slider:before {
+.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
   border: 1px solid @icinga-blue;
   left: 100%;
   margin-left: -4/3em;