From 821987fe674d2685809d6150316b3a99bda37b6a Mon Sep 17 00:00:00 2001 From: Adam Young Date: Tue, 9 Nov 2010 20:04:49 -0500 Subject: 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 | 79 ++++++++++++++++++++++++++++------ install/static/policy.js | 2 +- install/static/search.js | 1 - install/static/test/entity_tests.js | 3 +- 11 files changed, 95 insertions(+), 36 deletions(-) (limited to 'install') diff --git a/install/static/Mainnav-background.png b/install/static/Mainnav-background.png index c3fdab317..5487ca3c5 100644 Binary files a/install/static/Mainnav-background.png and b/install/static/Mainnav-background.png differ diff --git a/install/static/Mainnav-offtab.png b/install/static/Mainnav-offtab.png index cf6debc50..997863a29 100644 Binary files a/install/static/Mainnav-offtab.png and b/install/static/Mainnav-offtab.png differ diff --git a/install/static/Mainnav-ontab.png b/install/static/Mainnav-ontab.png index 2589fddb1..303402f73 100644 Binary files a/install/static/Mainnav-ontab.png and b/install/static/Mainnav-ontab.png differ diff --git a/install/static/Subnav-background.png b/install/static/Subnav-background.png index 00afe1e97..d7dd26bf1 100644 Binary files a/install/static/Subnav-background.png and b/install/static/Subnav-background.png differ diff --git a/install/static/associate.js b/install/static/associate.js index be6747a32..ef3a72c1e 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( $('

',{ html: header_message }) ); $('
', { - 'id': that.entity_name+'-'+that.other_entity + 'id': that.entity_name+'-'+that.other_entity, + html: $('

',{ 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 efb896a6c..4a024e986 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 = $('
', { - 'class': 'details' + 'class': 'content' }).appendTo(container); var buttons = $('
', { diff --git a/install/static/entity.js b/install/static/entity.js index 1eadea6d9..4ae979e75 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 = $('
    ', {'class': 'entity-views'}).appendTo(container); + var div = $('
    ', + { + "class":"action-panel", + html: $('

    Actions

    '), + }).appendTo(container); + var 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($('
    • ', { 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($('
    • ', { title: other_entity, text: label, diff --git a/install/static/ipa.css b/install/static/ipa.css index 30d8c80d1..ee4c85a74 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; + margin: 0; padding: 2.9em .2em 0; + background-image: url(Mainnav-background.png); + } -.tabs1 .ui-tabs-nav { - 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 deefab0c6..89fe16a70 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 ecdf56d2b..f5d81587b 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 = $('
      ', { 'class': 'search-controls' }).appendTo(div); diff --git a/install/static/test/entity_tests.js b/install/static/test/entity_tests.js index 5d98d7b1b..5b2f36b2b 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( -- cgit