From 0e15a282e85b0e3eb71fd3fce1965646aeb47a27 Mon Sep 17 00:00:00 2001 From: Petr Vobornik Date: Fri, 4 Apr 2014 12:59:24 +0200 Subject: 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 --- install/ui/src/freeipa/aci.js | 2 +- install/ui/src/freeipa/facet.js | 3 +- install/ui/src/freeipa/widget.js | 153 ++++++++++++++------------------------- 3 files changed, 58 insertions(+), 100 deletions(-) (limited to 'install/ui/src') 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 = $('', { id: id, name: that.name, - 'class': 'search-table aci-attribute-table scrollable' + 'class': 'table table-bordered table-condensed aci-attribute-table scrollable' }). append(''). append(''). 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 = $('
', { - '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').appendTo(tr); - th.css('width', column.width); - th.css('max-width', column.width); - - var label = column.label; - $('
', { - '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 = $('
').appendTo(that.table); - tr = $('').appendTo(that.tfoot); + var tr = $('').appendTo(that.tfoot); var 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 = $('', { 'class': 'pagination-control' - }).appendTo(td); - - if (that.pagination) { + }).appendTo(container); - $('', { - text: text.get('@i18n:widget.prev'), - name: 'prev_page', - click: function() { - that.prev_page(); - return false; - } - }).appendTo(that.pagination_control); + $('', { + 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(' '); - $('', { - text: text.get('@i18n:widget.next'), - name: 'next_page', - click: function() { - that.next_page(); - return false; - } - }).appendTo(that.pagination_control); + $('', { + 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 = $('', { - 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 = $('', { + 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 = $('', { - name: 'total_pages' - }).appendTo(that.pagination_control); - } + that.pagination_control.append(' / '); - that.set_enabled(that.enabled); + that.total_pages_span = $('', { + name: 'total_pages' + }).appendTo(that.pagination_control); }; /** @@ -2570,6 +2536,7 @@ IPA.table_widget = function (spec) { var td; if (that.selectable) { + 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 = $('').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); - } $('
', { 'name': column.name -- cgit