webui: remove column sizing in tables, use PF styles

https://fedorahosted.org/freeipa/ticket/4136

usage of .table-striped class also fixes:
https://fedorahosted.org/freeipa/ticket/3050

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

4 files changed, 59 insertions, 101 deletions

diff --git a/install/ui/src/freeipa/aci.js b/install/ui/src/freeipa/aci.js
index e26ecd27d..91baa0c7e 100644
--- a/install/ui/src/freeipa/aci.js
+++ b/install/ui/src/freeipa/aci.js
@@ -563,7 +563,7 @@ aci.attributes_widget = function(spec) {
         that.$node = that.table = $('<table/>', {
             id: id,
             name: that.name,
-            'class': 'search-table aci-attribute-table scrollable'
+            'class': 'table table-bordered table-condensed aci-attribute-table scrollable'
         }).
             append('<thead/>').
             append('<tbody/>').
diff --git a/install/ui/src/freeipa/facet.js b/install/ui/src/freeipa/facet.js
index 5fc59ea3b..ccaf6ad28 100644
--- a/install/ui/src/freeipa/facet.js
+++ b/install/ui/src/freeipa/facet.js
@@ -1955,12 +1955,11 @@ exp.table_facet = IPA.table_facet = function(spec, no_init) {
     that.init_table = function(entity) {
 
         that.table = IPA.table_widget({
-            'class': 'content-table',
             name: that.table_name || entity.metadata.primary_key,
             label: entity.metadata.label,
             entity: entity,
             pagination: true,
-            scrollable: true,
+            scrollable: false,
             selectable: that.selectable && !that.read_only
         });
 
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 34a9660c1..2b3d3e81d 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -2372,10 +2372,10 @@ IPA.table_widget = function (spec) {
 
         that.widget_create(container);
 
-        container.addClass('table-widget');
+        container.addClass('table-widget table-responsive');
 
         that.table = $('<table/>', {
-            'class': 'search-table',
+            'class': 'content-table table table-condensed table-striped table-bordered',
             name: that.name
         }).appendTo(container);
 
@@ -2414,58 +2414,15 @@ IPA.table_widget = function (spec) {
             }
         }
         var columns = that.columns.values;
-        var column;
-
-        var columns_without_width = 0;
-        var per_column_space = 16; //cell padding(2x6px), border (2x1px), spacing (2px)
-        var available_width = that.thead.width();
-        available_width -= 2;  //first cell spacing
-
-        //subtract checkbox column
-        if(that.selectable) {
-            available_width -= IPA.checkbox_column_width;
-            available_width -= per_column_space;
-        }
-
-        //subtract width of columns with their width set
-        for (i=0; i<columns.length; i++) {
-            column = columns[i];
-            if (column.width) {
-                available_width -= parseInt(
-                    column.width.substring(0, column.width.length-2),10);
-                available_width -= per_column_space;
-            } else {
-                columns_without_width++;
-            }
-        }
-
-        //width for columns without width set
-        var new_column_width = (available_width -
-                                per_column_space * columns_without_width) /
-                                columns_without_width;
-
-
-        //set the new width, now all columns should have width set
-        for (i=0; i<columns.length; i++) {
-            column = columns[i];
-            if (!column.width) {
-                column.width = new_column_width+"px";
-            }
-        }
 
         for (i=0; i<columns.length; i++) {
-            column = columns[i];
+            var column = columns[i];
 
             th = $('<th/>').appendTo(tr);
 
-            th.css('width', column.width);
-            th.css('max-width', column.width);
-
-            var label = column.label;
-
             $('<div/>', {
-                'style': 'float: left;',
-                'html': label
+                'html': column.label,
+                'style': 'float: left;'
             }).appendTo(th);
 
             if (i == columns.length-1) {
@@ -2495,12 +2452,19 @@ IPA.table_widget = function (spec) {
             that.tbody.css('height', that.height);
         }
 
+        that.create_footer();
+
+        that.set_enabled(that.enabled);
+    };
+
+    that.create_footer = function() {
+
         that.tfoot = $('<tfoot/>').appendTo(that.table);
 
-        tr = $('<tr/>').appendTo(that.tfoot);
+        var tr = $('<tr/>').appendTo(that.tfoot);
 
         var td = $('<td/>', {
-            colspan: columns.length + (that.selectable ? 1 : 0)
+            colspan: that.columns.values.length + (that.selectable ? 1 : 0)
         }).appendTo(tr);
 
         that.create_error_link(td);
@@ -2509,55 +2473,57 @@ IPA.table_widget = function (spec) {
             'name': 'summary'
         }).appendTo(td);
 
+        if (that.pagination) {
+            that.create_pagination(td);
+        }
+    };
+
+    that.create_pagination = function(container) {
+
         that.pagination_control = $('<span/>', {
             'class': 'pagination-control'
-        }).appendTo(td);
-
-        if (that.pagination) {
+        }).appendTo(container);
 
-            $('<a/>', {
-                text: text.get('@i18n:widget.prev'),
-                name: 'prev_page',
-                click: function() {
-                    that.prev_page();
-                    return false;
-                }
-            }).appendTo(that.pagination_control);
+        $('<a/>', {
+            text: text.get('@i18n:widget.prev'),
+            name: 'prev_page',
+            click: function() {
+                that.prev_page();
+                return false;
+            }
+        }).appendTo(that.pagination_control);
 
-            that.pagination_control.append(' ');
+        that.pagination_control.append(' ');
 
-            $('<a/>', {
-                text: text.get('@i18n:widget.next'),
-                name: 'next_page',
-                click: function() {
-                    that.next_page();
-                    return false;
-                }
-            }).appendTo(that.pagination_control);
+        $('<a/>', {
+            text: text.get('@i18n:widget.next'),
+            name: 'next_page',
+            click: function() {
+                that.next_page();
+                return false;
+            }
+        }).appendTo(that.pagination_control);
 
-            that.pagination_control.append(' ');
-            that.pagination_control.append(text.get('@i18n:widget.page'));
-            that.pagination_control.append(': ');
+        that.pagination_control.append(' ');
+        that.pagination_control.append(text.get('@i18n:widget.page'));
+        that.pagination_control.append(': ');
 
-            that.current_page_input = $('<input/>', {
-                type: 'text',
-                name: 'current_page',
-                keypress: function(e) {
-                    if (e.which == 13) {
-                        var page = parseInt(that.current_page_input.val(), 10) || 1;
-                        that.set_page(page);
-                    }
+        that.current_page_input = $('<input/>', {
+            type: 'text',
+            name: 'current_page',
+            keypress: function(e) {
+                if (e.which == 13) {
+                    var page = parseInt(that.current_page_input.val(), 10) || 1;
+                    that.set_page(page);
                 }
-            }).appendTo(that.pagination_control);
-
-            that.pagination_control.append(' / ');
+            }
+        }).appendTo(that.pagination_control);
 
-            that.total_pages_span = $('<span/>', {
-                name: 'total_pages'
-            }).appendTo(that.pagination_control);
-        }
+        that.pagination_control.append(' / ');
 
-        that.set_enabled(that.enabled);
+        that.total_pages_span = $('<span/>', {
+            name: 'total_pages'
+        }).appendTo(that.pagination_control);
     };
 
     /**
@@ -2570,6 +2536,7 @@ IPA.table_widget = function (spec) {
         var td;
 
         if (that.selectable) {
+
             td = $('<td/>', {
                 'style': 'width: '+ (IPA.checkbox_column_width + 7) +'px;'
             }).appendTo(row);
@@ -2589,14 +2556,6 @@ IPA.table_widget = function (spec) {
             var column = columns[i];
 
             td = $('<td/>').appendTo(row);
-            if (column.width) {
-                width = parseInt(
-                        column.width.substring(0, column.width.length-2),10);
-                width += 7; //data cells lack right padding
-                width += 'px';
-                td.css('width', width);
-                td.css('max-width', width);
-            }
 
             $('<div/>', {
                 'name': column.name
diff --git a/ipatests/test_webui/ui_driver.py b/ipatests/test_webui/ui_driver.py
index 0516c6b6f..1345d2d32 100644
--- a/ipatests/test_webui/ui_driver.py
+++ b/ipatests/test_webui/ui_driver.py
@@ -917,7 +917,7 @@ class UI_driver(object):
         s = "table"
         if name:
             s += "[name='%s']" % name
-        s += '.search-table'
+        s += '.table'
         return s
 
     def select_record(self, pkey, parent=None, table_name=None):