From dd89c28654c92c0922900409b37c1abcefc56c84 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Thu, 28 Apr 2011 19:17:58 -0500 Subject: Moved entity contents outside navigation. Previously the entities and navigation are entangled inside a common DOM structure which limits code reuse. Now they have been moved into separate structures. --- install/ui/associate.js | 19 ----------- install/ui/details.js | 45 +++++++------------------- install/ui/dns.js | 21 +------------ install/ui/entity.js | 10 ++---- install/ui/index.html | 1 + install/ui/ipa.css | 24 ++++++++------ install/ui/navigation.js | 35 +++++++++++++-------- install/ui/test/navigation_tests.js | 63 ++++++++++++++++++++++++------------- install/ui/webui.js | 5 +-- 9 files changed, 98 insertions(+), 125 deletions(-) (limited to 'install/ui') diff --git a/install/ui/associate.js b/install/ui/associate.js index 632fcc52d..68009b571 100644 --- a/install/ui/associate.js +++ b/install/ui/associate.js @@ -799,25 +799,6 @@ IPA.association_facet = function (spec) { return pkey != that.pkey; }; - that.create_action_panel = function(container) { - - that.facet_create_action_panel(container); - - var buttons = $('.action-controls', container); - - $('', { - 'type': 'button', - 'name': 'remove', - 'value': IPA.messages.buttons.remove - }).appendTo(buttons); - - $('', { - 'type': 'button', - 'name': 'add', - 'value': IPA.messages.buttons.enroll - }).appendTo(buttons); - }; - 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 1d653c237..433f682f0 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -264,13 +264,9 @@ IPA.details_facet = function(spec) { var that = IPA.facet(spec); - that.label = ( IPA.messages && IPA.messages.facets && IPA.messages.facets.details) || spec.label; - that.is_dirty = spec.is_dirty || is_dirty; - that.create_content = spec.create_content || create_content; - that.setup = spec.setup || setup; - that.load = spec.load || load; + that.label = (IPA.messages && IPA.messages.facets && IPA.messages.facets.details) || spec.label; + that.update = spec.update || IPA.details_update; - that.reset = spec.reset || reset; that.refresh = spec.refresh || IPA.details_refresh; that.sections = []; @@ -323,24 +319,7 @@ IPA.details_facet = function(spec) { } }; - that.create_action_panel = function(container) { - - that.facet_create_action_panel(container); - - var buttons = $('.action-controls', container); - - $('', { - 'type': 'text', - 'name': 'reset' - }).appendTo(buttons); - - $('', { - 'type': 'text', - 'name': 'update' - }).appendTo(buttons); - }; - - function create_content(container) { + that.create_content = function(container) { var label = IPA.metadata.objects[that.entity_name].label; @@ -399,9 +378,9 @@ IPA.details_facet = function(spec) { details.append('
'); } - } + }; - function setup(container) { + that.setup = function(container) { that.facet_setup(container); @@ -468,7 +447,7 @@ IPA.details_facet = function(spec) { section.setup(div); } - } + }; function toggle(section, visible) { var header = $('h2[name='+section.name+']', that.container); @@ -491,7 +470,7 @@ IPA.details_facet = function(spec) { that.new_key = new_key; - function is_dirty() { + that.is_dirty = function() { var i; for ( i =0; i < that.sections.length; i +=1 ){ @@ -501,9 +480,9 @@ IPA.details_facet = function(spec) { } return false; - } + }; - function load(record) { + that.load = function (record) { that.record = record; for (var i=0; i', { - 'type': 'button', - 'name': 'remove', - 'value': IPA.messages.buttons.remove - }).appendTo(buttons); - - $('', { - 'type': 'button', - 'name': 'add', - 'value': IPA.messages.buttons.add - }).appendTo(buttons); - }; - function create_content(container) { $('

',{ @@ -537,7 +518,7 @@ IPA.records_facet = function (spec){ //TODO this is cut and pasted from search, we need to unify function display(obj_name, data){ - var selector = '.entity-container[title=' + obj_name + ']'; + var selector = '.entity-container[name=' + obj_name + ']'; var thead = $(selector + ' thead'); var tbody = $(selector + ' tbody'); var tfoot = $(selector + ' tfoot'); diff --git a/install/ui/entity.js b/install/ui/entity.js index a4488756e..161f34e6c 100644 --- a/install/ui/entity.js +++ b/install/ui/entity.js @@ -282,8 +282,7 @@ IPA.current_facet = function (entity){ return facet_name; }; - -IPA.entity_setup = function (container) { +IPA.entity_setup = function(container) { var entity = this; @@ -303,7 +302,6 @@ IPA.entity_setup = function (container) { IPA.entity_name = entity.name; } - container.attr('title', entity.name); if (!entity.header){ entity.header = IPA.entity_header({entity:entity,container:container}); } @@ -316,7 +314,6 @@ IPA.entity_setup = function (container) { facet.refresh(); }; - IPA.nested_tab_labels = {}; IPA.get_nested_tab_label = function(entity_name){ @@ -538,10 +535,7 @@ IPA.entity_header = function(spec){ function entity_container() { that.entity_container = - $("
",{ - "class":'entity-container', - id: 'entity-container-' + entity.name - }). + $('
'). append(facet_tabs()). append(content()); return that.entity_container; diff --git a/install/ui/index.html b/install/ui/index.html index 48cc40d87..6b17c7e30 100644 --- a/install/ui/index.html +++ b/install/ui/index.html @@ -59,6 +59,7 @@
+
diff --git a/install/ui/ipa.css b/install/ui/ipa.css index f7e3d2241..9e5625488 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -30,6 +30,7 @@ body{ margin-left: auto; margin-right: auto; width: 960px; + background: url("centered-bg.png") no-repeat scroll 0 12.2em transparent; } .ui-widget { @@ -117,13 +118,15 @@ div.header span.header-loggedinas { /* ---- Navigation ---- */ div.tabs { - overflow: auto; width: 100%; height: 100%; - min-height: 40em; - background: url("centered-bg.png") no-repeat scroll 0 8.4em transparent; + min-height: 4em; + background: transparent; } +#content { + min-height: 35em; +} ul#viewtype { @@ -370,7 +373,7 @@ span.attrhint { background-color: transparent !important; } -.ui-widget-content .ui-icon { +.ui-icon { //background-image: url("ui-icons_222222_256x240.png"); background-color: #e2e2e2; } @@ -383,7 +386,7 @@ span.attrhint { position: relative; } -.ui-widget-content a { +a { text-decoration: none; color: #1d85d5; font-weight: normal; @@ -421,7 +424,7 @@ span.attrhint { margin-right: .1em; } -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, #content .ui-state-default { -moz-border-radius: .3em; -webkit-border-radius: .3em; background: -moz-linear-gradient(top, #959595, #5e5e5e); @@ -509,6 +512,11 @@ span.ui-icon-search { background-image: url("Subnav-background.png"); } +.tabs3 .ui-tabs-nav { + padding: 1em 2em 0.1em 2em; + background: transparent; +} + .tabs2 .ui-tabs-nav li { width:auto; margin: 0; @@ -811,9 +819,7 @@ table.scrollable tbody { } div.entity-header { - width:100%px; - padding:10px; - margin:10px; + padding: 0px 20px 10px; } diff --git a/install/ui/navigation.js b/install/ui/navigation.js index 9b8f649df..de42ef2ab 100644 --- a/install/ui/navigation.js +++ b/install/ui/navigation.js @@ -28,6 +28,7 @@ IPA.navigation = function(spec) { var that = {}; that.container = spec.container; + that.content = spec.content; that.tab_class = spec.tab_class || 'tabs'; that.tabs = []; @@ -116,7 +117,7 @@ IPA.navigation = function(spec) { tabs.tabs({ select: function(event, ui) { var panel = $(ui.panel); - var name = panel.attr('id'); + var name = panel.attr('name'); return that.show_page(name); } @@ -128,11 +129,13 @@ IPA.navigation = function(spec) { container.addClass(that.tab_class); container.addClass('tabs'+depth); + var parent_id = container.attr('id'); + var ul = $('