WIP: New form styles

Signed-off-by: Eric Lippmann <eric.lippmann@icinga.com>

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 inline';
 
     /**
      * Default limit
@@ -37,6 +37,15 @@ class LimiterControlForm extends Form
         500 => '500'
     );
 
+    public static $defaultElementDecorators = array(
+        array('Label', array('tag'=>'span', 'separator' => '')),
+        array('Help', array('placement' => 'APPEND')),
+        array(array('labelWrap' => 'HtmlTag'), array('tag' => 'div')),
+        array('ViewHelper', array('separator' => '')),
+        array('Errors', array('separator' => '')),
+        array('HtmlTag', array('tag' => 'div', 'class' => 'limiter-control-form'))
+    );
+
     /**
      * 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'))
                 )
             )
         );

library/Icinga/Web/Form.php

@@ -211,9 +211,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'))
     );
@@ -834,6 +834,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,10 @@ class FormNotifications extends Zend_Form_Decorator_Abstract
             return $content;
         }
 
-        $html = '<ul class="form-notifications">';
+        $html = '<div class="form-notifications">'
+            . Icinga::app()->getViewRenderer()->view->icon('ok', '', ['class' => 'form-notification-icon'])
+            . '<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) . '">';
@@ -57,9 +61,9 @@ class FormNotifications 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/vendor/Zend/View/Helper/FormCheckbox.php

@@ -76,8 +76,10 @@ class Zend_View_Helper_FormCheckbox extends Zend_View_Helper_FormElement
 
         // is the element disabled?
         $disabled = '';
+        $classDisabled = '';
         if ($disable) {
             $disabled = ' disabled="disabled"';
+            $classDisabled = ' disabled';
         }
 
         // build the element
@@ -92,14 +94,17 @@ class Zend_View_Helper_FormCheckbox extends Zend_View_Helper_FormElement
             unset($attribs['disableHidden']);
         }
 
-        $xhtml .= '<input type="checkbox"'
+        $xhtml .= '<label class="toggle-switch' . $classDisabled .'">'
+                . '<input type="checkbox"'
                 . ' name="' . $this->view->escape($name) . '"'
                 . ' id="' . $this->view->escape($id) . '"'
                 . ' value="' . $this->view->escape($checkedOptions['checkedValue']) . '"'
                 . $checkedOptions['checkedString']
                 . $disabled
                 . $this->_htmlAttribs($attribs)
-                . $this->getClosingBracket();
+                . $this->getClosingBracket()
+                . '<span class="toggle-slider"></span>'
+                . '</label>';
 
         return $xhtml;
     }

public/css/icinga/mixins.less

@@ -6,26 +6,34 @@
           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
+
-  -webkit-transition: background 0.3s ease, color 0.3s ease;
+  @duration: 0.2s;
-     -moz-transition: background 0.3s ease, color 0.3s ease;
+  //throwaway local variable because transition mixin does not work w/ comma-separated transitions
-       -o-transition: background 0.3s ease, color 0.3s ease;
+  @transition: background @duration, border @duration ease, color @duration ease;
-          transition: background 0.3s ease, color 0.3s ease;
+  .transition(@transition);
 
   &: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 +54,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/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>