Add visual cues to configuration panels

Make it easier to recognize which plugins are enabled and which are
disabled. Also make it easier to recognize when a plugin has just changed
state, by flashing its row (help also realize it may have moved up/down)

Based on concept work by Petr Vobornik

Signed-off-by: Simo Sorce <simo@redhat.com>
Reviewed-by: Patrick Uiterwijk <puiterwijk@redhat.com>

3 files changed, 100 insertions, 3 deletions

diff --git a/less/admin.less b/less/admin.less
index 0b71139..f58f3ab 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -81,9 +81,11 @@
 // Open Sans Fonts
 @import "font.less";
 
+// Admin Interface styles
+@import "admin/variables.less";
+@import "admin/widgets.less";
+
+
 // remove warnings
 @fa-var-angle-right: ">";
 @fa-var-angle-down: "\f107";
-
-// bigger default font
-@font-size-base:    14px;
diff --git a/less/admin/variables.less b/less/admin/variables.less
new file mode 100644
index 0000000..e30fd6c
--- /dev/null
+++ b/less/admin/variables.less
@@ -0,0 +1,9 @@
+// Copyright (C) 2014  Ipsilon project Contributors, for licensee see COPYING
+
+// Basic variables
+@state-enabled-bg:  #ffffff;
+@state-disabled-bg:  #ededed;
+
+// bigger default font
+@font-size-base:    14px;
+
diff --git a/less/admin/widgets.less b/less/admin/widgets.less
new file mode 100644
index 0000000..fd68fed
--- /dev/null
+++ b/less/admin/widgets.less
@@ -0,0 +1,86 @@
+// Copyright (C) 2014  Ipsilon project Contributors, for licensee see COPYING
+
+// Widgets
+
+// imitate tables
+.ipsilon-row {
+
+    // reuse bootstrap colors
+    border-top: 1px solid @table-border-color;
+    padding: @table-cell-padding;
+
+    // to have equal height - basically a hack, increase if default elements are
+    // larger. Proper equal height would have to be done in JavaScript.
+    min-height: @input-height-large;
+}
+
+
+.ipsilon-row:last-child {
+    border-bottom: 1px solid @table-border-color;
+}
+
+// add to div with 'ipsilon-row' class to change background
+.hl-enabled {
+    // ugly color
+    background-color: @state-enabled-bg;
+}
+
+.hl-disabled {
+    background-color: @state-disabled-bg;
+
+    strong {
+        color: #555;
+    }
+}
+
+// animation
+// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
+
+@keyframes bgfadein {
+    from {
+        background-color: @state-disabled-bg;
+    }
+    to {
+        background-color: @state-enabled-bg;
+    }
+}
+
+@keyframes bgfadeout {
+    from {
+        background-color: @state-enabled-bg;
+    }
+    to {
+        background-color: @state-disabled-bg;
+    }
+}
+
+// add these classes to rows to hightlight them on load
+.hl-enabled-new {
+    animation-duration: 2s;
+    animation-name: bgfadein;
+    animation-fill-mode: both
+}
+
+.hl-disabled-new {
+    animation-duration: 2s;
+    animation-name: bgfadeout;
+    animation-fill-mode: both
+}
+
+@keyframes flashout {
+    0% {
+        background-color: @state-enabled-bg;
+    }
+    50% {
+        background-color: @state-info-bg;
+    }
+    100% {
+        background-color: @state-enabled-bg;
+    }
+}
+
+.hl-enabled-flash {
+    animation-duration: 1s;
+    animation-name: flashout;
+    animation-fill-mode: both
+}