Added facet tabs coloring

Facet tabs are now colored according to their group.

https://fedorahosted.org/freeipa/ticket/1976

4 files changed, 28 insertions, 8 deletions

diff --git a/install/ui/facet.js b/install/ui/facet.js
index 316e90cc5..5f658c141 100644
--- a/install/ui/facet.js
+++ b/install/ui/facet.js
@@ -280,7 +280,7 @@ IPA.facet_header = function(spec) {
 
     that.create_facet_group = function(container, facet_group) {
 
-        var section = $('<span/>', {
+        var section = $('<div/>', {
             name: facet_group.name,
             'class': 'facet-group'
         }).appendTo(container);
diff --git a/install/ui/images/facet-tab-off.png b/install/ui/images/facet-tab-off.png
index a5032f22c..365edc72b 100644
--- a/install/ui/images/facet-tab-off.png
+++ b/install/ui/images/facet-tab-off.png
diff --git a/install/ui/images/facet-tab-on.png b/install/ui/images/facet-tab-on.png
index 37b70cd02..2e2d5d839 100644
--- a/install/ui/images/facet-tab-on.png
+++ b/install/ui/images/facet-tab-on.png
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index a739689f3..ab27bcfcb 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -546,23 +546,17 @@ span.main-nav-off > a:visited {
     border-left: 1px solid #c9c3ba;
     border-right: 1px solid #c9c3ba;
     margin: 0 0 0;
-    padding: 6px 16px;
+    padding: 8px 16px 4px 16px;
     text-decoration: none;
     display: inline-block;
     line-height: 19px;
-    background-image: url(images/facet-tab-off.png);
     color: #666666;
 }
 
-.facet-tab li a:hover {
-    background-color: #f1f0ee;
-}
-
 .facet-tab li a.selected {
     color: #6C6F73;
     background-color: #f1f0ee;
     font-weight: bold;
-    background-image: url(images/facet-tab-on.png);
     height: 20px;
 }
 
@@ -570,6 +564,32 @@ span.main-nav-off > a:visited {
     margin-left:1em;  margin-right:1em;
 }
 
+
+/* Facet tabs coloring */
+
+.facet-group li a {
+    background-image: url(images/facet-tab-off.png);
+    background-repeat: repeat-x;
+    background-position: 0px -33px;
+}
+
+.facet-group li a.selected {
+    background-image: url(images/facet-tab-on.png);
+}
+
+div[name=settings].facet-group li a {
+    background-position: 0px -66px;
+}
+
+.facet-group li[name^=member] a,
+.facet-group li[name^=managedby] a {
+    background-position: 0px 0px;
+}
+
+.facet-group li[name^=memberof] a {
+    background-position: 0px -33px;
+}
+
 /* ---- Facet Controls ---- */
 
 .facet-controls {