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

3 files changed, 137 insertions, 63 deletions

diff --git a/install/ui/association.js b/install/ui/association.js
index 5b8a311a..3c924549 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 848252d8..0a1d5428 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 3239d1ef..d2470bca 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 {