From c8eb76766afc8755e709cdba62586a8ab1ad65c9 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Tue, 21 Jun 2011 15:05:44 -0500 Subject: Converted entity header into facet header. The content and the size of entity header changes depending on the facet being displayed, so the entity header has been converted into a facet header to allow better control via CSS. The DNS record facet has been updated to use the same styling and support scrolling. To help styling and testing, all buttons have been assigned a name. --- install/ui/association.js | 11 +- install/ui/certificate.js | 5 + install/ui/details.js | 25 ++-- install/ui/dialog.js | 3 + install/ui/dns.js | 40 ++--- install/ui/entitle.js | 26 ++-- install/ui/entity.js | 370 ++++++++++++++++++++++------------------------ install/ui/hbac.js | 2 + install/ui/host.js | 2 + install/ui/ipa.css | 323 ++++++++++------------------------------ install/ui/search.js | 40 ++--- install/ui/service.js | 1 + 12 files changed, 348 insertions(+), 500 deletions(-) diff --git a/install/ui/association.js b/install/ui/association.js index 4374500f1..ad8d84795 100644 --- a/install/ui/association.js +++ b/install/ui/association.js @@ -380,6 +380,7 @@ IPA.association_table_widget = function (spec) { var button = $('input[name=remove]', container); button.replaceWith(IPA.action_button({ + name: 'remove', 'label': button.val(), 'icon': 'remove-icon', 'click': function() { @@ -409,6 +410,7 @@ IPA.association_table_widget = function (spec) { button = $('input[name=add]', container); button.replaceWith(IPA.action_button({ + name: 'add', 'label': button.val(), 'icon': 'add-icon', 'click': function() { @@ -824,6 +826,7 @@ IPA.association_facet = function (spec) { if (!that.read_only) { that.remove_button = IPA.action_button({ + name: 'remove', label: IPA.messages.buttons.remove, icon: 'remove-icon', click: function() { @@ -833,6 +836,7 @@ IPA.association_facet = function (spec) { }).appendTo(that.controls); that.add_button = IPA.action_button({ + name: 'add', label: IPA.messages.buttons.enroll, icon: 'add-icon', click: function() { @@ -844,7 +848,7 @@ IPA.association_facet = function (spec) { if (that.indirect_attribute_member) { var span = $('', { - 'class': 'right-aligned-controls' + 'class': 'right-aligned-facet-controls' }).appendTo(that.controls); span.append('Show Results '); @@ -895,10 +899,7 @@ IPA.association_facet = function (spec) { that.facet_show(); that.pkey = $.bbq.getState(that.entity_name+'-pkey'); - that.entity.header.set_pkey(that.pkey); - - that.entity.header.back_link.css('visibility', 'visible'); - that.entity.header.facet_tabs.css('visibility', 'visible'); + that.header.set_pkey(that.pkey); }; that.show_add_dialog = function() { diff --git a/install/ui/certificate.js b/install/ui/certificate.js index 30ac0d74a..64d93f9bd 100755 --- a/install/ui/certificate.js +++ b/install/ui/certificate.js @@ -515,6 +515,7 @@ IPA.cert.status_widget = function(spec) { var button = $('input[name=get]', that.container); that.get_button = IPA.button({ + name: 'get', label: IPA.messages.buttons.get, 'click': function() { IPA.command({ @@ -531,6 +532,7 @@ IPA.cert.status_widget = function(spec) { button = $('input[name=revoke]', that.container); that.revoke_button = IPA.button({ + name: 'revoke', label: IPA.messages.buttons.revoke, 'click': function() { IPA.command({ @@ -547,6 +549,7 @@ IPA.cert.status_widget = function(spec) { button = $('input[name=view]', that.container); that.view_button = IPA.button({ + name: 'view', label: IPA.messages.buttons.view, 'click': function() { IPA.command({ @@ -565,6 +568,7 @@ IPA.cert.status_widget = function(spec) { button = $('input[name=restore]', that.container); that.restore_button = IPA.button({ + name: 'restore', label: IPA.messages.buttons.restore, 'click': function() { IPA.command({ @@ -582,6 +586,7 @@ IPA.cert.status_widget = function(spec) { $('input[name=create]', that.container).each(function(index) { button = $(this); that.create_button = IPA.button({ + name: 'create', label: IPA.messages.objects.cert.new_certificate, 'click': function() { request_certificate(that.result); diff --git a/install/ui/details.js b/install/ui/details.js index b15d17e7b..46a28e508 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -334,9 +334,19 @@ IPA.details_facet = function(spec) { return pkey; }; + that.create = function(container) { + if (that.entity.facets.length == 1) { + that.disable_back_link = true; + that.disable_facet_tabs = true; + } + + that.facet_create(container); + }; + that.create_controls = function() { that.reset_button = IPA.action_button({ + name: 'reset', label: IPA.messages.buttons.reset, icon: 'reset-icon', 'class': 'details-reset', @@ -347,6 +357,7 @@ IPA.details_facet = function(spec) { }).appendTo(that.controls); that.update_button = IPA.action_button({ + name: 'update', label: IPA.messages.buttons.update, icon: 'update-icon', 'class': 'details-update', @@ -376,7 +387,7 @@ IPA.details_facet = function(spec) { name: 'expand_all', href: 'expand_all', label: 'Expand All', - 'class': 'right-aligned-controls', + 'class': 'right-aligned-facet-controls', style: 'display: none;', click: function() { that.expand_button.css('display', 'none'); @@ -395,7 +406,7 @@ IPA.details_facet = function(spec) { name: 'collapse_all', href: 'collapse_all', label: 'Collapse All', - 'class': 'right-aligned-controls', + 'class': 'right-aligned-facet-controls', click: function() { that.expand_button.css('display', 'inline'); that.collapse_button.css('display', 'none'); @@ -477,15 +488,7 @@ IPA.details_facet = function(spec) { that.facet_show(); that.pkey = $.bbq.getState(that.entity_name+'-pkey'); - that.entity.header.set_pkey(that.pkey); - - if (that.entity.facets.length == 1) { - that.entity.header.back_link.css('visibility', 'hidden'); - that.entity.header.facet_tabs.css('visibility', 'hidden'); - } else { - that.entity.header.back_link.css('visibility', 'visible'); - that.entity.header.facet_tabs.css('visibility', 'visible'); - } + that.header.set_pkey(that.pkey); }; that.toggle = function(section, visible) { diff --git a/install/ui/dialog.js b/install/ui/dialog.js index ebd6c9968..efbf84ec4 100644 --- a/install/ui/dialog.js +++ b/install/ui/dialog.js @@ -515,6 +515,7 @@ IPA.adder_dialog = function (spec) { var button = $('input[name=find]', that.container); that.find_button = IPA.button({ + name: 'find', 'label': button.val(), 'icon': 'ui-icon-search', 'click': function() { that.search(); } @@ -523,6 +524,7 @@ IPA.adder_dialog = function (spec) { button = $('input[name=remove]', that.container); that.remove_button = IPA.button({ + name: 'remove', 'label': button.val(), 'click': function() { that.remove(); @@ -533,6 +535,7 @@ IPA.adder_dialog = function (spec) { button = $('input[name=add]', that.container); that.add_button = IPA.button({ + name: 'add', 'label': button.val(), 'click': function() { that.add(); diff --git a/install/ui/dns.js b/install/ui/dns.js index 1d6b81813..6ec807a09 100644 --- a/install/ui/dns.js +++ b/install/ui/dns.js @@ -55,7 +55,7 @@ IPA.entity_factories.dnszone = function() { 'idnsupdatepolicy']}] }). facet({ - factory: IPA.records_facet, + factory: IPA.dnsrecord_facet, name: 'records', facet_group: 'member', label: IPA.metadata.objects.dnsrecord.label, @@ -95,10 +95,13 @@ IPA.force_dnszone_add_checkbox_widget = function(spec) { return IPA.checkbox_widget(spec); }; -IPA.records_facet = function(spec) { +IPA.dnsrecord_facet = function(spec) { spec = spec || {}; + spec.disable_back_link = false; + spec.disable_facet_tabs = false; + var that = IPA.search_facet(spec); var record_types = [ @@ -113,9 +116,11 @@ IPA.records_facet = function(spec) { that.facet_init(); that.table = IPA.table_widget({ + 'class': 'content-table', name: 'search', label: IPA.metadata.objects[that.entity_name].label, - entity_name: that.entity_name + entity_name: that.entity_name, + scrollable: true }); var columns = that.columns.values; @@ -334,10 +339,15 @@ IPA.records_facet = function(spec) { that.facet_create_header(container); + var span = $('', { + 'class': 'right-aligned-facet-controls' + }).appendTo(that.controls); + that.filter = $('', { type: 'text', + 'class': 'search-filter', name: 'filter' - }).appendTo(that.controls); + }).appendTo(span); that.filter.keypress(function(e) { /* if the key pressed is the enter key */ @@ -357,20 +367,21 @@ IPA.records_facet = function(spec) { appendTo(that.controls); */ - that.find_button = IPA.button({ - label: IPA.messages.buttons.find, - icon: 'ui-icon-search', + that.find_button = IPA.action_button({ + name: 'find', + icon: 'search-icon', click: function(){ that.find(); return false; } - }).appendTo(that.controls); + }).appendTo(span); that.controls.append(IPA.create_network_spinner()); that.remove_button = IPA.action_button({ + name: 'remove', label: IPA.messages.buttons.remove, - icon: 'ui-icon-trash', + icon: 'remove-icon', click: function() { if (that.remove_button.hasClass('input_link_disabled')) return false; that.remove(); @@ -379,8 +390,9 @@ IPA.records_facet = function(spec) { }).appendTo(that.controls); that.add_button = IPA.action_button({ + name: 'add', label: IPA.messages.buttons.add, - icon: 'ui-icon-plus', + icon: 'add-icon', click: function() { that.add(); return false; @@ -412,13 +424,7 @@ IPA.records_facet = function(spec) { that.record = $.bbq.getState(that.entity_name+'-record'); that.pkey = $.bbq.getState(that.entity_name+'-pkey'); - that.entity.header.set_pkey(that.pkey); - - that.entity.header.back_link.css('visibility', 'visible'); - that.entity.header.facet_tabs.css('visibility', 'visible'); - - var title = IPA.messages.objects.dnsrecord.title+': '+that.pkey; - that.set_title(this.container, title); + that.header.set_pkey(that.pkey); }; diff --git a/install/ui/entitle.js b/install/ui/entitle.js index 13e83ca61..66e5e2a61 100644 --- a/install/ui/entitle.js +++ b/install/ui/entitle.js @@ -326,6 +326,7 @@ IPA.entitle.entity = function(spec) { IPA.entitle.details_facet = function(spec) { spec = spec || {}; + spec.disable_back_link = true; var that = IPA.details_facet(spec); @@ -336,22 +337,26 @@ IPA.entitle.details_facet = function(spec) { }).appendTo(that.controls); that.register_online_button = IPA.action_button({ + name: 'register', label: 'Register', icon: 'ui-icon-plus', click: function() { var dialog = that.entity.get_dialog('online_registration'); dialog.open(that.container); + return false; } }).appendTo(that.register_buttons); that.register_online_button.css('display', 'none'); /* that.register_offline_button = IPA.action_button({ + name: 'import', label: 'Import', icon: 'ui-icon-plus', click: function() { var dialog = that.entity.get_dialog('offline_registration'); dialog.open(that.container); + return false; } }).appendTo(that.register_buttons); @@ -359,14 +364,6 @@ IPA.entitle.details_facet = function(spec) { */ }; - that.show = function() { - that.facet_show(); - - that.entity.header.set_pkey(null); - that.entity.header.back_link.css('visibility', 'hidden'); - that.entity.header.facet_tabs.css('visibility', 'visible'); - }; - that.refresh = function() { var summary = $('span[name=summary]', that.container).empty(); @@ -415,6 +412,7 @@ IPA.entitle.details_facet = function(spec) { IPA.entitle.search_facet = function(spec) { spec = spec || {}; + spec.disable_facet_tabs = false; spec.selectable = false; var that = IPA.search_facet(spec); @@ -428,36 +426,32 @@ IPA.entitle.search_facet = function(spec) { }).appendTo(that.controls); that.consume_button = IPA.action_button({ + name: 'consume', label: 'Consume', icon: 'ui-icon-plus', click: function() { var dialog = that.entity.get_dialog('consume'); dialog.open(that.container); + return false; } }).appendTo(that.consume_buttons); that.consume_button.css('display', 'none'); that.import_button = IPA.action_button({ + name: 'import', label: 'Import', icon: 'ui-icon-plus', click: function() { var dialog = that.entity.get_dialog('import'); dialog.open(that.container); + return false; } }).appendTo(that.consume_buttons); that.import_button.css('display', 'none'); }; - that.show = function() { - that.facet_show(); - - that.entity.header.set_pkey(null); - that.entity.header.back_link.css('visibility', 'hidden'); - that.entity.header.facet_tabs.css('visibility', 'visible'); - }; - that.refresh = function() { function on_success(data, text_status, xhr) { diff --git a/install/ui/entity.js b/install/ui/entity.js index 7e600e4e7..6a01652e5 100644 --- a/install/ui/entity.js +++ b/install/ui/entity.js @@ -31,10 +31,16 @@ IPA.facet = function (spec) { var that = {}; - that.display_class = spec.display_class || 'entity-facet'; that.name = spec.name; that.label = spec.label; that.title = spec.title || that.label; + that.display_class = spec.display_class; + + that.disable_back_link = spec.disable_back_link; + that.disable_facet_tabs = spec.disable_facet_tabs; + + that.header = spec.header || IPA.facet_header({ facet: that }); + that._entity_name = spec.entity_name; that.dialogs = $.ordered_map(); @@ -73,10 +79,13 @@ IPA.facet = function (spec) { that.container = container; - that.header = $('
', { + if (that.disable_facet_tabs) that.container.addClass('no-facet-tabs'); + that.container.addClass(that.display_class); + + that.header_container = $('
', { 'class': 'facet-header' }).appendTo(container); - that.create_header(that.header); + that.create_header(that.header_container); that.content = $('
', { 'class': 'facet-content' @@ -86,13 +95,7 @@ IPA.facet = function (spec) { that.create_header = function(container) { - that.title_container = $('
', { - 'class': 'facet-title' - }).appendTo(container); - - $('

').append(IPA.create_network_spinner()).appendTo(that.title_container); - - that.set_title(container, that.title); + that.header.create(container); that.controls = $('
', { 'class': 'facet-controls' @@ -168,6 +171,7 @@ IPA.facet = function (spec) { // methods that should be invoked by subclasses that.facet_init = that.init; + that.facet_create = that.create; that.facet_create_header = that.create_header; that.facet_create_content = that.create_content; that.facet_setup = that.setup; @@ -177,6 +181,165 @@ IPA.facet = function (spec) { return that; }; +IPA.facet_header = function(spec) { + + spec = spec || {}; + + var that = {}; + that.facet = spec.facet; + + that.select_tab = function() { + if (that.facet.disable_facet_tabs) return; + + $(that.facet_tabs).find('a').removeClass('selected'); + var facet_name = $.bbq.getState(that.facet.entity.name+'-facet'); + + if (!facet_name || facet_name === 'default') { + that.facet_tabs.find('a:first').addClass('selected'); + } else { + that.facet_tabs.find('a#' + facet_name ).addClass('selected'); + } + }; + + that.set_pkey = function(value) { + + if (value) { + var breadcrumb = []; + var current_entity = that.facet.entity.containing_entity; + + while(current_entity){ + breadcrumb.unshift($('',{ + text:$.bbq.getState(current_entity.name+'-pkey'), + title: current_entity.name, + click: function() { + var entity = IPA.get_entity((this.title)); + IPA.nav.show_page(that.facet.entity.name, 'default'); + $('a', that.facet_tabs).removeClass('selected'); + return false; + } + })); + + current_entity = current_entity.containing_entity; + } + + that.title_container.empty(); + var h3 = $('

').appendTo(that.title_container); + + h3.empty(); + h3.append(that.facet.entity.title); + h3.append(': '); + + for (var i = 0; i < breadcrumb.length; i+=1){ + h3.append(breadcrumb[i]); + h3.append(' > '); + + } + h3.append( + $('', { + 'class': 'facet-pkey', + text:value + })); + } else { + that.title_container.empty(); + var span = $('

',{ + text: that.facet.entity.metadata.label + }).appendTo(that.title_container); + } + }; + + that.create_facet_link = function(container, other_facet) { + + var li = $('
  • ', { + title: other_facet.name, + click: function() { + if (li.hasClass('entity-facet-disabled')) { + return false; + } + + var pkey = $.bbq.getState(that.facet.entity.name+'-pkey'); + IPA.nav.show_page(that.facet.entity.name, other_facet.name, pkey); + + return false; + } + }).appendTo(container); + + $('', { + text: other_facet.label, + id: other_facet.name + }).appendTo(li); + }; + + that.create_facet_group = function(container, facet_group) { + + var section = $('', { + 'class': 'facet-group' + }).appendTo(container); + + $('
    ', { + 'class': 'facet-group-name', + text: facet_group.label + }).appendTo(section); + + var ul = $('