From 975e2bfa2b48c60bba99e2f2e4f106e031230bd3 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Wed, 22 Jun 2011 21:54:28 -0500 Subject: Added navigation breadcrumb. Navigation breadcrumb has been added to the facet header. The breadcrumb will appear on details, association, and automount facets. Ticket #1323 --- install/ui/automount.js | 25 ++++++----- install/ui/details.js | 2 +- install/ui/dns.js | 2 +- install/ui/entitle.js | 2 +- install/ui/entity.js | 110 ++++++++++++++++++++++++++---------------------- install/ui/ipa.css | 11 +++-- install/ui/search.js | 4 +- 7 files changed, 86 insertions(+), 70 deletions(-) diff --git a/install/ui/automount.js b/install/ui/automount.js index 73419f70b..3e031769c 100644 --- a/install/ui/automount.js +++ b/install/ui/automount.js @@ -28,8 +28,7 @@ IPA.entity_factories.automountlocation = function() { return IPA.entity_builder(). - entity({name:'automountlocation', - title:IPA.messages.tabs.automount}). + entity({ name: 'automountlocation' }). search_facet({ title: IPA.metadata.objects.automountlocation.label, columns:['cn'] @@ -39,7 +38,8 @@ IPA.entity_factories.automountlocation = function() { nested_entity : 'automountmap', label : IPA.metadata.objects.automountmap.label, name: 'maps', - columns:['automountmapname'] + columns:['automountmapname'], + back_link_text: 'Back to Locations' }). details_facet({ sections:[ @@ -48,7 +48,9 @@ IPA.entity_factories.automountlocation = function() { label: IPA.messages.details.identity, fields:['cn'] } - ]}). + ], + back_link_text: 'Back to Locations' + }). adder_dialog({ fields:['cn'] }). @@ -56,8 +58,7 @@ IPA.entity_factories.automountlocation = function() { }; IPA.entity_factories.automountmap = function() { return IPA.entity_builder(). - entity({name:'automountmap', - title:IPA.messages.tabs.automount}). + entity({ name: 'automountmap' }). containing_entity('automountlocation'). nested_search_facet({ facet_group: 'member', @@ -65,7 +66,8 @@ IPA.entity_factories.automountmap = function() { label : IPA.metadata.objects.automountkey.label, name: 'keys', get_values: IPA.get_option_values, - columns:['automountkey','automountinformation'] + columns:['automountkey','automountinformation'], + back_link_text: 'Back to Locations' }). details_facet({ sections:[ @@ -74,7 +76,8 @@ IPA.entity_factories.automountmap = function() { label: IPA.messages.details.identity, fields:['automountmapname','description'] } - ] + ], + back_link_text: 'Back to Locations' }). adder_dialog({ factory: IPA.automountmap_adder_dialog, @@ -104,8 +107,7 @@ IPA.entity_factories.automountmap = function() { IPA.entity_factories.automountkey = function() { return IPA.entity_builder(). - entity({name:'automountkey', - title:IPA.messages.tabs.automount}). + entity({ name: 'automountkey' }). containing_entity('automountmap'). details_facet({ sections:[ @@ -114,7 +116,8 @@ IPA.entity_factories.automountkey = function() { label: IPA.messages.details.identity, fields:['automountkey','automountinformation','description'] } - ] + ], + back_link_text: 'Back to Locations' }). adder_dialog({ fields:['automountkey','automountinformation'] diff --git a/install/ui/details.js b/install/ui/details.js index 46a28e508..477857b20 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -336,7 +336,7 @@ IPA.details_facet = function(spec) { that.create = function(container) { if (that.entity.facets.length == 1) { - that.disable_back_link = true; + that.disable_breadcrumb = true; that.disable_facet_tabs = true; } diff --git a/install/ui/dns.js b/install/ui/dns.js index 6ec807a09..56779a365 100644 --- a/install/ui/dns.js +++ b/install/ui/dns.js @@ -99,7 +99,7 @@ IPA.dnsrecord_facet = function(spec) { spec = spec || {}; - spec.disable_back_link = false; + spec.disable_breadcrumb = false; spec.disable_facet_tabs = false; var that = IPA.search_facet(spec); diff --git a/install/ui/entitle.js b/install/ui/entitle.js index 66e5e2a61..7efec7204 100644 --- a/install/ui/entitle.js +++ b/install/ui/entitle.js @@ -326,7 +326,7 @@ IPA.entitle.entity = function(spec) { IPA.entitle.details_facet = function(spec) { spec = spec || {}; - spec.disable_back_link = true; + spec.disable_breadcrumb = true; var that = IPA.details_facet(spec); diff --git a/install/ui/entity.js b/install/ui/entity.js index 6a01652e5..6a1cde38d 100644 --- a/install/ui/entity.js +++ b/install/ui/entity.js @@ -36,8 +36,9 @@ IPA.facet = function (spec) { that.title = spec.title || that.label; that.display_class = spec.display_class; - that.disable_back_link = spec.disable_back_link; + that.disable_breadcrumb = spec.disable_breadcrumb; that.disable_facet_tabs = spec.disable_facet_tabs; + that.back_link_text = spec.back_link_text || IPA.messages.buttons.back_to_list; that.header = spec.header || IPA.facet_header({ facet: that }); @@ -186,6 +187,7 @@ IPA.facet_header = function(spec) { spec = spec || {}; var that = {}; + that.facet = spec.facet; that.select_tab = function() { @@ -203,48 +205,47 @@ IPA.facet_header = function(spec) { that.set_pkey = function(value) { - if (value) { + if (!value) return; + + if (!that.facet.disable_breadcrumb) { 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; - } + var entity = that.facet.entity.containing_entity; + + while (entity) { + breadcrumb.unshift($('', { + text: $.bbq.getState(entity.name+'-pkey'), + title: entity.name, + click: function(entity) { + return function() { + IPA.nav.show_page(entity.name, 'default'); + return false; + }; + }(entity) })); - current_entity = current_entity.containing_entity; + entity = 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(' > '); + that.path.empty(); + for (var i=0; i', { - 'class': 'facet-pkey', - text:value - })); - } else { - that.title_container.empty(); - var span = $('

