webui: adjust association adder dialog to PatternFly

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

2 files changed, 84 insertions, 184 deletions

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index a7c5ab8a9..69855d7c0 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -308,151 +308,31 @@ table.scrollable tbody {
     overflow: auto;
 }
 
-.adder-dialog {
-    position: relative;
-    height: 350px;
-}
-
-.adder-dialog-top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3em;
-    line-height: 18px;
-}
-
-.adder-dialog-top input[name=filter] {
-    width: 244px;
-}
-
-.adder-dialog-top .network-activity-indicator img,
-.adder-dialog-top button {
-    margin-top: -10px;
-}
-
-.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 table.scrollable thead {
-    display: table-header-group;
-}
-
-.adder-dialog tbody {
-    position: absolute;
-    bottom: 32px;
-    left: 0;
-    right: 0;
-    top: 31px;
-}
-
-.adder-dialog-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1.5em;
-    line-height: 1.5em;
-    padding: 0.2em 1em;
-    font-weight: 700;
-}
-
 .adder-dialog-content {
-    position: absolute;
-    top: 1.9em;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.adder-dialog-available {
-    background-color: #ffffff;
-    border: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 3em;
-}
-
-.adder-dialog-with-external .adder-dialog-available {
-    bottom: 5em;
-}
-
-.adder-dialog-selected {
-    background-color: #ffffff;
-    border: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 3em;
+    max-height: 400px;
+    overflow: auto;
 }
 
 .adder-dialog-buttons {
-    width: 60px;
     text-align: center;
-    margin: 0 auto;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 10em;
-}
-
-
-.adder-dialog-buttons .button {
-    position: relative;
-}
-
-.adder-dialog-internal {
-    background-color: #ffffff;
-    border: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 23em;
-    padding-top: 1em;
-
-}
-
-.adder-dialog-external {
-    border: none;
-    position: absolute;
-    left: 0;
-    bottom: 3em;
-    right: 3em;
-    height: 4em;
+    margin-top: 9.5px;
 }
 
-.adder-dialog-external .adder-dialog-content {
-    top: 2.1em;
+/* remove padding to enlarge the tiny width of the button column */
+.adder-dialog-buttons .row .col-sm-12 {
+    padding: 0;
 }
 
-.adder-dialog-external input {
-    width: 98%;
-}
+/* add some space for vertical layout (sm and bigger) */
+/* 768px == @screen-sm-min */
+@media (min-width: 768px) {
+    .adder-dialog-buttons {
+        margin-top: 34px;
+    }
 
-.adder-dialog-buttons > div:first-child{
-    margin-bottom: 0.5em;
+    .adder-dialog-buttons button {
+        margin-bottom: 20px;
+    }
 }
 
 /* ---- Widgets ---- */
diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index dc6eb41c9..459933336 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -670,14 +670,12 @@ IPA.adder_dialog = function(spec) {
     var init = function() {
         that.available_table = IPA.table_widget({
             entity: that.entity,
-            name: 'available',
-            scrollable: true
+            name: 'available'
         });
 
         that.selected_table = IPA.table_widget({
             entity: that.entity,
-            name: 'selected',
-            scrollable: true
+            name: 'selected'
         });
 
         if (spec.columns) {
@@ -751,22 +749,25 @@ IPA.adder_dialog = function(spec) {
             'class': 'adder-dialog'
         }).appendTo(that.container);
 
-        var top_panel = $('<div/>', {
-            'class': 'adder-dialog-top'
+        var input_group = $('<div/>', {
+            'class': 'input-group col-md-12 adder-dialog-top'
         }).appendTo(container);
 
-        $('<input/>', {
+        that.filter_field = $('<input/>', {
             type: 'text',
             name: 'filter',
+            'class': 'form-control',
             keyup: function(event) {
                 if (event.keyCode === keys.ENTER) {
                     that.search();
                     return false;
                 }
             }
-        }).appendTo(top_panel);
+        }).appendTo(input_group);
 
-        top_panel.append(' ');
+        var input_group_btn = $('<div/>', {
+            'class': 'input-group-btn'
+        }).appendTo(input_group);
 
         that.find_button = IPA.button({
             name: 'find',
@@ -775,20 +776,22 @@ IPA.adder_dialog = function(spec) {
                 that.search();
                 return false;
             }
-        }).appendTo(top_panel);
-
-        top_panel.append(IPA.create_network_spinner());
+        }).appendTo(input_group_btn);
 
+        var row = $('<div/>', { 'class': 'row adder-dialog-main'}).appendTo(container);
+        //
+        // left
+        //
         var left_panel = $('<div/>', {
-            'class': 'adder-dialog-left'
-        }).appendTo(container);
+            'class': 'adder-dialog-left col-sm-6'
+        }).appendTo(row);
 
         var available_panel = $('<div/>', {
             name: 'available',
             'class': 'adder-dialog-available'
         }).appendTo(left_panel);
 
-        $('<div/>', {
+        $('<h4/>', {
             html: text.get('@i18n:dialogs.available'),
             'class': 'adder-dialog-header'
         }).appendTo(available_panel);
@@ -799,37 +802,25 @@ IPA.adder_dialog = function(spec) {
 
         that.available_table.create(available_content);
 
-
-        var right_panel = $('<div/>', {
-            'class': 'adder-dialog-right'
-        }).appendTo(container);
-
-        var selected_panel = $('<div/>', {
-            name: 'selected',
-            'class': 'adder-dialog-selected'
-        }).appendTo(right_panel);
-
-        $('<div/>', {
-            html: text.get('@i18n:dialogs.prospective'),
-            'class': 'adder-dialog-header'
-        }).appendTo(selected_panel);
-
-        var selected_content = $('<div/>', {
-            'class': 'adder-dialog-content'
-        }).appendTo(selected_panel);
-
-        that.selected_table.create(selected_content);
-
-
+        //
+        // buttons
+        //
         var buttons_panel = $('<div/>', {
             name: 'buttons',
-            'class': 'adder-dialog-buttons'
-        }).appendTo(container);
+            'class': 'adder-dialog-buttons col-sm-1'
+        }).appendTo(row);
+
+        var btn_row = $('<div/>', {
+            'class': 'row'
+        }).appendTo(buttons_panel);
 
-        var div = $('<div/>').appendTo(buttons_panel);
+        var div = $('<div/>', {
+            'class': 'col-sm-12 col-xs-6'
+        }).appendTo(btn_row);
         IPA.button({
             name: 'add',
-            label: '>>',
+            icon: 'fa fa-chevron-right',
+            title: text.get('@i18n:buttons.add'),
             click: function() {
                 that.add();
                 that.update_buttons();
@@ -837,10 +828,13 @@ IPA.adder_dialog = function(spec) {
             }
         }).appendTo(div);
 
-        div = $('<div/>').appendTo(buttons_panel);
+        div = $('<div/>', {
+            'class': 'col-sm-12 col-xs-6'
+        }).appendTo(btn_row);
         IPA.button({
             name: 'remove',
-            label: '<<',
+            icon: 'fa fa-chevron-left',
+            title: text.get('@i18n:buttons.remove'),
             click: function() {
                 that.remove();
                 that.update_buttons();
@@ -848,28 +842,54 @@ IPA.adder_dialog = function(spec) {
             }
         }).appendTo(div);
 
-        that.filter_field = $('input[name=filter]', that.container);
+        //
+        // right
+        //
+        var right_panel = $('<div/>', {
+            'class': 'adder-dialog-right col-sm-5'
+        }).appendTo(row);
+
+        var selected_panel = $('<div/>', {
+            name: 'selected',
+            'class': 'adder-dialog-selected'
+        }).appendTo(right_panel);
+
+        $('<h4/>', {
+            html: text.get('@i18n:dialogs.prospective'),
+            'class': 'adder-dialog-header'
+        }).appendTo(selected_panel);
 
+        var selected_content = $('<div/>', {
+            'class': 'adder-dialog-content'
+        }).appendTo(selected_panel);
+
+        that.selected_table.create(selected_content);
+
+        //
+        // external
+        //
         if (that.external) {
             container.addClass('adder-dialog-with-external');
 
             var external_panel = $('<div/>', {
                 name: 'external',
-                'class': 'adder-dialog-external'
+                'class': 'adder-dialog-external row'
             }).appendTo(left_panel);
 
-            $('<div/>', {
+
+            $('<h5/>', {
                 html: text.get('@i18n:objects.sudorule.external'),
-                'class': 'adder-dialog-header'
+                'class': 'adder-dialog-header col-sm-12'
             }).appendTo(external_panel);
 
             var external_content = $('<div/>', {
-                'class': 'adder-dialog-content'
+                'class': 'adder-dialog-content col-sm-12'
             }).appendTo(external_panel);
 
             that.external_field = $('<input/>', {
                 type: 'text',
-                name: 'external'
+                name: 'external',
+                'class': 'form-control'
             }).appendTo(external_content);
         }