Refactored action panel and client area.

To improve code readability and extensibility the containers for action
panel and client area are now created in IPA.entity.setup(). The 'client area'
has been renamed into 'content'. The IPA.facet.create() has been renamed to
IPA.facet.create_content().

8 files changed, 56 insertions, 50 deletions

diff --git a/install/ui/associate.js b/install/ui/associate.js
index 050d8f6db..b8a7d825a 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -788,7 +788,7 @@ IPA.association_facet = function (spec) {
         return pkey != that.pkey;
     };
 
-    that.create = function(container) {
+    that.create_content = function(container) {
 
         that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
 
diff --git a/install/ui/details.js b/install/ui/details.js
index 40dd6d4f8..794e19fd2 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -266,7 +266,7 @@ IPA.details_facet = function(spec) {
 
     that.label =  ( IPA.messages && IPA.messages.facets &&  IPA.messages.facets.details)  || spec.label;
     that.is_dirty = spec.is_dirty || is_dirty;
-    that.create = spec.create || create;
+    that.create_content = spec.create_content || create_content;
     that.setup = spec.setup || setup;
     that.load = spec.load || load;
     that.update = spec.update || IPA.details_update;
@@ -323,9 +323,7 @@ IPA.details_facet = function(spec) {
         }
     };
 
-    function create(container) {
-
-        container.attr('title', that.entity_name);
+    function create_content(container) {
 
         var label = IPA.metadata.objects[that.entity_name].label;
 
@@ -338,7 +336,7 @@ IPA.details_facet = function(spec) {
             appendTo(container);
 
         var details = $('<div/>', {
-            'class': 'content'
+            'name': 'details'
         }).appendTo(container);
 
         $('<a/>', {
@@ -430,7 +428,7 @@ IPA.details_facet = function(spec) {
         });
         button.replaceWith(that.update_button);
 
-        var details = $('div.content', that.container);
+        var details = $('div[name=details]', that.container);
 
         var expand_all = $('a[name=expand_all]', details);
         expand_all.click(function() {
@@ -528,7 +526,7 @@ IPA.details_facet = function(spec) {
     }
 
     that.details_facet_init = that.init;
-    that.details_facet_create = that.create;
+    that.details_facet_create_content = that.create_content;
     that.details_facet_load = that.load;
 
     return that;
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 1af95f726..36ee2d6ef 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -282,16 +282,14 @@ IPA.records_facet = function (spec){
         return pkey != that.pkey || record != that.record;
     };
 
-    function create(container) {
-
-        container.attr('title', that.entity_name);
+    function create_content(container) {
 
         $('<h1/>',{
         }).append(IPA.create_network_spinner()).
             appendTo(container);
 
         var details = $('<div/>', {
-            'class': 'content'
+            'name': 'details'
         }).appendTo(container);
 
         var div = $('<div class="search-controls"></div>').
@@ -522,7 +520,7 @@ IPA.records_facet = function (spec){
 
     }
 
-    that.create = create;
+    that.create_content = create_content;
     that.setup = setup;
     that.refresh = refresh;
 
diff --git a/install/ui/entity.js b/install/ui/entity.js
index 9e37a1271..75ec32cfa 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -36,7 +36,7 @@ IPA.facet = function (spec) {
     that._entity_name = spec.entity_name;
 
     that.init = spec.init || init;
-    that.create = spec.create || create;
+    that.create_content = spec.create_content || create_content;
     that.setup = spec.setup || setup;
     that.load = spec.load || load;
 
@@ -71,7 +71,7 @@ IPA.facet = function (spec) {
         }
     }
 
-    function create(container) {
+    function create_content(container) {
     }
 
     function setup(container) {
@@ -85,8 +85,8 @@ IPA.facet = function (spec) {
         return false;
     };
 
-    that.get_client_area = function() {
-        return $('.client', that.container);
+    that.get_content = function() {
+        return $('.content', that.container);
     };
 
     that.get_action_panel = function() {
@@ -95,7 +95,8 @@ IPA.facet = function (spec) {
 
     // methods that should be invoked by subclasses
     that.facet_init = that.init;
-    that.facet_create = that.create;
+    that.facet_create_action_panel = that.create_action_panel;
+    that.facet_create_content = that.create_content;
     that.facet_setup = that.setup;
 
     return that;
@@ -275,9 +276,20 @@ IPA.entity_setup = function (container) {
 
     container.empty();
 
-    facet.create_action_panel(container);
-    facet.create(container);
-    container.children().last().addClass('client');
+    container.attr('title', entity.name);
+
+    var action_panel = $('<div/>', {
+        'class': 'action-panel'
+    }).appendTo(container);
+
+    facet.create_action_panel(action_panel);
+
+    var content = $('<div/>', {
+        'class': 'content'
+    }).appendTo(container);
+
+    facet.create_content(content);
+
     facet.setup(container);
     facet.refresh();
 };
@@ -381,7 +393,7 @@ IPA. facet_create_action_panel = function(container) {
                     if($(this).hasClass('entity-facet-disabled')){
                         return false;
                     }
-                    var this_pkey = $('input[id=pkey]', action_panel).val();
+                    var this_pkey = $('input[id=pkey]', container).val();
                     IPA.switch_and_show_page(
                         entity_name, other_facet_name,
                         this_pkey);
@@ -392,38 +404,34 @@ IPA. facet_create_action_panel = function(container) {
         return li;
     }
 
-
     var that = this;
     var entity_name = that.entity_name;
     var panel_title = IPA.metadata.objects[entity_name].label;
     var nested_tabs = IPA.nested_tabs(entity_name);
 
-
     if (nested_tabs.length > 1){
         panel_title = IPA.get_nested_tab_label(entity_name);
     }
 
-    var action_panel = $('<div/>', {
-        "class": "action-panel",
-        html: $('<h3>',{
-            text: panel_title
-        })
+    $('<h3>', {
+        text: panel_title
     }).appendTo(container);
 
-
     /*Note, for debugging purposes, it is useful to set var pkey_type = 'text';*/
     var pkey_type = 'hidden';
     $('<input/>', {
         'type': pkey_type,
         id:'pkey',
         name:'pkey'
-    }).appendTo(action_panel);
-    var ul = $('<ul/>', {'class': 'action'}).appendTo(action_panel);
+    }).appendTo(container);
+
+    var ul = $('<ul/>', {'class': 'action'}).appendTo(container);
     var entity = IPA.get_entity(entity_name);
     var facet_name =  IPA.current_facet(entity);
     var other_facet = entity.facets[0];
     var other_facet_name = other_facet.name;
     var main_facet = build_link(other_facet,other_facet.label);
+
     for (var nested_index = 0 ;
          nested_index < nested_tabs.length;
          nested_index += 1){
@@ -522,9 +530,9 @@ IPA. facet_create_action_panel = function(container) {
     /*When we land on the search page, disable all facets
           that require a pkey until one is selected*/
     if (facet_name === 'search'){
-        $('.entity-facet', action_panel).addClass('entity-facet-disabled');
+        $('.entity-facet', container).addClass('entity-facet-disabled');
     }
-    return action_panel;
+    return container;
 };
 
 IPA.entity_builder = function(){
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 80f347d71..a4189ac44 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -124,13 +124,6 @@ div.tabs {
         background: url("centered-bg.png") no-repeat scroll 0 8.4em transparent;
 }
 
-div#content {
-    margin-top: 0;
-    position: relative;
-    width: 100%;
-}
-
-
 ul#viewtype {
     padding-left: 2em;
 }
@@ -177,8 +170,7 @@ h1 {
     background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
     padding: 0.5em 0.9em;
     position: relative;
-    width: 40.5em;
-	margin-left: 1.9em;
+    margin-right: 0em;
 }
 
 h2 {
@@ -742,7 +734,7 @@ a.action-button-disabled {
     display:inline;
 }
 
-.client {
+.content {
     font-size: 10px;
     margin-top: 0.4em;
     float: left;
diff --git a/install/ui/search.js b/install/ui/search.js
index dc347aa39..bd2c0f166 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -387,9 +387,7 @@ IPA.search_facet = function(spec) {
         return filter != that.filter;
     };
 
-    that.create = function(container) {
-
-        container.attr('title', that.entity_name);
+    that.create_content = function(container) {
 
         var span = $('<span/>', { 'name': 'search' }).appendTo(container);
 
@@ -409,7 +407,7 @@ IPA.search_facet = function(spec) {
 
     // methods that should be invoked by subclasses
     that.search_facet_init = that.init;
-    that.search_facet_create = that.create;
+    that.search_facet_create_content = that.create_content;
     that.search_facet_setup = that.setup;
 
    
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index d3c18d435..76a752400 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -200,7 +200,13 @@ test("Testing details lifecycle: create, setup, load.", function(){
 
     var facet = entity.get_facet('details');
     facet.init();
-    facet.create(container);
+
+    var content = $('<div/>', {
+        'class': 'content'
+    }).appendTo(container);
+
+    facet.create_content(content);
+
     facet.setup(container);
     facet.load(result);
 
diff --git a/install/ui/test/entity_tests.js b/install/ui/test/entity_tests.js
index 86e44cd67..0adc091fd 100644
--- a/install/ui/test/entity_tests.js
+++ b/install/ui/test/entity_tests.js
@@ -74,7 +74,13 @@ test('Testing IPA.entity_set_search_definition().', function() {
 
     var facet = entity.get_facet('search');
     facet.init();
-    facet.create(entities_container);
+
+    var content = $('<div/>', {
+        'class': 'content'
+    }).appendTo(entities_container);
+
+    facet.create_content(content);
+
     facet.setup(entities_container);