',{ - text: that.facet.entity.metadata.label - }).appendTo(that.title_container); + + that.path.append(' » '); + that.path.append(value); } + + that.title_container.empty(); + var h3 = $('

').appendTo(that.title_container); + h3.append(that.facet.entity.title); + h3.append(': '); + + $('', { + 'class': 'facet-pkey', + text: value + }).appendTo(h3); }; that.create_facet_link = function(container, other_facet) { @@ -293,35 +294,44 @@ IPA.facet_header = function(spec) { that.create = function(container) { - that.title_container = $('
', { - 'class': 'facet-title' - }).appendTo(container); - - that.set_pkey(null); + if (!that.facet.disable_breadcrumb) { + that.breadcrumb = $('
', { + 'class': 'breadcrumb' + }).appendTo(container); - if (!that.facet.disable_back_link) { that.back_link = $('', { - 'class': 'back-link', - click: function() { - if ($(this).hasClass('entity-facet-disabled')) { - return false; - } + 'class': 'back-link' + }).appendTo(that.breadcrumb); + that.back_link.append('« '); + + $('', { + text: that.facet.back_link_text, + click: function() { var current_entity = that.facet.entity; while(current_entity.containing_entity){ current_entity = current_entity.containing_entity; } IPA.nav.show_page(current_entity.name, 'search'); - $('a', that.facet_tabs).removeClass('selected'); return false; } - }).appendTo(container); + }).appendTo(that.back_link); - that.back_link.append('◀ '); - that.back_link.append(IPA.messages.buttons.back_to_list); + + that.path = $('', { + 'class': 'path' + }).appendTo(that.breadcrumb); } + that.title_container = $('
', { + 'class': 'facet-title' + }).appendTo(container); + + var span = $('

', { + text: that.facet.entity.metadata.label + }).appendTo(that.title_container); + if (!that.facet.disable_facet_tabs) { that.facet_tabs = $('
', { 'class': 'facet-tabs' diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 47ee51332..b9801b8c9 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -443,7 +443,7 @@ div.tabs { .facet-title { position: absolute; - top: 0; + top: 10px; left: 0; color: gray; display: block; @@ -461,11 +461,14 @@ div.tabs { color:black; } -.back-link { - cursor: pointer; +.breadcrumb { position: absolute; top: 0; - right: 0; + left: 0; +} + +.breadcrumb a { + cursor: pointer; } /* ---- Facet Tabs ---- */ diff --git a/install/ui/search.js b/install/ui/search.js index 96c72a858..33f6b8bb6 100644 --- a/install/ui/search.js +++ b/install/ui/search.js @@ -31,7 +31,7 @@ IPA.search_facet = function(spec) { spec.name = spec.name || 'search'; spec.managed_entity_name = spec.managed_entity_name || spec.entity_name; - spec.disable_back_link = spec.disable_back_link === undefined ? true : spec.disable_back_link; + spec.disable_breadcrumb = spec.disable_breadcrumb === undefined ? true : spec.disable_breadcrumb; spec.disable_facet_tabs = spec.disable_facet_tabs === undefined ? true : spec.disable_facet_tabs; var that = IPA.table_facet(spec); @@ -339,7 +339,7 @@ IPA.nested_search_facet = function(spec) { spec.managed_entity_name = spec.nested_entity; - spec.disable_back_link = false; + spec.disable_breadcrumb = false; spec.disable_facet_tabs = false; var that = IPA.search_facet(spec); -- cgit