From c318454a45d1d8bd0442504ff1cc07fa0cdb5fb2 Mon Sep 17 00:00:00 2001
From: Eric Lippmann <eric.lippmann@netways.de>
Date: Thu, 1 Oct 2015 02:49:38 +0200
Subject: [PATCH] CSS: Style form descriptions, hints, notifications and errors

refs #5543
---
 .../Web/Form/Decorator/FormDescriptions.php   |  2 +-
 .../Icinga/Web/Form/Decorator/FormHints.php   |  2 +-
 .../Web/Form/Decorator/FormNotifications.php  |  2 +-
 public/css/icinga/forms.less                  | 67 ++++++++++++++++++-
 4 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/library/Icinga/Web/Form/Decorator/FormDescriptions.php b/library/Icinga/Web/Form/Decorator/FormDescriptions.php
index c5d460df0..aa84472da 100644
--- a/library/Icinga/Web/Form/Decorator/FormDescriptions.php
+++ b/library/Icinga/Web/Form/Decorator/FormDescriptions.php
@@ -35,7 +35,7 @@ class FormDescriptions extends Zend_Form_Decorator_Abstract
             return $content;
         }
 
-        $html = '<ul class="descriptions">';
+        $html = '<ul class="form-description">';
         foreach ($descriptions as $description) {
             if (is_array($description)) {
                 list($description, $properties) = $description;
diff --git a/library/Icinga/Web/Form/Decorator/FormHints.php b/library/Icinga/Web/Form/Decorator/FormHints.php
index 91e906684..f16a07318 100644
--- a/library/Icinga/Web/Form/Decorator/FormHints.php
+++ b/library/Icinga/Web/Form/Decorator/FormHints.php
@@ -67,7 +67,7 @@ class FormHints extends Zend_Form_Decorator_Abstract
             return $content;
         }
 
-        $html = '<ul class="hints">';
+        $html = '<ul class="form-info">';
         foreach ($hints as $hint) {
             if (is_array($hint)) {
                 list($hint, $properties) = $hint;
diff --git a/library/Icinga/Web/Form/Decorator/FormNotifications.php b/library/Icinga/Web/Form/Decorator/FormNotifications.php
index 935c0ce41..a225d7e63 100644
--- a/library/Icinga/Web/Form/Decorator/FormNotifications.php
+++ b/library/Icinga/Web/Form/Decorator/FormNotifications.php
@@ -39,7 +39,7 @@ class FormNotifications extends Zend_Form_Decorator_Abstract
         $html = '<ul class="form-notifications">';
         foreach (array(Form::NOTIFICATION_ERROR, Form::NOTIFICATION_WARNING, Form::NOTIFICATION_INFO) as $type) {
             if (isset($notifications[$type])) {
-                $html .= '<li><ul class="' . $this->getNotificationTypeName($type) . '">';
+                $html .= '<li><ul class="notification-' . $this->getNotificationTypeName($type) . '">';
                 foreach ($notifications[$type] as $message) {
                     if (is_array($message)) {
                         list($message, $properties) = $message;
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index e021d54f6..40edfe1e0 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -14,8 +14,12 @@ input {
 
 input.search {
   padding-left: 20px;
-  background: url('../img/icons/search.png') no-repeat 0;
+  background: @gray-lightest url('../img/icons/search.png') no-repeat 2px;
   background-size: 12px 12px;
+
+  &:focus {
+    background-color: @body-bg-color;
+  }
 }
 
 input, select, textarea {
@@ -42,6 +46,8 @@ form.inline {
   margin-left: 160px;
 }
 
+
+.control-button,
 input[type="submit"] {
   .button();
 }
@@ -65,6 +71,10 @@ button:hover .icon-cancel {
 
 .control-group {
   padding: @vertical-padding @horizontal-padding;
+
+  .errors {
+    color: @color-critical;
+  }
 }
 
 .link-button {
@@ -81,6 +91,61 @@ button:hover .icon-cancel {
   }
 }
 
+// @TODO(el): Fix that
+.form-description, .form-description ul,
+.form-info, .form-info ul,
+.form-notifications, .form-notifications ul,
+.form-errors, .form-errors ul,
+form .errors, form .errors ul {
+  // Reset defaults
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.form-errors {
+  background-color: @color-critical;
+  color: @text-color-inverted;
+}
+
+.form-info {
+  .text-small();
+}
+
+.form-notifications {
+  .notification-error {
+    background-color: @color-critical;
+    color: @text-color-inverted;
+    li {
+      padding: @vertical-padding @horizontal-padding;
+    }
+  }
+  .notification-info {
+    background-color: @color-ok;
+    color: @text-color-inverted;
+    li {
+      padding: @vertical-padding @horizontal-padding;
+    }
+  }
+  .notification-warning {
+    background-color: @color-warning;
+    color: @text-color-inverted;
+    li {
+      padding: @vertical-padding @horizontal-padding;
+    }
+  }
+}
+
+button.animated.active {
+  &.move-up i:before {
+    .animate(move-vertical 500ms infinite linear);
+  }
+
+  &.move-down i:before {
+    .animate(move-vertical 500ms infinite linear reverse);
+  }
+}
+
 //div.config-form-buttons {
 //  margin-top: 5px;
 //}