diff options
-rw-r--r-- | install/ui/aci.js | 41 | ||||
-rwxr-xr-x | install/ui/combobox_open.png | bin | 0 -> 274 bytes | |||
-rw-r--r-- | install/ui/details.js | 53 | ||||
-rw-r--r-- | install/ui/dialog.js | 6 | ||||
-rw-r--r-- | install/ui/entitle.js | 8 | ||||
-rw-r--r-- | install/ui/hbac.js | 4 | ||||
-rw-r--r-- | install/ui/host.js | 9 | ||||
-rw-r--r-- | install/ui/ipa.css | 216 | ||||
-rw-r--r-- | install/ui/jsl.conf | 2 | ||||
-rw-r--r-- | install/ui/policy.js | 9 | ||||
-rw-r--r-- | install/ui/search.js | 11 | ||||
-rw-r--r-- | install/ui/serverconfig.js | 5 | ||||
-rw-r--r-- | install/ui/service.js | 7 | ||||
-rw-r--r-- | install/ui/test/aci_tests.js | 2 | ||||
-rw-r--r-- | install/ui/test/details_tests.js | 14 | ||||
-rw-r--r-- | install/ui/test/widget_tests.js | 11 | ||||
-rw-r--r-- | install/ui/user.js | 12 | ||||
-rw-r--r-- | install/ui/widget.js | 340 |
18 files changed, 453 insertions, 297 deletions
diff --git a/install/ui/aci.js b/install/ui/aci.js index 1a95af0e7..54050c79c 100644 --- a/install/ui/aci.js +++ b/install/ui/aci.js @@ -50,7 +50,8 @@ IPA.entity_factories.permission = function() { }]}). standard_association_facets(). adder_dialog({ - height: '400', + width: 500, + height: 400, fields:[ 'cn', { @@ -165,12 +166,16 @@ IPA.entity_factories.delegation = function() { fields:[ 'aciname', { - factory:IPA.entity_select_widget, - name: 'group', entity: 'group' + factory: IPA.entity_select_widget, + name: 'group', + other_entity: 'group', + other_field: 'cn' }, { - factory:IPA.entity_select_widget, - name: 'memberof', entity: 'group', + factory: IPA.entity_select_widget, + name: 'memberof', + other_entity: 'group', + other_field: 'cn', join: true }, { @@ -183,13 +188,19 @@ IPA.entity_factories.delegation = function() { fields:[ 'aciname', { - factory:IPA.entity_select_widget, - name: 'group', entity: 'group', undo: false + factory: IPA.entity_select_widget, + name: 'group', + other_entity: 'group', + other_field: 'cn', + undo: false }, { - factory:IPA.entity_select_widget, - name: 'memberof', entity: 'group', - join: true, undo: false + factory: IPA.entity_select_widget, + name: 'memberof', + other_entity: 'group', + other_field: 'cn', + join: true, + undo: false }, { factory:IPA.attributes_widget, @@ -402,8 +413,12 @@ IPA.target_section = function(spec) { cols: 30, rows: 1, undo: that.undo }); - that.group_select = IPA.entity_select_widget( - {name: 'targetgroup', entity:'group', 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({ name: 'attrs', undo: that.undo}); @@ -506,7 +521,7 @@ IPA.target_section = function(spec) { that.group_select.create(span); }, load: function(record){ - that.group_select.entity_select.val(record.targetgroup); + that.group_select.list.val(record.targetgroup); }, save: function(record){ record.targetgroup = that.group_select.save()[0]; diff --git a/install/ui/combobox_open.png b/install/ui/combobox_open.png Binary files differnew file mode 100755 index 000000000..18dedc67a --- /dev/null +++ b/install/ui/combobox_open.png diff --git a/install/ui/details.js b/install/ui/details.js index b31305c69..82804b538 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -26,8 +26,8 @@ /* REQUIRES: ipa.js */ -IPA.expanded_icon = 'ui-icon-expanded'; -IPA.collapsed_icon = 'ui-icon-collapsed'; +IPA.expanded_icon = 'expanded-icon'; +IPA.collapsed_icon = 'collapsed-icon'; IPA.details_section = function(spec) { @@ -111,8 +111,11 @@ IPA.details_section = function(spec) { for (var i=0; i<fields.length; i++) { var field = fields[i]; - var span = $('<span/>', { 'name': field.name }).appendTo(container); - field.create(span); + var field_container = $('<div/>', { + name: field.name, + 'class': 'details-field' + }).appendTo(container); + field.create(field_container); } }; @@ -126,8 +129,8 @@ IPA.details_section = function(spec) { for (var i=0; i<fields.length; i++) { var field = fields[i]; - var span = $('span[name='+field.name+']', this.container).first(); - field.setup(span); + var field_container = $('.details-field[name='+field.name+']', this.container).first(); + field.setup(field_container); } }; @@ -245,12 +248,13 @@ IPA.details_list_section = function(spec) { title: label }).appendTo(dl); - var dd = $('<dd/>', { - 'class': 'first' - }).appendTo(dl); + var dd = $('<dd/>').appendTo(dl); - var span = $('<span/>', { 'name': field.name }).appendTo(dd); - field.create(span); + var field_container = $('<div/>', { + name: field.name, + 'class': 'details-field' + }).appendTo(dd); + field.create(field_container); } }; @@ -437,7 +441,7 @@ IPA.details_facet = function(spec) { var icon = $('<span/>', { name: 'icon', - 'class': 'ui-icon section-expand '+IPA.expanded_icon + 'class': 'icon section-expand '+IPA.expanded_icon }).appendTo(header); header.append(' '); @@ -680,23 +684,26 @@ IPA.button = function(spec) { id: spec.id, name: spec.name, href: spec.href || '#' + (spec.name || 'button'), - html: spec.label, title: spec.title || spec.label, - 'class': 'ui-state-default ui-corner-all', - style: spec.style + 'class': 'ui-state-default ui-corner-all input_link', + style: spec.style, + click: spec.click, + blur: spec.blur }); - if (spec.click) { - button.click(spec.click); - } - if (spec['class']) button.addClass(spec['class']); - button.addClass('input_link'); if (spec.icon) { - button.prepend('<span class="ui-icon '+spec.icon+'" ></span> '); - } else { - button.addClass('button-without-icon'); + $('<span/>', { + 'class': 'icon '+spec.icon + }).appendTo(button); + } + + if (spec.label) { + $('<span/>', { + 'class': 'button-label', + html: spec.label + }).appendTo(button); } return button; diff --git a/install/ui/dialog.js b/install/ui/dialog.js index 607684297..9d22da7f1 100644 --- a/install/ui/dialog.js +++ b/install/ui/dialog.js @@ -35,7 +35,7 @@ IPA.dialog = function(spec) { that.template = spec.template; that._entity_name = spec.entity_name; - that.width = spec.width || '400px'; + that.width = spec.width || 400; that.height = spec.height; that.buttons = {}; @@ -375,7 +375,8 @@ IPA.adder_dialog = function (spec) { var that = IPA.dialog(spec); - that.width = spec.width || '600px'; + that.width = spec.width || 600; + that.height = spec.height || 360; that.columns = $.ordered_map(); @@ -534,7 +535,6 @@ IPA.adder_dialog = function (spec) { that.find_button = IPA.button({ name: 'find', 'label': button.val(), - 'icon': 'ui-icon-search', 'click': function() { that.search(); } }); button.replaceWith(that.find_button); diff --git a/install/ui/entitle.js b/install/ui/entitle.js index 4775af4bf..b3b09e562 100644 --- a/install/ui/entitle.js +++ b/install/ui/entitle.js @@ -337,7 +337,7 @@ IPA.entitle.details_facet = function(spec) { that.register_online_button = IPA.action_button({ name: 'register', label: IPA.messages.objects.entitle.register, - icon: 'ui-icon-plus', + icon: 'add-icon', click: function() { var dialog = that.entity.get_dialog('online_registration'); dialog.open(that.container); @@ -350,7 +350,7 @@ IPA.entitle.details_facet = function(spec) { that.register_offline_button = IPA.action_button({ name: 'import', label: IPA.messages.objects.entitle.import, - icon: 'ui-icon-plus', + icon: 'add-icon', click: function() { var dialog = that.entity.get_dialog('offline_registration'); dialog.open(that.container); @@ -426,7 +426,7 @@ IPA.entitle.search_facet = function(spec) { that.consume_button = IPA.action_button({ name: 'consume', label: IPA.messages.objects.entitle.consume, - icon: 'ui-icon-plus', + icon: 'add-icon', click: function() { var dialog = that.entity.get_dialog('consume'); dialog.open(that.container); @@ -439,7 +439,7 @@ IPA.entitle.search_facet = function(spec) { that.import_button = IPA.action_button({ name: 'import', label: IPA.messages.objects.entitle.import_button, - icon: 'ui-icon-plus', + icon: 'add-icon', click: function() { var dialog = that.entity.get_dialog('import'); dialog.open(that.container); diff --git a/install/ui/hbac.js b/install/ui/hbac.js index 87f8a36dc..d7c0b9462 100644 --- a/install/ui/hbac.js +++ b/install/ui/hbac.js @@ -787,7 +787,7 @@ IPA.hbacrule_accesstime_widget = function(spec) { button.replaceWith(IPA.button({ name: 'remove', 'label': button.val(), - 'icon': 'ui-icon-trash', + 'icon': 'remove-icon', 'click': function() { that.remove(that.container); } })); @@ -795,7 +795,7 @@ IPA.hbacrule_accesstime_widget = function(spec) { button.replaceWith(IPA.button({ name: 'add', 'label': button.val(), - 'icon': 'ui-icon-plus', + 'icon': 'add-icon', 'click': function() { that.add(that.container); } })); diff --git a/install/ui/host.js b/install/ui/host.js index 704783eec..e9adcd4f7 100644 --- a/install/ui/host.js +++ b/install/ui/host.js @@ -102,13 +102,14 @@ IPA.entity_factories.host = function () { }). standard_association_facets(). adder_dialog({ - width:500, + width: 400, + height: 250, fields:[ { - factory:IPA.entity_select_widget, + factory: IPA.entity_select_widget, name: 'fqdn', - field_name:'idnsname', - entity: 'dnszone', + other_entity: 'dnszone', + other_field: 'idnsname', label: IPA.messages.objects.service.host, editable: true, undo: false diff --git a/install/ui/ipa.css b/install/ui/ipa.css index a36315478..a733b56f2 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -121,11 +121,10 @@ body { } .ui-widget { - font-size: 1em; + font-size: 11px; } .input_link { - padding: .4em 1em .4em 0em; text-decoration: none; position: relative; cursor: pointer; @@ -136,54 +135,56 @@ body { color:black; } -.input_link span.ui-icon { - -moz-border-radius: 0.3em; - -webkit-border-radius: 0.3em; - border: 1px solid #B8B8B8; +.input_link_label { + +} + +.icon { + display: inline-block; + height: 16px; + width: 16px; vertical-align: middle; } -.input_link span.search-icon { - background: url(search-icon.png); - border: none; - margin: -1px 0 0 !important; - float: right; - position: relative; +.combobox-icon { + background: url(combobox_open.png); } -.input_link span.add-icon { +.expanded-icon { + background: url(arrow_expanded.png); +} + +.collapsed-icon { + background: url(arrow_collapsed.png); +} + +.search-icon { + background: url(search-icon.png) no-repeat; +} + +.add-icon { background: url(add-icon.png); - border: none; margin: -4px 0 0 1px; } -.input_link span.remove-icon { +.remove-icon { background: url(remove-icon.png); - border: none; margin: -4px 0 0 1px; } -.input_link span.update-icon { +.update-icon { background: url(update-icon.png); - border: none; margin: -4px 0 0 1px; } -.input_link span.reset-icon { +.reset-icon { background: url(reset-icon.png); - border: none; - margin: -4px 0 0 1px; -} - -.input_link span.enroll-icon { - background: url(enroll-icon.png); - border: none; margin: -4px 0 0 1px; } .ipa-icon { - font-size: 0.7em; - padding-right: 0.3em; + font-size: 0.7em; + padding-right: 0.3em; } /* ---- Header ---- */ @@ -557,7 +558,7 @@ div.tabs { .facet-controls a { font-size: 1.3em !important; - padding: 0 6px 0 0; + margin: 0 6px 0 0; } /* ---- Facet Content ---- */ @@ -605,11 +606,23 @@ div.tabs { border-radius: 15px !important; border: 1px solid #9f9e9e; background: url("search-bg.png"); - height: 18px; - padding-left: 8px; + height: 20px; + line-height: 20px; + padding: 0 8px 0; margin: 5px 0 5px; } +.search-filter input { + width: 193px; + border: none; + background: transparent; + height: 18px; +} + +.search-filter a { + padding: 3px; +} + .search-controls { -moz-border-radius: .7em .7em 0 0; -webkit-border-radius: .7em .7em 0 0; @@ -632,7 +645,7 @@ div.tabs { } .search-table thead tr th { - padding-left: 0.5em; + padding: 0 0.5em; background-color:#f6f6f6; color:#333333; text-align: left; @@ -640,6 +653,10 @@ div.tabs { height: 25px; } +.search-table thead tr th .action-button { + margin: 0 0 0 0.5em; +} + .search-table tbody td { padding-left: 0.5em; } @@ -793,26 +810,12 @@ dl.entryattrs dt { dl.entryattrs dd { float: left; - padding-bottom: 0.8em; - margin-left: 0; -} - -dl.entryattrs dd.first { + margin-bottom: 1em; margin-left: 0; margin-top: 0.5em; font-weight: bold; } -dl.entryattrs dd.other { - clear: both; - margin-left: 10.7em; -} - -dl.entryattrs input { - margin-right: 0.5em; - margin-bottom: 1em; -} - dl.entryattrs input.otp { min-width: 15em; width: 15em; @@ -883,14 +886,6 @@ dl.aci-target input { width: 46em; } -#memberof-entity-select { - margin-right: 1em; -} - -#group-entity-select { - margin-right: 1em; -} - span.attrhint { font-size: 8pt; left: 5em; @@ -904,32 +899,6 @@ span.attrhint { padding:0; } -/* - the positions for these are in the large icon image, - and need to be specified in pixels. -*/ -.ui-icon { - /* background-image: url("ui-icons_222222_256x240.png"); */ - background-color: #e2e2e2; - display: inline-block; -} - -.ui-icon-expanded { - background: url(arrow_expanded.png); -} - -.ui-icon-collapsed { - background: url(arrow_collapsed.png); -} - -.ui-icon-plus { - background-position: -16px -129px; -} - -.ui-icon-trash { - background-position: -176px -97px; -} - .ui-widget-content { } @@ -976,14 +945,16 @@ a { text-align: left; } -//.ui-dialog .ui-dialog-content { +/* +.ui-dialog .ui-dialog-content { min-height: 26em !important; -}// +} +*/ .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Liberation Sans", Arial, sans-serif; - font-size: 1.3em; + font-size: 11px; margin-right: .1em; } @@ -998,20 +969,6 @@ a { padding: 0.4em 1em; } -span.ui-icon-search { - background-color: transparent !important; - border: medium none !important; - color: #FFFFFF !important; - margin-left: 0 !important; -} - -a[name=find] { - margin: 6px; - padding: 3px 3px 2px; - position: absolute; - right: 0; -} - [title=">>"] { margin-top: 1em !important; } @@ -1036,6 +993,10 @@ span.main-separator{ font-size: 0.9em; } +.action-button .button-label { + padding: 0 0.2em; +} + a.action-button-disabled { color: gray; cursor: default; @@ -1055,9 +1016,7 @@ a.action-button-disabled { } .aci-attribute-table th.aci-attribute-column{ - float: left; width: 20.5em; - padding: 0.8em 0.5em; } .entity-views{ @@ -1211,3 +1170,60 @@ table.scrollable tbody { width: 23em; height: 4em; } + +/* ---- Widgets ---- */ + +.text-widget input { + width: 250px; +} + +.multivalued-text-widget [name=value] { + margin-bottom: 1em; +} + +.multivalued-text-widget input { + width: 250px; +} + +.combobox-widget-input { + display: inline-block; + position: relative; +} + +.combobox-widget-input input { + width: 250px; +} + +.combobox-widget-input .combobox-icon { + display: inline-block; + position: absolute; + top: 0; + bottom: 0; + right: 0; + margin-top: -2px; + margin-right: 4px; +} + +.combobox-widget-list { + visibility: hidden; + border: 1px solid #A0A0A0; + background: #EEEEEE; + padding: 5px; + position: absolute; + left: 0; + right: 0; + z-index: 1010; /* need to be above dialog box */ +} + +.combobox-widget-list input { + width: 238px; +} + +.combobox-widget-list .search-icon { + position: absolute; + top: 0; + bottom: 0; + right: 0; + margin-top: -2px; + margin-right: 3px; +} diff --git a/install/ui/jsl.conf b/install/ui/jsl.conf index 06fdb6004..09db97120 100644 --- a/install/ui/jsl.conf +++ b/install/ui/jsl.conf @@ -113,7 +113,7 @@ # # Common uses for webpages might be: +define window -#+define document ++define document +define alert +define $ +define JSON diff --git a/install/ui/policy.js b/install/ui/policy.js index 46582f468..dd4efa025 100644 --- a/install/ui/policy.js +++ b/install/ui/policy.js @@ -46,12 +46,15 @@ IPA.entity_factories.pwpolicy = function() { adder_dialog({ fields:[ { - factory:IPA.entity_select_widget, + factory: IPA.entity_select_widget, name: 'cn', - entity: 'group', + other_entity: 'group', + other_field: 'cn', undo: false }, - 'cospriority'] + 'cospriority'], + width: 400, + height: 250 }). build(); }; diff --git a/install/ui/search.js b/install/ui/search.js index 29c52c879..1b07908b8 100644 --- a/install/ui/search.js +++ b/install/ui/search.js @@ -96,15 +96,18 @@ IPA.search_facet = function(spec) { that.facet_create_header(container); - var span = $('<span/>', { + var span = $('<div/>', { 'class': 'right-aligned-facet-controls' }).appendTo(that.controls); + var filter_container = $('<div/>', { + 'class': 'search-filter' + }).appendTo(span); + that.filter = $('<input/>', { type: 'text', - 'class': 'search-filter', name: 'filter' - }).appendTo(span); + }).appendTo(filter_container); that.filter.keypress(function(e) { /* if the key pressed is the enter key */ @@ -120,7 +123,7 @@ IPA.search_facet = function(spec) { that.find(); return false; } - }).appendTo(span); + }).appendTo(filter_container); span.append(IPA.create_network_spinner()); diff --git a/install/ui/serverconfig.js b/install/ui/serverconfig.js index 9779dccae..d595e6cc6 100644 --- a/install/ui/serverconfig.js +++ b/install/ui/serverconfig.js @@ -49,9 +49,10 @@ IPA.entity_factories.config = function(){ 'ipausersearchfields', 'ipadefaultemaildomain', { - factory:IPA.entity_select_widget, + factory: IPA.entity_select_widget, name: 'ipadefaultprimarygroup', - entity: 'group' + other_entity: 'group', + other_field: 'cn' }, 'ipahomesrootdir', 'ipamaxusernamelength', diff --git a/install/ui/service.js b/install/ui/service.js index 618269c8f..6abd84f31 100644 --- a/install/ui/service.js +++ b/install/ui/service.js @@ -72,7 +72,8 @@ IPA.entity_factories.service = function() { standard_association_facets(). adder_dialog({ factory: IPA.service_add_dialog, - width: '450px' + width: 450, + height: 300 }). build(); }; @@ -121,8 +122,8 @@ IPA.service_add_dialog = function(spec) { })). field(IPA.entity_select_widget({ name: 'host', - field_name: 'fqdn', - entity: 'host', + other_entity: 'host', + other_field: 'fqdn', label: IPA.messages.objects.service.host, undo: false })). diff --git a/install/ui/test/aci_tests.js b/install/ui/test/aci_tests.js index d51f1ea6d..604a48b3a 100644 --- a/install/ui/test/aci_tests.js +++ b/install/ui/test/aci_tests.js @@ -134,7 +134,7 @@ test("Testing aci grouptarget.", function() { var selected = $(target_section.type_select+":selected"); same(selected.val(), 'targetgroup' , 'group control selected'); - ok ($('#targetgroup-entity-select option').length > 2, + ok ($('option', selected.group_select).length > 2, 'group select populated'); }); diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js index 1b19f4b3e..28e2029de 100644 --- a/install/ui/test/details_tests.js +++ b/install/ui/test/details_tests.js @@ -98,14 +98,14 @@ test("Testing IPA.details_section.create().", function() { 'Checking field '+field.name+'\'s label' ); - var span = $('span[name='+field.name+']', dl); + var field_container = $('.details-field[name='+field.name+']', dl); ok( - span.length, - 'Checking span tag for field '+field.name + field_container.length, + 'Checking container tag for field '+field.name ); - var dd = $('dd', span); + var dd = $('dd', field_container); ok( dd.length == 0, @@ -316,9 +316,9 @@ test("Testing IPA.details_section_setup again()",function(){ '3 dd' ); - var span = $('span[name="cn"]', dd[0]); + var field_container = $('.details-field[name="cn"]', dd[0]); same( - span.length, 1, - '1 span' + field_container.length, 1, + '1 field container' ); }); diff --git a/install/ui/test/widget_tests.js b/install/ui/test/widget_tests.js index 1abac1ca0..c3ae8bea1 100644 --- a/install/ui/test/widget_tests.js +++ b/install/ui/test/widget_tests.js @@ -265,10 +265,15 @@ test("IPA.select_widget" ,function(){ test("IPA.entity_select_widget" ,function(){ + var widget = IPA.entity_select_widget({ - name: 'uid', entity:'user',field_name:'uid'}); + name: 'uid', + other_entity: 'user', + other_field: 'uid' + }); + base_widget_test(widget,'user','test_value'); - ok( $('#uid-entity-select option').length > 1,"options populatedfrom AJAX"); + ok( $('option', widget.container).length > 1,"options populated from AJAX"); mock_record = {'uid':'kfrog'}; widget.load(mock_record); same(widget.values[0],'kfrog','select set from values'); @@ -278,7 +283,7 @@ test("IPA.entity_select_widget" ,function(){ test("IPA.entity_link_widget" ,function(){ var widget = IPA.entity_link_widget({ name: 'gidnumber', - other_entity:'group', + other_entity:'group' }); base_widget_test(widget,'user','test_value'); diff --git a/install/ui/user.js b/install/ui/user.js index 07fe7fbd4..5d104bfc6 100644 --- a/install/ui/user.js +++ b/install/ui/user.js @@ -96,7 +96,9 @@ IPA.entity_factories.user = function() { ['ou', { factory:IPA.entity_select_widget, - name: 'manager', entity: 'user', field_name: 'uid' + name: 'manager', + other_entity: 'user', + other_field: 'uid' } ] }, @@ -325,9 +327,7 @@ IPA.user_password_widget = function(spec) { html: IPA.messages.objects.user.new_password }).appendTo(dl); - var dd = $('<dd/>', { - 'class': 'first' - }).appendTo(dl); + var dd = $('<dd/>').appendTo(dl); dialog.password1 = $('<input/>', { type: 'password' @@ -337,9 +337,7 @@ IPA.user_password_widget = function(spec) { html: IPA.messages.objects.user.repeat_password }).appendTo(dl); - dd = $('<dd/>', { - 'class': 'first' - }).appendTo(dl); + dd = $('<dd/>').appendTo(dl); dialog.password2 = $('<input/>', { type: 'password' diff --git a/install/ui/widget.js b/install/ui/widget.js index 90ebaba1f..f5ed03652 100644 --- a/install/ui/widget.js +++ b/install/ui/widget.js @@ -227,6 +227,7 @@ IPA.widget = function(spec) { }; that.create = function(container) { + container.addClass('widget'); that.container = container; }; @@ -395,6 +396,10 @@ IPA.text_widget = function(spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('text-widget'); + $('<label/>', { name: that.name, style: 'display: none;' @@ -535,6 +540,10 @@ IPA.multivalued_text_widget = function(spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('multivalued-text-widget'); + var div = $('<div/>', { name: 'value' }).appendTo(container); @@ -766,6 +775,10 @@ IPA.checkbox_widget = function (spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('checkbox-widget'); + $('<input/>', { type: 'checkbox', name: that.name, @@ -833,6 +846,10 @@ IPA.checkboxes_widget = function (spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('checkboxes-widget'); + var vertical = that.direction === 'vertical'; for (var i=0; i<that.options.length; i++) { @@ -920,6 +937,10 @@ IPA.radio_widget = function(spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('radio-widget'); + for (var i=0; i<that.options.length; i++) { var option = that.options[i]; @@ -996,6 +1017,10 @@ IPA.select_widget = function(spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('select-widget'); + var select = $('<select/>', { name: that.name }).appendTo(container); @@ -1074,6 +1099,10 @@ IPA.textarea_widget = function (spec) { that.create = function(container) { + that.widget_create(container); + + container.addClass('textarea-widget'); + $('<textarea/>', { name: that.name, rows: that.rows, @@ -1252,6 +1281,8 @@ IPA.table_widget = function (spec) { that.widget_create(container); + container.addClass('table-widget'); + that.table = $('<table/>', { 'class': 'search-table' }).appendTo(container); @@ -1602,149 +1633,227 @@ IPA.table_widget = function (spec) { return that; }; -IPA.entity_select_widget = function(spec) { +IPA.combobox_widget = function(spec) { - var that = IPA.widget(spec); - var entity = spec.entity || 'group'; - var field_name = spec.field_name || 'cn'; - var editable = spec.editable || false; + spec = spec || {}; - function populate_select(value) { - function find_success(result) { - $('option', that.entity_select).remove(); + var that = IPA.widget(spec); - // add default empty value - $('<option/>', { - text: '', - value: '' - }). - appendTo(that.entity_select); - - var entities = result.result.result; - for (var i =0; i < result.result.count; i +=1){ - var entity = entities[i]; - var field_array = entity[field_name]; - var field_value = field_array[0]; - var option = - $('<option/>',{ - text:field_value, - value:field_value - }). - appendTo(that.entity_select); - if (value === field_value){ - option.attr('selected','selected'); - } - } - that.set_dirty(that.test_dirty()); - } - function find_error(err){ - } - IPA.command({ - entity: entity, - method: 'find', - args:[that.entity_filter.val()], - options:{}, - on_success:find_success, - on_error:find_error - }).execute(); - } + that.editable = spec.editable; + that.searchable = spec.searchable; + that.list_size = spec.list_size || 5; that.create = function(container) { - if (editable){ - that.edit_box = $('<input />',{ - type: 'text', - title: that.tooltip, - name: that.name, - keyup:function(){ - that.validate(); - } - }); - - $('<div style:"display=block;" />'). - append(that.edit_box). - appendTo(container); - } + that.widget_create(container); - that.create_error_link(container); + container.addClass('combobox-widget'); - that.entity_select = $('<select/>', { - id: that.name + '-entity-select', - change: function(){ - that.validate(); - if (editable){ - that.edit_box.val( - $('option:selected', that.entity_select).val()); - IPA.select_range(that.edit_box,0,0); - } - that.set_dirty(that.test_dirty()); + $(document).keyup(function(e) { + if (e.which == 27) { // Escape + that.close(); } + }); + + that.input_container = $('<div/>', { + 'class': 'combobox-widget-input' }).appendTo(container); - that.entity_filter = $('<input/>', { - size:10, + that.text = $('<label/>', { + name: that.name, + style: 'display: none;' + }).appendTo(that.input_container); + + that.input = $('<input/>', { type: 'text', - id: 'entity_filter', - style: 'display: none;', - keyup: function(){ - populate_select(current_value()); + name: that.name, + title: that.tooltip, + readonly: !that.editable, + keyup: function() { + that.validate(); + }, + click: function() { + if (that.editable) return false; + if (that.is_open()) { + that.close(); + } else { + that.open(); + } + return false; } - }).appendTo(container); + }).appendTo(that.input_container); - $('<a/>', { - href: '', - text: 'add ' +entity + ' filter: ', + that.open_button = IPA.action_button({ + name: 'open', + icon: 'combobox-icon', click: function() { - that.entity_filter.css('display','inline'); - $(this).css('display','none'); + if (that.is_open()) { + that.close(); + } else { + that.open(); + } return false; } - }).appendTo(container); + }).appendTo(that.input_container); + + that.list_container = $('<div/>', { + 'class': 'combobox-widget-list' + }).appendTo(that.input_container); + + var div = $('<div/>', { + style: 'position: relative; width: 100%;' + }).appendTo(that.list_container); + + if (that.searchable) { + that.filter = $('<input/>', { + type: 'text', + name: 'filter', + keypress: function(e) { + if (e.which == 13) { // Enter + that.search(); + } + } + }).appendTo(div); + + that.search_button = IPA.action_button({ + name: 'search', + icon: 'search-icon', + click: function() { + that.search(); + return false; + } + }).appendTo(div); + + div.append('<br/>'); + } + + that.list = $('<select/>', { + name: 'list', + size: that.list_size, + style: 'width: 100%', + click: function(){ + that.close(); + var value = $('option:selected', that.list).val(); + that.input.val(value); + IPA.select_range(that.input, 0, 0); + + that.validate(); + that.set_dirty(that.test_dirty()); + } + }).appendTo(div); if (that.undo) { + container.append(' '); that.create_undo(container); + + var undo = that.get_undo(); + undo.click(function() { + that.reset(); + }); } - var undo = that.get_undo(); - undo.click(function() { - that.reset(); - }); - populate_select(); + that.create_error_link(container); + + that.search(); }; - that.reset = function() { - that.entity_filter.val(that.values[0]); - populate_select(that.values[0]); - if (editable){ - that.edit_box.val(that.values[0]); - } - that.validate(); - that.set_dirty(false); + that.open = function() { + that.list_container.css('visibility', 'visible'); }; - that.load = function(record) { - var value = record[that.name]; - if (value instanceof Array) { - that.values = value; - } else { - that.values = value ? [value] : ['']; - } - that.reset(); + that.close = function() { + that.list_container.css('visibility', 'hidden'); }; - function current_value(){ - var value; - if (editable){ - value = that.edit_box.val(); - }else{ - value = $('option:selected', that.entity_select).val(); + that.is_open = function() { + return that.list_container.css('visibility') == 'visible'; + }; + + that.search = function() { + }; + + that.update = function() { + that.close(); + if (that.writable) { + that.text.css('display', 'none'); + that.input.css('display', 'inline'); + that.input.val(that.values[0]); + that.open_button.css('display', 'inline'); + } else { + that.text.css('display', 'inline'); + that.text.html(that.values[0]); + that.input.css('display', 'none'); + that.open_button.css('display', 'none'); + that.input.val(that.values[0]); } - return value; - } + if (that.searchable) { + that.filter.empty(); + that.search(); + } + }; that.save = function() { - var value = current_value(); - return [value]; + var value = that.input.val(); + return value === '' ? [] : [value]; + }; + + that.create_option = function(text, value) { + return $('<option/>', { + text: text, + value: value + }).appendTo(that.list); + }; + + that.remove_options = function() { + that.list.empty(); + }; + + return that; +}; + +IPA.entity_select_widget = function(spec) { + + spec = spec || {}; + spec.searchable = spec.searchable === undefined ? true : spec.searchable; + + var that = IPA.combobox_widget(spec); + + that.other_entity = spec.other_entity; + that.other_field = spec.other_field; + + that.search = function() { + + var filter = that.filter.val(); + + var command = IPA.command({ + entity: that.other_entity, + method: 'find', + args: [filter] + }); + + command.on_success = function(data, text_status, xhr) { + + that.remove_options(); + + that.create_option(); + + var entries = data.result.result; + for (var i=0; i<data.result.count; i++) { + var entry = entries[i]; + var values = entry[that.other_field]; + var value = values[0]; + + var option = that.create_option(value, value); + + if (filter === value) { + option.attr('selected', 'selected'); + } + } + + that.set_dirty(that.test_dirty()); + }; + + command.execute(); }; return that; @@ -1759,9 +1868,8 @@ IPA.entity_link_widget = function(spec) { } that.other_pkeys = spec.other_pkeys || other_pkeys; - that.super_create = that.create; that.create = function(container) { - that.super_create(container); + that.widget_create(container); that.link = $('<a/>', { href: 'jslink', @@ -1780,10 +1888,8 @@ IPA.entity_link_widget = function(spec) { appendTo(container); }; - that.super_load = that.load; - that.load = function (record){ - that.super_load(record); + that.widget_load(record); if (that.values || that.values.length > 0){ that.nonlink.html(that.values[0]); that.link.html(that.values[0]); |