diff options
author | Endi S. Dewata <edewata@redhat.com> | 2011-08-02 16:48:08 -0500 |
---|---|---|
committer | Adam Young <ayoung@redhat.com> | 2011-08-02 22:56:58 -0400 |
commit | 9150187ab95f272de4e3c8bc1a1fe2acf08328f8 (patch) | |
tree | 9143c67482ae77665be7b72b52acc3362ae8371c /install | |
parent | 6412e59eedf5884456110a6597e35148925e4f46 (diff) | |
download | freeipa-9150187ab95f272de4e3c8bc1a1fe2acf08328f8.tar.gz freeipa-9150187ab95f272de4e3c8bc1a1fe2acf08328f8.tar.xz freeipa-9150187ab95f272de4e3c8bc1a1fe2acf08328f8.zip |
Resizable adder dialog box.
The tables in the adder dialog have been modified to expand
according to the size of the dialog.
This patch also fixes the problem with row height on IE.
Ticket #1542
Diffstat (limited to 'install')
-rw-r--r-- | install/ui/association.js | 2 | ||||
-rw-r--r-- | install/ui/dialog.js | 104 | ||||
-rw-r--r-- | install/ui/ipa.css | 94 |
3 files changed, 137 insertions, 63 deletions
diff --git a/install/ui/association.js b/install/ui/association.js index 5b8a311ae..3c924549f 100644 --- a/install/ui/association.js +++ b/install/ui/association.js @@ -217,7 +217,7 @@ IPA.association_adder_dialog = function (spec) { name: pkey_name, label: IPA.metadata.objects[spec.other_entity].label, primary_key: true, - width: '200px' + width: '600px' }]; } } diff --git a/install/ui/dialog.js b/install/ui/dialog.js index 848252d87..0a1d5428a 100644 --- a/install/ui/dialog.js +++ b/install/ui/dialog.js @@ -202,11 +202,13 @@ IPA.dialog = function(spec) { that.create(); that.container.dialog({ - 'title': that.title, - 'modal': true, - 'width': that.width, - 'height': that.height, - 'buttons': that.buttons, + title: that.title, + modal: true, + width: that.width, + minWidth: that.width, + height: that.height, + minHeight: that.height, + buttons: that.buttons, close: function(event, ui) { that.close(); } @@ -295,8 +297,6 @@ IPA.dialog = function(spec) { * values from the available results. */ IPA.adder_dialog = function (spec) { - var NORMAL_HEIGHT = '151px'; - var EXTERNAL_HEIGHT = '119px'; spec = spec || {}; @@ -343,16 +343,10 @@ IPA.adder_dialog = function (spec) { }; function initialize_table(){ - var table_height = NORMAL_HEIGHT; - if (that.external){ - table_height = EXTERNAL_HEIGHT; - } - that.available_table = IPA.table_widget({ entity: that.entity, name: 'available', - scrollable: true, - height: table_height + scrollable: true }); var columns = that.columns.values; @@ -361,8 +355,7 @@ IPA.adder_dialog = function (spec) { that.selected_table = IPA.table_widget({ entity: that.entity, name: 'selected', - scrollable: true, - height: NORMAL_HEIGHT + scrollable: true }); that.selected_table.set_columns(columns); @@ -377,23 +370,26 @@ IPA.adder_dialog = function (spec) { // do not call that.dialog_create(); - var search_panel = $('<div/>', { - 'class': 'adder-dialog-filter' + var container = $('<div/>', { + 'class': 'adder-dialog' }).appendTo(that.container); + var top_panel = $('<div/>', { + 'class': 'adder-dialog-top' + }).appendTo(container); + $('<input/>', { type: 'text', - name: 'filter', - style: 'width: 244px' - }).appendTo(search_panel); + name: 'filter' + }).appendTo(top_panel); - search_panel.append(' '); + top_panel.append(' '); $('<input/>', { type: 'button', name: 'find', value: IPA.messages.buttons.find - }).appendTo(search_panel); + }).appendTo(top_panel); $('<input/>', { type: 'checkbox', @@ -401,40 +397,41 @@ IPA.adder_dialog = function (spec) { id: 'hidememb', checked: 'checked', style: 'margin-left: 5px; vertical-align: middle' - }).appendTo(search_panel); + }).appendTo(top_panel); - var label = $('<label/>', { + $('<label/>', { 'for': 'hidememb', + text: IPA.messages.dialogs.hide_already_enrolled, style: 'margin-left: 3px' - }); - - label.text(IPA.messages.dialogs.hide_already_enrolled); + }).appendTo(top_panel); - label.appendTo(search_panel); + top_panel.append(IPA.create_network_spinner()); - search_panel.append(IPA.create_network_spinner()); - - var results_panel = $('<div/>', { - 'class': 'adder-dialog-results' - }).appendTo(that.container); + var left_panel = $('<div/>', { + 'class': 'adder-dialog-left' + }).appendTo(container); var available_panel = $('<div/>', { name: 'available', 'class': 'adder-dialog-available' - }).appendTo(results_panel); + }).appendTo(left_panel); $('<div/>', { html: IPA.messages.dialogs.available, - 'class': 'ui-widget-header' + 'class': 'adder-dialog-header ui-widget-header' }).appendTo(available_panel); - that.available_table.create(available_panel); + var available_content = $('<div/>', { + 'class': 'adder-dialog-content' + }).appendTo(available_panel); + + that.available_table.create(available_content); var buttons_panel = $('<div/>', { name: 'buttons', 'class': 'adder-dialog-buttons' - }).appendTo(results_panel); + }).appendTo(container); var p = $('<p/>').appendTo(buttons_panel); $('<input />', { @@ -450,17 +447,27 @@ IPA.adder_dialog = function (spec) { value: '>>' }).appendTo(p); + + var right_panel = $('<div/>', { + 'class': 'adder-dialog-right' + }).appendTo(container); + var selected_panel = $('<div/>', { name: 'selected', 'class': 'adder-dialog-selected' - }).appendTo(results_panel); + }).appendTo(right_panel); $('<div/>', { html: IPA.messages.dialogs.prospective, - 'class': 'ui-widget-header' + 'class': 'adder-dialog-header ui-widget-header' + }).appendTo(selected_panel); + + var selected_content = $('<div/>', { + 'class': 'adder-dialog-content' }).appendTo(selected_panel); - that.selected_table.create(selected_panel); + that.selected_table.create(selected_content); + that.filter_field = $('input[name=filter]', that.container); @@ -498,21 +505,26 @@ IPA.adder_dialog = function (spec) { button.replaceWith(that.add_button); if (that.external) { + container.addClass('adder-dialog-with-external'); + var external_panel = $('<div/>', { name: 'external', 'class': 'adder-dialog-external' - }).appendTo(results_panel); + }).appendTo(left_panel); $('<div/>', { html: IPA.messages.objects.sudorule.external, - 'class': 'ui-widget-header' + 'class': 'adder-dialog-header ui-widget-header' + }).appendTo(external_panel); + + var external_content = $('<div/>', { + 'class': 'adder-dialog-content' }).appendTo(external_panel); that.external_field = $('<input/>', { type: 'text', - name: 'external', - style: 'width: 244px' - }).appendTo(external_panel); + name: 'external' + }).appendTo(external_content); } diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 3239d1ef8..d2470bca4 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -1125,14 +1125,69 @@ table.scrollable tbody { overflow: auto; } -.adder-dialog-filter { - height: 2.5em; - padding-top: 0.7em; +.adder-dialog { + position: relative; + width: 100%; + height: 100%; } -.adder-dialog-results { - position: relative; - height: 20.0em; +.adder-dialog-top { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3em; + line-height: 3em; +} + +.adder-dialog-top input[name=filter] { + width: 244px; +} + +.adder-dialog-left { + position: absolute; + top: 3.5em; + left: 0; + right: 50%; + bottom: 0; +} + +.adder-dialog-right { + position: absolute; + top: 3.5em; + left: 50%; + right: 0; + bottom: 0; +} + +.adder-dialog .search-table { + width: 100%; + height: 100%; +} + +.adder-dialog tbody { + position: absolute; + bottom: 32px; + left: 3px; + right: 4px; + top: 31px; +} + +.adder-dialog-header { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1.5em; + line-height: 1.5em; +} + +.adder-dialog-content { + position: absolute; + top: 1.5em; + left: 0; + right: 0; + bottom: 0; } .adder-dialog-available { @@ -1142,8 +1197,11 @@ table.scrollable tbody { top: 0; left: 0; bottom: 0; - width: 23em; - padding-top: 1em; + right: 3em; +} + +.adder-dialog-with-external .adder-dialog-available { + bottom: 4em; } .adder-dialog-selected { @@ -1153,16 +1211,12 @@ table.scrollable tbody { top: 0; right: 0; bottom: 0; - width: 23em; - padding-top: 1em; + left: 3em; } .adder-dialog-buttons { - position: absolute; - top: 7.5em; - left: 23em; - right: 23em; - bottom: 0; + padding-top: 10em; + width: 100%; text-align: center; } @@ -1183,10 +1237,18 @@ table.scrollable tbody { position: absolute; left: 0; bottom: 0; - width: 23em; + right: 3em; height: 4em; } +.adder-dialog-external .adder-dialog-content { + top: 1.9em; +} + +.adder-dialog-external input { + width: 98%; +} + /* ---- Widgets ---- */ .text-widget input { |