Incremental stylesheet and layout changes.
From 3b012bda65c4ca342e068e5c34f9bf3affd5631a Mon Sep 17 00:00:00 2001
From: Adam Young <ayo...@redhat.com>
Date: Tue, 9 Nov 2010 20:04:49 -0500
Subject: [PATCH] layout
Closer to the layout from the spec
The facets have been moved to the action panel, to the left of the page
the facets are now rendered in an area of the screen with a client class
---
install/static/Mainnav-background.png | Bin 136 -> 225 bytes
install/static/Mainnav-offtab.png | Bin 145 -> 189 bytes
install/static/Mainnav-ontab.png | Bin 142 -> 146 bytes
install/static/Subnav-background.png | Bin 140 -> 187 bytes
install/static/associate.js | 31 +++++++------
install/static/details.js | 3 +-
install/static/entity.js | 12 +++--
install/static/ipa.css | 81 +++++++++++++++++++++++++++-----
install/static/policy.js | 2 +-
install/static/search.js | 1 -
install/static/test/entity_tests.js | 3 +-
11 files changed, 96 insertions(+), 37 deletions(-)
diff --git a/install/static/Mainnav-background.png b/install/static/Mainnav-background.png
index c3fdab317804a083067b00f92d81b45776902506..5487ca3c5dfaa2f68c694c0bca32d22cbec8c8a4 100644
GIT binary patch
delta 210
zcmeb...@okygrnjighkejwwtsnhg=%xjqkej16rj$yd$jc6vx;4}uH!E}sk(;Vkfo
zEM{Qf76xHPhFNnYKw3*YeO=jaadR;;Yd`dF(Eti1db&7<NL-GcaFF+a0SEJY8&|bA
z|d-rtdwtuekiuicc5n#yi?o2rl...@?`y&B9qq#X?RjzQ_ZgOHtbDh6<JV0|aqrjW
zUzzdu$(ho6$?y...@por!x|xrx$L|5@;v;hPd>2eZsMG-8c_BTXd8p4tDnm{r-UW|
d...@-
delta 120
zcmaFJ*ugkKyik^diGhLPN%BNHASGGi8c`CQpH@<ySd_}(n3A8As^FQMn4TJxnwU~q
zcrw)ns7TAx#WAGfR#I1Yck-`qZ>2B)|NnocgoMNaiDPURPvoQ+#$;_+>255paDZWD
wxgnrzd+y...@0scelf{r5}e+ve-wkn
diff --git a/install/static/Mainnav-offtab.png b/install/static/Mainnav-offtab.png
index cf6debc50a409f43e3f24b576e1f0476bc49c2e4..997863a29cfca06a222f7e1b7d6653ffb35192ed 100644
GIT binary patch
delta 174
zcmbQpxR-H)c)bw^69WT-&`h<vK#H+A$lZxy-8q?;Kn`1yx4R3&e-K=-cll(X2xoyu
zWHAE+w=f7ZGR&gi0t...@$_|Nzs1cdt{`2kxcMYd$kx-vF@)oKZ|^}~21TC3GVkqE
z+#erqg74sv8+3h4b13jg...@=elj1ophsjer91l^$phyf3;xevv%BnbFE>xXBj(sv
tysi0mcnx%r`nj...@xnajg8*)
delta 129
zcmdnXIFWIJc$F*%69WUoljMnZKuWU2HKHUqKdq!Zu_%?nF(p4KRlzeiF+DXXH8G{K
z...@mnkdp?52xi(^Q|tt6|eFB+RCO%l4izyAM>fB*mUFPr%B{{DKyA2$rlEK_O~Hvj+g
h^YD=a2N(nr7_^N7Oma01CjzxIc)I$ztaD0e0ssd$GU@;T
diff --git a/install/static/Mainnav-ontab.png b/install/static/Mainnav-ontab.png
index 2589fddb1b59c4ec101905e048d0f6980f0544dc..303402f73184b4eca065ac3aa35d24a588d96583 100644
GIT binary patch
delta 117
zcmeBUoWwXmC6BQ<$lZxy-8q?;3=9lxN#5=*4F5rJ!QSPQfg+p*9+AZi4BWyX%*Zfn
zjs#GUy~NYkmHiesr<k...@w|F9ppcNKi(?4K_2eJ_|Jw^QGc(&7G9=z*HY<~R8wQkR
n...@o1tas?83{1os!$acz0}
delta 113
zcmbQl*vB|QB}=lzHKHUqKdq!Zu_%?nF(p4krlzeif+dxxh8...@mnkd0|SGBr;B4q
z#jT`Y|Nq-x?v*y5VPR=G^WWd!$G?1kA8+yR^K<^25;tXL>{kxzv`fpzu}...@xq>X
RcMhbN!PC{xWt~$(6954BEQbI9
diff --git a/install/static/Subnav-background.png b/install/static/Subnav-background.png
index 00afe1e97a53ca2444a11839817e947f5a31d28d..d7dd26bf1c0001103301835f2d4ec9866de7420f 100644
GIT binary patch
delta 159
zcmeBS+|4*arJk`k$lZxy-8q?;3=9lxn#5=*49x14...@gd9?svi14-?iy0wwg+z8+
zVb&Z8pdfpRr>`sfEpARRB{t>D*Ovl?tUX;ELpZK4J-U(ifC0}Dhey_bcbsFpc}4j|
z>uiZYu3iBqcB6OR4bSGCQlGkf?PiugNjlS?a=ErjJbHV%_78)o-hla!76...@o1ta
JS?83{1OVshHlqLl
delta 111
zcmdnZ*uywMB}1~rHKHUqKdq!Zu_%?nF(p4krlzeif+dxxh8...@mnkd0|SGer;B4q
z#jT_lZ{DONB_t&L`u<-2^8f$;A4(i)?...@uzyolpila%d|HBCUa;fq|JJs4Xa>oT+&>
pp...@tdnm{r-uw|r&lYY
diff --git a/install/static/associate.js b/install/static/associate.js
index be6747a329dfe7d1aa053ae168c8baefab988ae2..ef3a72c1ec10aeadd9844d1942ee468848e1e9b2 100644
--- a/install/static/associate.js
+++ b/install/static/associate.js
@@ -407,32 +407,33 @@ function ipa_association_facet(spec) {
};
that.create = function(container) {
- that.setup_views(container);
- };
-
- that.setup = function(container, unspecified) {
-
that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
- that.other_entity = $.bbq.getState(that.entity_name + '-enroll', true) || '';
+ that.other_entity =
+ $.bbq.getState(that.entity_name + '-enroll', true) || '';
//TODO I18N
var header_message = that.other_entity + '(s) enrolled in ' +
that.entity_name + ' ' + that.pkey;
- container.append( $('<h2/>',{ html: header_message }) );
$('<div/>', {
- 'id': that.entity_name+'-'+that.other_entity
+ 'id': that.entity_name+'-'+that.other_entity,
+ html: $('<h2/>',{ html: header_message })
}).appendTo(container);
-
- var table = ipa_association_widget({
+ that.table = ipa_association_widget({
'id': that.entity_name+'-'+that.other_entity,
- 'name': that.other_entity, 'label': IPA.metadata[that.other_entity].label,
- 'entity_name': that.entity_name, 'other_entity': that.other_entity
+ 'name': that.other_entity,
+ 'label': IPA.metadata[that.other_entity].label,
+ 'entity_name': that.entity_name,
+ 'other_entity': that.other_entity
});
- table.create(container);
- table.setup(container);
- table.refresh(container);
+ that.table.create(container);
+
+ };
+
+ that.setup = function(container, unspecified) {
+ that.table.setup(container);
+ that.table.refresh(container);
};
return that;
diff --git a/install/static/details.js b/install/static/details.js
index efb896a6c1ebeca99ff5eb74a73c02b833c6f97e..4a024e9868dce70ed9eb5fc8a90bdccd87e14803 100644
--- a/install/static/details.js
+++ b/install/static/details.js
@@ -339,10 +339,9 @@ function ipa_details_create(container)
var entity_name = container.attr('id');
container.attr('title', entity_name);
- facet.setup_views(container);
var details = $('<div/>', {
- 'class': 'details'
+ 'class': 'content'
}).appendTo(container);
var buttons = $('<div/>', {
diff --git a/install/static/entity.js b/install/static/entity.js
index 1eadea6d927b604e78a3651c96a381f6f6fded65..4ae979e7502c699394f1ddf075bb1b79793c60e3 100644
--- a/install/static/entity.js
+++ b/install/static/entity.js
@@ -311,7 +311,9 @@ function ipa_entity_setup(container, unspecified) {
container.empty();
+ facet.setup_views(container);
facet.create(container);
+ container.children().last().addClass('client');
facet.setup(container, unspecified);
facet.load(container, unspecified);
}
@@ -320,7 +322,12 @@ function ipa_facet_setup_views(container) {
var facet = this;
- var ul = $('<ul/>', {'class': 'entity-views'}).appendTo(container);
+ var div = $('<div/>',
+ {
+ "class":"action-panel",
+ html: $('<h3>Actions</h3>'),
+ }).appendTo(container);
+ var ul = $('<ul/>', {'class': 'action'}).appendTo(div);
var entity = IPA.get_entity(facet.entity_name);
@@ -331,7 +338,6 @@ function ipa_facet_setup_views(container) {
if (other_facet.label) {
var label = other_facet.label;
- if (i > 0) label = '| '+label;
ul.append($('<li/>', {
title: other_facet.name,
@@ -352,8 +358,6 @@ function ipa_facet_setup_views(container) {
var other_entity = other_entities[j];
var label = IPA.metadata[other_entity].label;
- if (i > 0 || j > 0) label = '| ' + label;
-
ul.append($('<li/>', {
title: other_entity,
text: label,
diff --git a/install/static/ipa.css b/install/static/ipa.css
index 30d8c80d1ebf33d5afb940d7f180261bbebb9775..ee4c85a74b3e4643b95c33c969c13715f2fbb443 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -67,8 +67,8 @@ h1 {
margin-top: 18px;
}
-div#details {
- float: left;
+div#content {
+ position: relative;
width: 100%;
}
@@ -94,12 +94,12 @@ ul#viewtype li a {
font-weight: normal;
}
-div.details div.details-buttons {
+div.content div.content-buttons {
float: right;
margin-right: 15px;
}
-div.details div.details-buttons img {
+div.content div.content-buttons img {
border: 0;
}
@@ -180,19 +180,29 @@ span.attrhint {
/*Navigation */
.tabs1 .ui-tabs-nav{
- padding: 0.1em;
-}
-
-.tabs1 .ui-tabs-nav {
+ margin: 0; padding: 2.9em .2em 0;
background-image: url(Mainnav-background.png);
+
}
+
+.ui-tabs .ui-tabs-nav li { height: 30px; margin: 0 0 1px 0;}
+
+
+.tabs1 .ui-tabs-nav li a{
+ height: 30px;
+ background-image: url(Mainnav-offtab.png);
+ color: black;
+}
+
+
.tabs1 .ui-tabs-nav li > a:link, span.main-nav-off > a:visited{
- color:white;
+ color:black;
}
-.tabs1 .ui-tabs-nav li.ui-tabs-selected {
+.tabs1 .ui-tabs-nav li.ui-tabs-selected a{
background-image: url(Mainnav-ontab.png);
+ color: lightgreen;
}
.tabs1 .ui-tabs-panel { display: block; border-width: 0; padding: 0.1em 0.4em; background: none; }
@@ -200,17 +210,35 @@ span.attrhint {
.tabs2 .ui-tabs-nav {
background-image: url(Subnav-background.png);
+ margin: 0; padding: .1em .2em 0;
+
}
+
.tabs2 .ui-tabs-nav li a{
- background-image: url(Subnav-offbutton.png);
+ height: 10%;
+ background-image: url(Subnav-background.png);
+ color: white;
+}
+
+.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off > a:visited{
+ color:white;
+}
+
+
+.tabs2 .ui-tabs-nav li{
+ height: 10%;
+ background-image: url(Subnav-background.png);
+ color: white;
}
.tabs2 .ui-tabs-nav li.ui-tabs-selected a{
+ -moz-border-radius: 15px;
+ border-radius: 15px;
background-image: url(Subnav-onbutton.png);
+ color: white;
}
-
span.sub-nav-off > a:link, span.sub-nav-off > a:visited{
color:white;
}
@@ -229,13 +257,40 @@ span.main-separator{
/* Entity */
.entity-container{
- float: left;
+ position: relative;
width: 80%;
+ height: 1000px;
margin: 10px;
padding: 10px;
background: #e8e8e8;
}
+.action-panel {
+ position:relative;
+ top:50px;
+ border-width: thin;
+ border-style: solid;
+ border-color: black;
+ float: left;
+}
+
+.action-panel h3{
+ border-width: thin;
+ border-style: solid;
+ border-color: black;
+ background: #e8e8e8;
+}
+
+.action-panel li {
+# float: left;
+# list-style-type: none;
+}
+
+.client {
+ float: left;
+}
+
+
/* Search */
.search-controls {
diff --git a/install/static/policy.js b/install/static/policy.js
index deefab0c6391f641622a13807fa01e064efad1bb..89fe16a707fe4ae6a2edd9ff36df5596a99f2e16 100644
--- a/install/static/policy.js
+++ b/install/static/policy.js
@@ -250,7 +250,7 @@ function ipa_records_facet(spec){
};
function create(container) {
- that.setup_views(container);
+// that.setup_views(container);
}
function setup(container, unspecified){
diff --git a/install/static/search.js b/install/static/search.js
index ecdf56d2b9ae291d63f0c48831fdc581bbb27822..f5d81587bde6278abbc61f8d42489317c9ecdc98 100644
--- a/install/static/search.js
+++ b/install/static/search.js
@@ -34,7 +34,6 @@ function ipa_search_widget(spec) {
that.create = function(container) {
var div = $('#'+that.id);
-
var search_controls = $('<div/>', {
'class': 'search-controls'
}).appendTo(div);
diff --git a/install/static/test/entity_tests.js b/install/static/test/entity_tests.js
index 5d98d7b1b8bb060e80bbc9f91c53d6ade2bde835..5b2f36b2be6e4fa1b8861be91f4504ac373b0d21 100644
--- a/install/static/test/entity_tests.js
+++ b/install/static/test/entity_tests.js
@@ -97,7 +97,8 @@ test('Testing ipa_facet_setup_views().', function() {
facet.setup_views(container);
- var list = container.children();
+ //Container now has two divs, one for the action panel one for content
+ var list = container.children().last().children();
var views = list.children();
equals(
--
1.7.1
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
