From 844ff2075f8c1ce3131a161db9d3fb498b4940e0 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Wed, 10 Aug 2011 20:03:02 -0500 Subject: Fixed layout problem in permission adder dialog. In order to maintain consistent layout between details page and dialog boxes the IPA.details_list_section has been replaced with IPA.details_table_section which is based on table. The IPA.target_section and other subclasses of IPA.details_list_section have been converted to use IPA.details_table_section as well. The unit tests have been updated accordingly. Ticket #1648 --- install/ui/aci.js | 377 ++++++++++----------- install/ui/details.js | 83 +++-- install/ui/dialog.js | 58 ++-- install/ui/entity.js | 2 +- install/ui/hbac.js | 2 +- install/ui/host.js | 4 +- install/ui/ipa.css | 138 ++------ install/ui/rule.js | 4 +- install/ui/service.js | 2 +- install/ui/sudo.js | 22 +- .../ui/test/data/permission_show_targetgroup.json | 10 +- install/ui/test/details_tests.js | 106 +++--- 12 files changed, 352 insertions(+), 456 deletions(-) diff --git a/install/ui/aci.js b/install/ui/aci.js index a0399f501..e447391cc 100644 --- a/install/ui/aci.js +++ b/install/ui/aci.js @@ -33,20 +33,29 @@ IPA.entity_factories.permission = function() { }). details_facet({sections:[ { - name:'identity', - fields: [{ - factory: IPA.text_widget, - name: 'cn', - read_only: true - }] + name: 'identity', + fields: [ + { + factory: IPA.text_widget, + name: 'cn', + read_only: true + } + ] }, { - name:'rights', - factory:IPA.rights_section + name: 'rights', + label: IPA.messages.objects.permission.rights, + fields: [ + { + factory: IPA.rights_widget, + name: 'permissions', + join: true + } + ] }, { - name:'target', - factory:IPA.target_section, + factory: IPA.target_section, + name: 'target', label: IPA.messages.objects.permission.target }]}). association_facet({ @@ -56,10 +65,10 @@ IPA.entity_factories.permission = function() { adder_dialog({ width: 500, height: 400, - fields:[ + fields: [ 'cn', { - factory:IPA.rights_widget, + factory: IPA.rights_widget, name: 'permissions', join: true, undo: false }, @@ -68,7 +77,8 @@ IPA.entity_factories.permission = function() { name: 'target', label: IPA.messages.objects.permission.target, undo: false - }] + } + ] }). build(); }; @@ -380,26 +390,6 @@ IPA.rights_widget = function(spec) { return that; }; - -IPA.rights_section = function(spec) { - - spec = spec || {}; - - spec.name = 'rights'; - spec.label = IPA.messages.objects.permission.rights; - - var that = IPA.details_section(spec); - - that.add_field(IPA.rights_widget({ - entity: that.entity, - name: 'permissions', - join: true - })); - - return that; -}; - - IPA.target_section = function(spec) { spec = spec || {}; @@ -408,158 +398,60 @@ IPA.target_section = function(spec) { that.section = true; that.undo = typeof spec.undo == 'undefined' ? true : spec.undo; - that.filter_text = IPA.text_widget({ - name: 'filter', - undo: that.undo, - entity: spec.entity - }); - that.subtree_textarea = IPA.textarea_widget({ - entity: spec.entity, - name: 'subtree', - cols: 30, rows: 1, - undo: that.undo - }); - that.group_select = IPA.entity_select_widget({ - name: 'targetgroup', - other_entity: 'group', - other_field: 'cn', - undo: that.undo - }); - that.type_select = IPA.select_widget({ - name: 'type', - undo: that.undo - }); - that.attribute_table = IPA.attributes_widget({ - entity: spec.entity, - name: 'attrs', - undo: that.undo - }); - - that.add_field(that.filter_text); - that.add_field(that.subtree_textarea); - that.add_field(that.group_select ); - that.add_field(that.type_select); - that.add_field(that.attribute_table); - - - /*TODO these next two functions are work arounds for missing attribute - permissions for the filter text. Remove them once that has been fixed */ - that.filter_text.update = function(){ - var value = that.filter_text.values && that.filter_text.values.length ? - that.filter_text.values[0] : ''; - $('input[name="'+that.filter_text.name+'"]', - that.filter_text.container).val(value); - - var label = $('label[name="'+that.filter_text.name+'"]', - that.filter_text.container); - var input = $('input[name="'+that.filter_text.name+'"]', - that.filter_text.container); - label.css('display', 'none'); - input.css('display', 'inline'); - }; - - that.filter_text.save = function(){ - var input = $('input[name="'+that.filter_text.name+'"]', - that.filter_text.container); - var value = input.val(); - return value === '' ? [] : [value]; - }; - var target_types = [ { - name:'filter', - create: function(dl){ - - $('
'). - append($('
', { - 'class': 'aci_by_filter first' - }).appendTo(dl); - - var span = $('', { - name: 'filter' - }).appendTo(dd); - - that.filter_text.create(span); + name: 'filter', + label: IPA.messages.objects.permission.filter, + create: function(container) { + that.filter_text.create(container); }, - load: function(record){ + load: function(record) { that.filter_text.load(record); }, - save: function(record){ + save: function(record) { record.filter = that.filter_text.save()[0]; } }, { - name:'subtree', - create:function(dl) { - $('
'). - append($('
', { - 'class': 'aci_by_query first' - }).appendTo(dl); - var span = $('', { - name: 'subtree' - }).appendTo(dd); - that.subtree_textarea.create(span); + name: 'subtree', + label: IPA.messages.objects.permission.subtree, + create: function(container) { + that.subtree_textarea.create(container); }, - load: function(record){ + load: function(record) { that.subtree_textarea.load(record); }, - save: function(record){ + save: function(record) { record.subtree = that.subtree_textarea.save()[0]; } }, { - name:'targetgroup', - create: function (dl) { - $('
'). - append($('
', { - 'class': 'aci_by_group first' - }).appendTo(dl); - var span = $('', { - name: 'targetgroup' - }).appendTo(dd); - that.group_select.create(span); + name: 'targetgroup', + label: IPA.messages.objects.permission.targetgroup, + create: function(container) { + that.group_select.create(container); }, - load: function(record){ + load: function(record) { that.group_select.list.val(record.targetgroup); }, - save: function(record){ + save: function(record) { record.targetgroup = that.group_select.save()[0]; } }, { - name:'type', - create: function(dl) { - $('
'). - append($('
', { - 'class': 'aci_by_type first' - }).appendTo(dl); + name: 'type', + label: IPA.messages.objects.permission.type, + create: function(container) { + var span = $('', { name: 'type' - }).appendTo(dd); - that.type_select.create(span); + }).appendTo(container); + that.type_select.create(span); - span = $('
', { - name: 'attrs', - 'class':'other' - }).appendTo(dl); + span = $('', { + name: 'attrs' + }).appendTo(container); that.attribute_table.create(span); @@ -570,17 +462,21 @@ IPA.target_section = function(spec) { that.type_select.save()[0]; that.attribute_table.reset(); }); + select.append($('
Target:
').appendTo(dl); + var table = $('', { + 'class': 'section-table' + }).appendTo(that.container); - if (that.undo){ - dl.css('display','none'); + var tr = $('').appendTo(table); + + var td = $('', { + style: 'display: none' + }).appendTo(table); + + td = $('
', { + 'class': 'section-cell-label' + }).appendTo(tr); + + $('', { + 'class': 'section-cell-field' + }).appendTo(tr); + + var field_container = $('
', { + name: 'target', + 'class': 'field' + }).appendTo(td); + + that.target_type_select = $('
', { + 'class': 'section-cell-label' + }).appendTo(tr); + + $('', { + 'class': 'section-cell-field' + }).appendTo(tr); + + field_container = $('
', { + name: target_type.name, + title: target_type.label, + 'class': 'field' + }).appendTo(td); + + target_type.create(field_container); + target_type.container = tr; } }; @@ -667,14 +662,14 @@ IPA.target_section = function(spec) { reset_target_widgets(); var target_type_name ; - for (var i = 0 ; i < target_types.length; i += 1){ + for (var i=0; i', { name: field.name, - 'class': 'details-field' + title: field.label, + 'class': 'field' }).appendTo(container); field.create(field_container); } @@ -167,36 +168,7 @@ IPA.details_section = function(spec) { return that; }; - -/** - * This class creates a details section formatted as a list of - * attributes names and values. The list is defined using a
tag. - * The attribute name is defined inside a
tag. The attribute - * value is specified within a inside a
tag. If the - * attribute has multiple values the will contain be - * duplicated to display each value. - * - * Example: - *
- * - *
First Name:
- *
- * - * John Smith - * - *
- * - *
Telephone Number:
- *
- * - *
111-1111
- *
222-2222
- * - *
- * - *
- */ -IPA.details_list_section = function(spec) { +IPA.details_table_section = function(spec) { spec = spec || {}; @@ -207,33 +179,56 @@ IPA.details_list_section = function(spec) { // do not call section_create() here - var dl = $('
', { - 'id': that.name, - 'class': 'entryattrs' - }).appendTo(container); + var table = $('', { + 'class': 'section-table' + }).appendTo(that.container); var fields = that.fields.values; for (var i=0; i').appendTo(table); - $('
', { - html: label+':', - title: label - }).appendTo(dl); + var td = $('
', { + 'class': 'section-cell-label' + }).appendTo(tr); - var dd = $('
').appendTo(dl); + $('
', { + 'class': 'section-cell-field' + }).appendTo(tr); var field_container = $('
', { name: field.name, - 'class': 'details-field' - }).appendTo(dd); + title: field.label, + 'class': 'field' + }).appendTo(td); + field.create(field_container); + + if (field.optional){ + field_container.css('display', 'none'); + var link = $('', { + text: IPA.messages.widget.optional, + href: '', + click: function() { + field_container.css('display', 'inline'); + link.css('display', 'none'); + return false; + } + }).appendTo(td); + } } }; - that.list_section_create = that.create; + that.table_section_create = that.create; return that; }; diff --git a/install/ui/dialog.js b/install/ui/dialog.js index 05d0eb4b5..2d6d941c6 100644 --- a/install/ui/dialog.js +++ b/install/ui/dialog.js @@ -128,7 +128,9 @@ IPA.dialog = function(spec) { */ that.create = function() { - var table = $('').appendTo(that.container); + var table = $('
', { + 'class': 'section-table' + }).appendTo(that.container); var fields = that.fields.values; for (var i=0; i').appendTo(table); var td = $('
', { - style: 'vertical-align: top;', - title: field.label + 'class': 'section-cell-label' }).appendTo(tr); - var label_text = field.label; - if (label_text !== null){ - label_text += ': '; - }else{ - label_text = ''; - } - td.append($('', { - style: 'vertical-align: top;' + 'class': 'section-cell-field' }).appendTo(tr); - var span = $('', { 'name': field.name }).appendTo(td); - field.create(span); - field.field_span = span; + var field_container = $('
', { + name: field.name, + title: field.label, + 'class': 'field' + }).appendTo(td); + + field.create(field_container); if (field.optional){ - span.css('display','none'); - td.append( - $('',{ - text: IPA.messages.widget.optional, - href:'', - click: function(){ - var span = $(this).prev(); - span.css('display','inline'); - $(this).css('display','none'); - return false; - } - })); + field_container.css('display','none'); + var link = $('', { + text: IPA.messages.widget.optional, + href: '', + click: function(){ + field_container.css('display', 'inline'); + link.css('display', 'none'); + return false; + } + }).appendTo(td); } } @@ -181,7 +183,7 @@ IPA.dialog = function(spec) { var div = $('
', { name: section.name, - 'class': 'details-section' + 'class': 'dialog-section' }).appendTo(that.container); section.create(div); diff --git a/install/ui/entity.js b/install/ui/entity.js index 8b05d475a..15e45aad9 100644 --- a/install/ui/entity.js +++ b/install/ui/entity.js @@ -882,7 +882,7 @@ IPA.entity_builder = function(){ if (spec.factory) { section = spec.factory(spec); } else { - section = IPA.details_list_section(spec); + section = IPA.details_table_section(spec); } facet.add_section(section); var fields = spec.fields; diff --git a/install/ui/hbac.js b/install/ui/hbac.js index 7f445b91f..0f2da3a9e 100644 --- a/install/ui/hbac.js +++ b/install/ui/hbac.js @@ -141,7 +141,7 @@ IPA.hbacrule_details_facet = function(spec) { var that = IPA.details_facet(spec); function general_section(){ - var section = IPA.details_list_section({ + var section = IPA.details_table_section({ name: 'general', entity:that.entity, label: IPA.messages.details.general diff --git a/install/ui/host.js b/install/ui/host.js index bcff252dd..7eb2e98e5 100644 --- a/install/ui/host.js +++ b/install/ui/host.js @@ -427,10 +427,10 @@ IPA.host_enrollment_section = function(spec) { spec = spec || {}; - var that = IPA.details_list_section(spec); + var that = IPA.details_table_section(spec); that.create = function(container) { - that.list_section_create(container); + that.table_section_create(container); var keytab_field = that.get_field('has_keytab'); var password_field = that.get_field('has_password'); diff --git a/install/ui/ipa.css b/install/ui/ipa.css index e341b4112..826126065 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -806,112 +806,46 @@ hr { line-height: 25px; } -.details-section { - margin-left: 4.5em; - margin-right: 1.5em; - margin-top: 1.8em; - white-space: nowrap; - padding-bottom: 1.8em; - padding-right: 1.8em; +.dialog-section { + margin-top: 10px; } -.undo { - cursor:pointer; +.section-table { + width: 100%; } -dl.entryattrs { - clear: both; - margin-left: 1.5em; - margin-top: 1.8em; - white-space: nowrap; +.section-cell-label { + vertical-align: top; + width: 120px; } -dl.entryattrs dt { - clear: left; - float: left; - padding-bottom: 1.8em; - padding-right: 1.8em; - text-align: right; - width: 16em; - margin: 0.5em -0.5em 0 -6em; +.section-cell-field { } -dl.entryattrs dd { - float: left; +.details-section { + margin-top: 1em; + margin-left: 4.5em; + margin-right: 3.3em; margin-bottom: 1em; - margin-left: 0; - margin-top: 0.5em; - font-weight: bold; -} - -dl.entryattrs input.otp { - min-width: 15em; - width: 15em; -} - -dl.aci-target{ - clear: both; - margin-left: 2em; - margin-top: 1.8em; - white-space: nowrap; -} - -dl.aci-target dt { - padding-bottom: 1.8em; - padding-left: 2.8em; - - text-align: left; - width: 16em; - margin: 0.5em -0.5em 0 -6em; -} - -dl.aci-target dd { -} - -dl.aci-target dd.other { - margin-left: -1em; -} - -dl.aci-target dd.first { - margin-left: 8.5em; - margin-top: -3.7em; - padding-bottom: 2em; - -} - -dl.aci-target dd.other { - padding-left: 0.7em; -} - - -dl.aci-target input { - } -#group_filter { - margin-right: 2em; -} - -#aci_by_filter { - margin-right: 1em; -} - -#aci_by_query { - margin-right: 1em; +.details-section .section-table { + width: 100%; + border-spacing: 12px; } -#aci_by_group { - margin-right: 1em; +.details-section .section-cell-label { + text-align: right; + vertical-align: top; + width: 120px; } -#aci_by_type { - margin-right: 1em; - margin-top: 2.2em; +.details-section .section-cell-field { + font-weight: bold; } -#aci_attributes_table { - overflow-x: hidden; - width: 46em; +.undo { + cursor:pointer; } span.attrhint { @@ -1101,32 +1035,6 @@ table.kerberos-key-status { background-color: #daa520; } -dl.modal { - clear: both; - margin-left: 1em; - margin-top: 1em; - white-space: nowrap; -} - -dl.modal dt { - clear: left; - float: left; - padding-bottom: 0; - padding-right: 0; - text-align: right; - width: 10em; -} - -dl.modal dd { - float: left; - padding-bottom: 0; - margin-left: 0.8em; -} -/* -#dns-record-type-filter { - margin: 0 1em 0 0.5em; -} -*/ .ui-widget-content { border:0; } diff --git a/install/ui/rule.js b/install/ui/rule.js index d9602f689..b4d10a1fc 100644 --- a/install/ui/rule.js +++ b/install/ui/rule.js @@ -45,7 +45,7 @@ IPA.rule_details_section = function(spec) { var span = $('', { name: that.field_name, title: param_info.doc, - 'class': 'details-field' + 'class': 'field' }).appendTo(container); @@ -92,7 +92,7 @@ IPA.rule_details_section = function(spec) { var table_span = $('', { name: table.field_name, title: param_info ? param_info.doc : table.field_name, - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field(table.field_name); diff --git a/install/ui/service.js b/install/ui/service.js index eef909115..0bb15cba8 100644 --- a/install/ui/service.js +++ b/install/ui/service.js @@ -71,7 +71,7 @@ IPA.entity_factories.service = function() { standard_association_facets(). adder_dialog({ factory: IPA.service_add_dialog, - width: 450, + width: 500, height: 300 }). build(); diff --git a/install/ui/sudo.js b/install/ui/sudo.js index 1a6b03b1b..1e1b5a6b7 100644 --- a/install/ui/sudo.js +++ b/install/ui/sudo.js @@ -133,7 +133,7 @@ IPA.sudorule_details_facet = function(spec) { var that = IPA.details_facet(spec); function general_section(){ - var section = IPA.details_list_section({ + var section = IPA.details_table_section({ name: 'general', label: IPA.messages.details.general, entity: that.entity, @@ -746,7 +746,7 @@ IPA.sudo.rule_details_command_section = function(spec) { var span = $('', { name: 'cmdcategory', title: param_info.doc, - 'class': 'details-field' + 'class': 'field' }).appendTo(container); $('

', { @@ -764,7 +764,7 @@ IPA.sudo.rule_details_command_section = function(spec) { var table_span = $('', { name: 'memberallowcmd_sudocmd', title: param_info ? param_info.doc : 'memberallowcmd_sudocmd', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('memberallowcmd_sudocmd'); @@ -776,7 +776,7 @@ IPA.sudo.rule_details_command_section = function(spec) { table_span = $('', { name: 'memberallowcmd_sudocmdgroup', title: param_info ? param_info.doc : 'memberallowcmd_sudocmdgroup', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('memberallowcmd_sudocmdgroup'); @@ -793,7 +793,7 @@ IPA.sudo.rule_details_command_section = function(spec) { table_span = $('', { name: 'memberdenycmd_sudocmd', title: param_info ? param_info.doc : 'memberdenycmd_sudocmd', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('memberdenycmd_sudocmd'); @@ -805,7 +805,7 @@ IPA.sudo.rule_details_command_section = function(spec) { table_span = $('', { name: 'memberdenycmd_sudocmdgroup', title: param_info ? param_info.doc : 'memberdenycmd_sudocmdgroup', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('memberdenycmd_sudocmdgroup'); @@ -919,7 +919,7 @@ IPA.sudo.rule_details_runas_section = function(spec) { var span = $('', { name: 'ipasudorunasusercategory', title: param_info.doc, - 'class': 'details-field' + 'class': 'field' }).appendTo(container); span.append(param_info.doc+": "); field.create(span); @@ -930,7 +930,7 @@ IPA.sudo.rule_details_runas_section = function(spec) { var table_span = $('', { name: 'ipasudorunas_user', title: param_info ? param_info.doc : 'ipasudorunas_user', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('ipasudorunas_user'); @@ -941,7 +941,7 @@ IPA.sudo.rule_details_runas_section = function(spec) { table_span = $('', { name: 'ipasudorunas_group', title: param_info ? param_info.doc : 'ipasudorunas_group', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('ipasudorunas_group'); @@ -954,7 +954,7 @@ IPA.sudo.rule_details_runas_section = function(spec) { span = $('', { name: 'ipasudorunasgroupcategory', title: param_info.doc, - 'class': 'details-field' + 'class': 'field' }).appendTo(container); span.append(param_info.doc+": "); @@ -967,7 +967,7 @@ IPA.sudo.rule_details_runas_section = function(spec) { table_span = $('', { name: 'ipasudorunasgroup_group', title: param_info ? param_info.doc : 'ipasudorunasgroup_group', - 'class': 'details-field' + 'class': 'field' }).appendTo(span); field = that.get_field('ipasudorunasgroup_group'); diff --git a/install/ui/test/data/permission_show_targetgroup.json b/install/ui/test/data/permission_show_targetgroup.json index 0a140c201..cfe49b938 100644 --- a/install/ui/test/data/permission_show_targetgroup.json +++ b/install/ui/test/data/permission_show_targetgroup.json @@ -5,16 +5,24 @@ "result": { "attributelevelrights": { "aci": "rscwo", + "attrs": "rscwo", "businesscategory": "rscwo", "cn": "rscwo", "description": "rscwo", + "filter": "rscwo", + "group": "rscwo", + "ipapermissiontype": "rscwo", "member": "rscwo", "nsaccountlock": "rscwo", "o": "rscwo", "objectclass": "rscwo", "ou": "rscwo", "owner": "rscwo", - "seealso": "rscwo" + "permissions": "rscwo", + "seealso": "rscwo", + "subtree": "rscwo", + "targetgroup": "rscwo", + "type": "rscwo" }, "cn": [ "targetgroup" diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js index e06ddc23c..122234e78 100644 --- a/install/ui/test/details_tests.js +++ b/install/ui/test/details_tests.js @@ -58,7 +58,7 @@ module('details', { test("Testing IPA.details_section.create().", function() { - var section = IPA.details_list_section({ + var section = IPA.details_table_section({ entity: IPA.get_entity('user'), name:'IDIDID', label:'NAMENAMENAME'}). text({name:'cn'}). @@ -71,45 +71,38 @@ test("Testing IPA.details_section.create().", function() { var container = $("
"); section.create(container); - var dl = $('dl', container); + var table = $('table', container); same( - dl.length, 1, - 'Checking dl tag' + table.length, 1, + 'Verifying table' ); + var rows = $('tr', table); same( - dl.attr('id'), section.name, - 'Checking section name' - ); - - var dts = $('dt', dl); - same( - dts.length, fields.length, // each field generates dt & dd - 'Checking number of children' + rows.length, fields.length, + 'Verifying table rows' ); for (var i=0; i