summaryrefslogtreecommitdiffstats
path: root/install
diff options
context:
space:
mode:
authorEndi S. Dewata <edewata@redhat.com>2011-04-28 19:17:58 -0500
committerEndi S. Dewata <edewata@redhat.com>2011-05-05 12:14:43 -0500
commitdd89c28654c92c0922900409b37c1abcefc56c84 (patch)
treecf6d1d5eedcce59a0cd1fd263c3fe9a7a435b36b /install
parent5eb9f088f2c5c902a55aefdf9dd8b2a95e060837 (diff)
downloadfreeipa-dd89c28654c92c0922900409b37c1abcefc56c84.tar.gz
freeipa-dd89c28654c92c0922900409b37c1abcefc56c84.tar.xz
freeipa-dd89c28654c92c0922900409b37c1abcefc56c84.zip
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.
Diffstat (limited to 'install')
-rw-r--r--install/ui/associate.js19
-rw-r--r--install/ui/details.js45
-rw-r--r--install/ui/dns.js21
-rw-r--r--install/ui/entity.js10
-rw-r--r--install/ui/index.html1
-rw-r--r--install/ui/ipa.css24
-rw-r--r--install/ui/navigation.js35
-rw-r--r--install/ui/test/navigation_tests.js63
-rw-r--r--install/ui/webui.js5
9 files changed, 98 insertions, 125 deletions
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);
-
- $('<input/>', {
- 'type': 'button',
- 'name': 'remove',
- 'value': IPA.messages.buttons.remove
- }).appendTo(buttons);
-
- $('<input/>', {
- '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);
-
- $('<input/>', {
- 'type': 'text',
- 'name': 'reset'
- }).appendTo(buttons);
-
- $('<input/>', {
- '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('<hr/>');
}
- }
+ };
- 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<that.sections.length; i++) {
var section = that.sections[i];
@@ -512,15 +491,15 @@ IPA.details_facet = function(spec) {
if (that.pkey){
that.entity_header.set_pkey(that.pkey);
}
- }
+ };
- function reset() {
+ that.reset = function() {
for (var i=0; i<that.sections.length; i++) {
var section = that.sections[i];
section.reset();
}
- }
+ };
that.details_facet_init = that.init;
that.details_facet_create_content = that.create_content;
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 5cb49e55f..5af6e7a32 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -304,25 +304,6 @@ IPA.records_facet = function (spec){
return pkey != that.pkey || record != that.record;
};
- that.create_action_panel = function(container) {
-
- that.facet_create_action_panel(container);
-
- var buttons = $('.action-controls', container);
-
- $('<input/>', {
- 'type': 'button',
- 'name': 'remove',
- 'value': IPA.messages.buttons.remove
- }).appendTo(buttons);
-
- $('<input/>', {
- 'type': 'button',
- 'name': 'add',
- 'value': IPA.messages.buttons.add
- }).appendTo(buttons);
- };
-
function create_content(container) {
$('<h1/>',{
@@ -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 =
- $("<div/>",{
- "class":'entity-container',
- id: 'entity-container-' + entity.name
- }).
+ $('<div/>').
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 @@
</span>
</div>
<div id="navigation" class="tabs"></div>
+ <div id="content"></div>
</div>
</body>
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 = $('<ul/>').appendTo(container);
for (var i=0; i<tabs.length; i++) {
var tab = tabs[i];
-
+ var tab_id = parent_id+'-'+i;
var label = tab.name;
if (tab.entity) {
var entity = IPA.get_entity(tab.entity);
@@ -149,32 +152,37 @@ IPA.navigation = function(spec) {
}
$('<li/>').append($('<a/>', {
- href: '#'+tab.name,
- title: tab.name,
+ href: '#'+tab_id,
+ title: label,
html: label
})).appendTo(ul);
- tab.content = $('<div/>', {
- id: tab.name
+ tab.container = $('<div/>', {
+ id: tab_id,
+ name: tab.name
}).appendTo(container);
- if (tab.entity) {
- tab.content.addClass('entity-container');
- }
-
if (tab.children && tab.children.length) {
- that._create(tab.children, tab.content, depth+1);
+ that._create(tab.children, tab.container, depth+1);
+
+ } else if (tab.entity) {
+ tab.content = $('<div/>', {
+ name: tab.name,
+ title: label,
+ 'class': 'entity-container'
+ }).appendTo(that.content);
}
}
};
that.update = function() {
+ $('.entity-container', that.content).css('display', 'none');
that._update(that.tabs, that.container, 1);
};
that._update = function(tabs, container, depth) {
- var parent_name = container.attr('id');
+ var parent_name = container.attr('name') || container.attr('id');
var tab_name = that.get_state(parent_name);
var index = 0;
@@ -186,9 +194,10 @@ IPA.navigation = function(spec) {
var tab = tabs[index];
if (tab.children && tab.children.length) {
- that._update(tab.children, tab.content, depth+1);
+ that._update(tab.children, tab.container, depth+1);
} else if (tab.entity) {
+ $('.entity-container[name="'+tab.entity.name+'"]', that.content).css('display', 'inline');
tab.entity.setup(tab.content);
}
};
diff --git a/install/ui/test/navigation_tests.js b/install/ui/test/navigation_tests.js
index e88c99d94..0f8f1be4a 100644
--- a/install/ui/test/navigation_tests.js
+++ b/install/ui/test/navigation_tests.js
@@ -43,8 +43,8 @@ test("Testing IPA.navigation.create().", function() {
metadata:IPA.metadata.objects.user});
that.setup = function(container){
user_mock_called = true;
- same(container[0].id,'user','user id');
- same(container[0].nodeName,'DIV','user div');
+ same(container.attr('name'), 'user', 'user container name');
+ same(container[0].nodeName, 'DIV', 'user container element');
};
return that;
};
@@ -53,8 +53,8 @@ test("Testing IPA.navigation.create().", function() {
metadata:IPA.metadata.objects.group});
that.setup = function(container){
group_mock_called = true;
- same(container[0].id,'group','group id');
- same(container[0].nodeName,'DIV','group Div');
+ same(container.attr('name'), 'group','user container name');
+ same(container[0].nodeName, 'DIV', 'user container element');
};
return that;
};
@@ -62,12 +62,14 @@ test("Testing IPA.navigation.create().", function() {
IPA.start_entities();
IPA.metadata = {};
- var container = $('<div id="navigation"/>').appendTo(document.body);
+ var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
+ var entity_container = $('<div id="content"/>').appendTo(document.body);
var user_mock_called = false;
var group_mock_called = false;
var navigation = IPA.navigation({
- container: container,
+ container: navigation_container,
+ content: entity_container,
tabs: [
{ name:'identity', label:'IDENTITY', children: [
{name:'user', entity:'user'},
@@ -81,19 +83,34 @@ test("Testing IPA.navigation.create().", function() {
ok(user_mock_called, "mock user setup was called");
ok(!group_mock_called, "mock group setup was not called because the tab is inactive");
- same( container[0].children.length, 2, "Two Child tabs");
- same( container[0].children[1].id, 'identity', "Identity Tab");
- same( container[0].children[1].children[1].id, 'user', "User Tab");
- same( container[0].children[1].children[2].id, 'group', "User Tab");
- container.remove();
+
+ var level1_tabs = navigation_container.children('div');
+ same(level1_tabs.length, 1, "One level 1 tab");
+
+ var identity_tab = level1_tabs.first();
+ same(identity_tab.attr('name'), 'identity', "Identity Tab");
+
+ var level2_tabs = identity_tab.children('div');
+ same(level2_tabs.length, 2, "Two level 2 tabs");
+
+ var user_tab = level2_tabs.first();
+ same(user_tab.attr('name'), 'user', "User Tab");
+
+ var group_tab = user_tab.next();
+ same(group_tab.attr('name'), 'group', "Group Tab");
+
+ entity_container.remove();
+ navigation_container.remove();
});
test("Testing IPA.navigation.update() with valid index.", function() {
- var container = $('<div id="navigation"/>').appendTo(document.body);
+ var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
+ var entity_container = $('<div id="content"/>').appendTo(document.body);
var navigation = IPA.navigation({
- container: container,
+ container: navigation_container,
+ content: entity_container,
tabs: [
{ name:'identity', label:'IDENTITY', children: [
{name:'one', label:'One', setup: function (){}},
@@ -121,26 +138,29 @@ test("Testing IPA.navigation.update() with valid index.", function() {
navigation.update();
same(
- container.tabs('option', 'selected'), 0,
+ navigation_container.tabs('option', 'selected'), 0,
"Active tab at level 1"
);
same(
- $('#identity').tabs('option', 'selected'), 1,
+ $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 1,
"Active tab at level 2"
);
navigation.remove_state("identity");
- container.remove();
+ entity_container.remove();
+ navigation_container.remove();
});
test("Testing IPA.navigation.update() with out-of-range index.", function() {
- var container = $('<div id="navigation"/>').appendTo(document.body);
+ var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
+ var entity_container = $('<div id="content"/>').appendTo(document.body);
var navigation = IPA.navigation({
- container: container,
+ container: navigation_container,
+ content: entity_container,
tabs: [
{ name:'identity', label:'IDENTITY', children: [
{name:'one', label:'One', setup: function (){}},
@@ -168,16 +188,17 @@ test("Testing IPA.navigation.update() with out-of-range index.", function() {
navigation.update();
same(
- container.tabs('option', 'selected'), 0,
+ navigation_container.tabs('option', 'selected'), 0,
"Active tab at level 1"
);
same(
- $('#identity').tabs('option', 'selected'), 0,
+ $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 0,
"Active tab at level 2"
);
navigation.remove_state("identity");
- container.remove();
+ entity_container.remove();
+ navigation_container.remove();
});
diff --git a/install/ui/webui.js b/install/ui/webui.js
index eac07db23..a44b9f0e6 100644
--- a/install/ui/webui.js
+++ b/install/ui/webui.js
@@ -128,7 +128,8 @@ $(function() {
}
return factory({
- container: $('#navigation')
+ container: $('#navigation'),
+ content: $('#content')
});
}
@@ -153,7 +154,7 @@ $(function() {
function init_on_error(xhr, text_status, error_thrown) {
- var container = $('#navigation').empty();
+ var container = $('#content').empty();
container.append('<p>Error: '+error_thrown.name+'</p>');
container.append('<p>'+error_thrown.title+'</p>');
container.append('<p>'+error_thrown.message+'</p>');