WIP: New form styles

Signed-off-by: Eric Lippmann <eric.lippmann@icinga.com>
2019-01-28 09:37:34 +01:00 · 2019-01-28 09:37:34 +01:00 · bf48b6d26b
parent 23590c5e20
commit bf48b6d26b
13 changed files with 482 additions and 599 deletions
--- 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 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
     *
--- 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/library/Icinga/Web/Form.php
+++ b/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(),
--- 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,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;
        }
    }

--- a/library/vendor/Zend/View/Helper/FormCheckbox.php
+++ b/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;
    }
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
--- a/public/css/icinga/mixins.less
+++ b/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;
-  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;
+  //throwaway local variable because transition mixin does not work w/ comma-separated transitions
+  @transition: background @duration, border @duration ease, color @duration ease;
+  .transition(@transition);

  &: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 +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;
--- 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