On 12/12/2011 09:10 PM, Endi Sukma Dewata wrote:
On 12/12/2011 12:21 PM, Petr Vobornik wrote:
Facet tabs are now colored according to their group.
https://fedorahosted.org/freeipa/ticket/1976
This is how it looks:
http://edewata.fedorapeople.org/freeipa/install/ui/#identity=group&navigation=identity&group-facet=default&group-pkey=editors
Some issues:
1. The original code uses different background images for
active/inactive tabs. I think the mockup in the ticket is also showing
different backgrounds. The new code uses the same background.
Fixed, using the background from mockup - but honestly I don't see much
difference.
2. The color is coming from an image. It might be better to use CSS
color so we can change/add new colors without changing the image. Low
priority.
It would be quite interesting combinations of sprite image with parts of
the background transparent and linear gradient made by CSS style. Not
sure if it would work, probably yes.
3. This is probably not an issue, but the light blue and dark blue may
look too similar to some people. We can change it later if necessary.
Maybe, looks fine to me. I used the colors from Kyle.
4. Also changed padding in facet tab to vertically center the text.
--
Petr Vobornik
From e69e0336a3d71eed36de02b32bcdb17b8d481562 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Mon, 12 Dec 2011 19:16:46 +0100
Subject: [PATCH] Added facet tabs coloring
Facet tabs are now colored according to their group.
https://fedorahosted.org/freeipa/ticket/1976
---
install/ui/facet.js | 2 +-
install/ui/images/facet-tab-off.png | Bin 957 -> 228 bytes
install/ui/images/facet-tab-on.png | Bin 941 -> 192 bytes
install/ui/ipa.css | 34 +++++++++++++++++++++++++++-------
4 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/install/ui/facet.js b/install/ui/facet.js
index 316e90cc564e18268a10ac9a1c2fda1c1c384aa4..5f658c141b006f0b931c9adb6cdf3b28a781e5f2 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 a5032f22c24564e82f9721d418a6f8d279344e61..365edc72b53b95aed78a6aa877dfc2e4581ad01a 100644
GIT binary patch
delta 213
zcmdnX{)BOYczq%V8v_G__`}neffQqLkh>GZx^prwfgH9ZZ+91l{~)+v@AAn&5zYdS
z$YKTtZeb8+WSBKa0w~B{;_2(kew&AvlZQ26=jS;<p%hOS#}J9j$q5B#{+_>3`s#5#
zTbpb7KVw4!Ao%m^>uY;qWo2b%VP<A#KjzE-|Nmd8W5n6QnBn&K|9^RBvF;=`JNvf(
zJg4(Z|E6=qEj5jhJ-Oh?hxrF<AI|;nV}1T^s)SD;3xl{{>dtdNznuhH$l&Sf=d#Wz
Gp$P!CzfUm$
literal 957
zcmaJ=J#W)M7&a{fs_2FwMGS|#68p|=632>(96M<v;iyU?nz4?3Nvza9V_zC4Q&T2Z
z7CsgvX2c(0KnNBF#J~oB02o000m?Z|QU-#h^WA%Tp6C6%2Ya=h^|kA39LKF!ca1vR
zFR*p<(hB=O`f~Rx+cs#qMH{3;hgOI=%^__Js-D%wb!<7Kd+%|9<5qdM*`h7;j$#u}
zuo8?AdjVr}T%i~Tmfgn`v~kz<RsQFz*F10?mEX^p&<u3kb9cufZj5V9d)&A44qv<t
z3bDcjJWMSRdxw6c#4114RoFSX7I`p*(7wu_1=TY5fKEaTG6GE7FbhEz3219Om&@G(
z5=2mhl8B@<$|+lt0wI`vJo6Sh9i?tmX1<uE@;yoeMHGj_p)lMMNZ1uoKA%rCBq_}h
z>1gCrD^B~-=3K$RksZ1Lb%_rWMXOB)ROMNuXDN8WLe`IFWnu*rV=EAm0F#vFK-2s`
z)bkeTh}Q9Wy#ExAnxg=VbsUjFXtTz3HWOEYqKDX`By19LIIrSfk5CfzNC5Ok2AG!Z
z`iVWoo2F9rBWn3Jt{N)O6a?3G6gewvI?C#DSwjewp{!@+Qf6B+5HcW?;GAm^d*ET8
z&biJx*I3F;M!^f1X9I`s5q2se@xU}?#a$kYwp4G%b(Y6cTFMn!Fk;f!zZyNiV$+ix
z7h}te#o%L~O?$}3`oph>zuA*ORYPmWpWE{A$BnlipB0~^Ha6Zoo=hg+PESt{o?f~9
m>Hdpr?<!Y!_E(=zj#e(FxbMf{<XBE=$%CqvYsSmc!O0(tqAKzL
diff --git a/install/ui/images/facet-tab-on.png b/install/ui/images/facet-tab-on.png
index 37b70cd02e1274284477b0785093269facfdfd78..2e2d5d839cd9a0385776aeb83e6bdcbdce9e82f3 100644
GIT binary patch
delta 177
zcmZ3>et>a;czq%V69WUojOLgYAjMc5<nF|<?wrg^Acrl<+ueoXKL{?^yL>WGgtNdS
zvY3H^TNs2H8D`Cq01C2~c>21s-{#@v<m3qv+FuJ4a`1F<43W5;oKSEk^@Y{fiH(UD
zW!2c&*xK~t_Zb)(7+erG{_xY#KxhBeqgrPYewQ4$b6~-f0}u9n;QJg~nP0V=kwNmL
W$eMKKw0A(m7(8A5T-G@yGywpac06YQ
literal 941
zcmaJ=J#W)M7&fp}6_prRKpn2G#6;{nr*RxBZb|HvTEbD3SP&-a*q6jg?KAd;I2jm_
z82AMR!EfLXFi@#14D1L7RwnobtvKfkh6GFJyZ7`w&-=W0@4af&?{971-sCuL%RDlg
zY`((A&c;>tKmGpjC!223TAQ{=myVnma}|$tFfaqBhnv{(#!o-vGRIxxeY;KD)&tcg
zf#75qAq^tN=D6}f8aeI&Q_#UZKh*f&A3pNH_cZ=d!Gcz#<Gz11iE(REx82FWEqVOG
zJ}9Ru69_PMKpLEciJEHsR99u|Y+K~P6ha3YKQq;~8bBv81_c4;Tqr{zBLU_2ipAnx
zAVCC0D2YhQp`x0XR0zTR<5{-Y>#9xTaGr}r8sDchQblnz8VRGkK;oW=N~Kb!AxSxg
z$R*>DI%zIUb{7f;PTbg!s82$WDLNf8q#Dnh&PoWPrEHkYkBJ?am^zV&1eley09w}n
zp+T@jC$x$G`dulU*y9L`O`MQn?6QmN?q;bXRgbYlNo*5xvN**?pHPzYNd)v(0a%Xf
zhgm$uTb62u33Wmjn})_S1;O_{Rgsm7j*3vJRS-fosOYj%E$m4KLI#8qTyPEI4g(z0
z1=nNTLSCurMxJr2`buur3PHp&8#wl#Vec>|0hpGo`fI(&we?<RTyKS!Ssn7>TCT{<
zh}p&dbJ2?});-yB*|scLHa-qnx5uol-`=s$*^}5Yjf$Oq>nNjN+vlg^lh<F{kKa7M
ixcu_z?Cc)7e&d+C`EKLo_T|No>;ajzy79hx{NfLs1|=B)
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index a739689f3e12e528993d497570f1ad0458e2158d..ab27bcfcb9b86d5988d67752492e34da07a1f4f3 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 {
--
1.7.6.4
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
