Updated Branches: refs/heads/ui-list-view-multiple-actions 5a6c6467c -> 7f0a01a4e
List view UI: Add multi-row selection checkboxes Adds checkboxes to list view rows which, when 1 or more items are checked, will show the action toolbar. Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/7f0a01a4 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/7f0a01a4 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/7f0a01a4 Branch: refs/heads/ui-list-view-multiple-actions Commit: 7f0a01a4efd122663d9a39cad4d24b77daaa09f7 Parents: 10c0ed5 Author: Brian Federle <[email protected]> Authored: Tue Mar 5 15:34:41 2013 -0800 Committer: Brian Federle <[email protected]> Committed: Tue Mar 5 15:34:41 2013 -0800 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 8 ++++++ ui/scripts/ui/widgets/dataTable.js | 2 + ui/scripts/ui/widgets/listView.js | 40 ++++++++++++++++++++++++++++-- 3 files changed, 47 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/7f0a01a4/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 0aebfea..81edf92 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -193,6 +193,14 @@ table tbody tr.loading td.quick-view .loading { background-position: center center; } +/** Multiple select table cell*/ +table tbody td.row-selection, +table thead th.row-selection { + width: 34px; + min-width: 34px; + max-width: 34px; +} + /** Row styling*/ table tbody tr { border-left: 1px solid #C4C5C5; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/7f0a01a4/ui/scripts/ui/widgets/dataTable.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js index 8d04149..38bcee8 100644 --- a/ui/scripts/ui/widgets/dataTable.js +++ b/ui/scripts/ui/widgets/dataTable.js @@ -236,6 +236,8 @@ toggleExpandToolbar: function() { $table.toggleClass('expanded'); + + return $table; } }; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/7f0a01a4/ui/scripts/ui/widgets/listView.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 9e16ec2..fadc4dc 100644 --- a/ui/scripts/ui/widgets/listView.js +++ b/ui/scripts/ui/widgets/listView.js @@ -667,6 +667,13 @@ ); } + // Checkbox selection + $thead.find('tr').prepend( + $('<th>') + .addClass('row-selection') + .html(' ') + ); + return $thead; }; @@ -1011,6 +1018,25 @@ $tr.data('jsonObj', dataItem); $tr.data('list-view-action-filter', options.actionFilter); + + // Add checkbox selection + $tr.prepend( + $('<td>').addClass('row-selection').append( + $('<input>').attr({ + type: 'checkbox', + name: 'list-view-action-select' + }).click(function() { + var $rowSelectionCheckbox = $(this); + + if (($rowSelectionCheckbox.is(':checked') && + $tbody.find('.row-selection input:checked').size() == 1) || + !$tbody.find('.row-selection input:checked').size()) { + $tbody.closest('.data-table').dataTable('toggleExpandToolbar'); + } + }) + ) + ); + if (actions && renderActionCol(actions)) { var allowedActions = $.map(actions, function(value, key) { return key; @@ -1049,6 +1075,7 @@ $('<span>').addClass('icon').html(' ') ) .appendTo($tr); + $quickView.mouseover( // Show quick view function() { @@ -1062,6 +1089,7 @@ var itemID = $tr.data('list-view-item-id'); var jsonObj = $tr.data('json-obj'); var $loading = $('<div>').addClass('loading-overlay').appendTo($detailsContainer); + var $rowSelection = $tr.find('td.row-selection'); if ($tr.hasClass('loading')) return; @@ -1070,7 +1098,9 @@ $('<span>').html(_l('label.quickview') + ': '), $('<span>').addClass('title').html( cloudStack.concat( - $tr.find('td:first span').html(), 30 + $rowSelection.size() ? + $tr.find('td:first').next().find('span').html() : + $tr.find('td:first span').html(), 30 ) ).attr({ title: $tr.find('td:first span').html() @@ -1660,8 +1690,12 @@ var jsonObj = $target.closest('tr').data('jsonObj'); var detailViewArgs; var detailViewPresent = ($target.closest('div.data-table tr td').size() && - $target.closest('div.data-table tr td').index() == 0 && - listViewData.detailView && !$target.closest('div.edit').size()); + ((!$target.closest('div.data-table').find('td.row-selection:first').size() && + ($target.closest('div.data-table tr td').index() == 0)) || + ($target.closest('div.data-table').find('tr td.row-selection:first').size() && + $target.closest('div.data-table tr td').index() == 1)) && + listViewData.detailView && !$target.closest('div.edit').size() && + !$target.closest('td.row-selection').size()); var uiCustom = args.uiCustom == true ? true : false; // Click on first item will trigger detail view (if present)
