diff --git a/library/Icinga/Web/Form.php b/library/Icinga/Web/Form.php index fdc513c41..5f0395634 100644 --- a/library/Icinga/Web/Form.php +++ b/library/Icinga/Web/Form.php @@ -134,6 +134,7 @@ class Form extends Zend_Form public static $defaultElementDecorators = array( array('ViewHelper', array('separator' => '')), array('Errors', array('separator' => '')), + array('Help'), array('Label', array('separator' => '')), array('HtmlTag', array('tag' => 'div', 'class' => 'element')) ); @@ -538,13 +539,6 @@ class Form extends Zend_Form ) )); - if (($description = $el->getDescription()) !== null && ($label = $el->getDecorator('label')) !== false) { - $label->setOptions(array( - 'title' => $description, - 'class' => 'has-feedback' - )); - } - if ($el->getAttrib('autosubmit')) { $noScript = new NoScriptApply(); // Non-JS environments $decorators = $el->getDecorators(); @@ -590,6 +584,10 @@ class Form extends Zend_Form } } + if ($element->getDescription() !== null && ($help = $element->getDecorator('help')) !== false) { + $element->setAttrib('aria-describedby', $help->setAccessible()->getDescriptionId($element)); + } + return $element; } diff --git a/library/Icinga/Web/Form/Decorator/Help.php b/library/Icinga/Web/Form/Decorator/Help.php new file mode 100644 index 000000000..444f1c664 --- /dev/null +++ b/library/Icinga/Web/Form/Decorator/Help.php @@ -0,0 +1,93 @@ + should be created to describe the decorated form element + * + * @var bool + */ + protected $accessible = false; + + /** + * The id used to identify the description associated with the decorated form element + * + * @var string + */ + protected $descriptionId; + + /** + * Set whether a hidden should be created to describe the decorated form element + * + * @param bool $state + * + * @return Feedback + */ + public function setAccessible($state = true) + { + $this->accessible = (bool) $state; + return $this; + } + + /** + * Return the id used to identify the description associated with the decorated element + * + * @param Zend_Form_Element $element The element for which to generate a id + * + * @return string + */ + public function getDescriptionId(Zend_Form_Element $element = null) + { + if ($this->descriptionId === null) { + $element = $element ?: $this->getElement(); + $this->descriptionId = $this->getView()->protectId($element->getId() . '_desc'); + } + + return $this->descriptionId; + } + + /** + * Return the current view + * + * @return View + */ + protected function getView() + { + return Icinga::app()->getViewRenderer()->view; + } + + /** + * Add a help icon to the left of an element + * + * @param string $content The html rendered so far + * + * @return string The updated html + */ + public function render($content = '') + { + if ($content && ($description = $this->getElement()->getDescription()) !== null) { + if ($this->accessible) { + $content = '' + . $description + . '' . $content; + } + + $content = $this->getView()->icon('help', $description) . $content; + } + + return $content; + } +} diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index b0468234a..d455bf654 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -190,38 +190,11 @@ form .description { display: block; } -form label.has-feedback:after { - content: '\e85b'; - font-family: "ifont"; - font-style: normal; - font-weight: normal; - speak: none; - - text-decoration: inherit; - width: 1em; - margin-right: .2em; - text-align: center; - /* opacity: .8; */ - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* fix buttons height, for twitter bootstrap */ - line-height: 1em; - - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - margin-left: .2em; - - /* you can be more comfortable with increased icons size */ - /* font-size: 120%; */ - - /* Uncomment for 3D effect */ - /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ -} - select.grant-permissions { height: 20em; width: auto; } + +label + input, label + select, label + input + input { + margin-left: 1.6em; +} \ No newline at end of file diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index 0211fdc35..5bc21d940 100644 --- a/public/css/icinga/login.less +++ b/public/css/icinga/login.less @@ -79,9 +79,10 @@ form input { width: 18em; padding: 0.5em; - background: #ddd; - color: #333; + background: #ddd; + color: #333; border: 1px solid #ddd; + margin-left: 0; } form input:focus {