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/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
-        }).appendTo(container);
-
-        var 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
+            html: $('<h2/>',{ html:  header_message })
+        }).appendTo(container);
+        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
         });
 
-        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;

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/>', {

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,

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 {

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){

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);

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(