From 76115a4edd547a79a0fa9386f39ce8ce33e8c3a4 Mon Sep 17 00:00:00 2001 From: David Huynh Date: Wed, 6 Oct 2010 19:15:29 +0000 Subject: [PATCH] Added summary widget to show the row or record counts. Moved browsing mode toggles from browsing panel to view panel. git-svn-id: http://google-refine.googlecode.com/svn/trunk@1435 7d457c2a-affb-35e4-300a-418c747d4874 --- .../webapp/modules/core/MOD-INF/controller.js | 2 + main/webapp/modules/core/scripts/project.js | 1 + .../core/scripts/project/browsing-engine.js | 30 +++++------- .../core/scripts/project/summary-widget.js | 21 +++++++++ .../views/data-table/data-table-view.js | 46 ++++++++++--------- .../modules/core/styles/project/browsing.less | 12 ----- .../core/styles/project/summary-widget.less | 9 ++++ .../core/styles/views/data-table-view.less | 14 ++++-- 8 files changed, 80 insertions(+), 55 deletions(-) create mode 100644 main/webapp/modules/core/scripts/project/summary-widget.js create mode 100644 main/webapp/modules/core/styles/project/summary-widget.less diff --git a/main/webapp/modules/core/MOD-INF/controller.js b/main/webapp/modules/core/MOD-INF/controller.js index 6a0b9ed56..e5a5f6419 100644 --- a/main/webapp/modules/core/MOD-INF/controller.js +++ b/main/webapp/modules/core/MOD-INF/controller.js @@ -206,6 +206,7 @@ function init() { "scripts/widgets/slider-widget.js", "scripts/project/extension-bar.js", + "scripts/project/summary-widget.js", "scripts/project/exporters.js", "scripts/project/browsing-engine.js", "scripts/project/scripting.js", @@ -262,6 +263,7 @@ function init() { "styles/project/browsing.less", "styles/project/process.less", "styles/project/extension-bar.less", + "styles/project/summary-widget.less", "styles/widgets/history.less", "styles/widgets/histogram-widget.less", diff --git a/main/webapp/modules/core/scripts/project.js b/main/webapp/modules/core/scripts/project.js index 2d1e9d426..6b1df5ed2 100644 --- a/main/webapp/modules/core/scripts/project.js +++ b/main/webapp/modules/core/scripts/project.js @@ -89,6 +89,7 @@ function initializeUI(uiState) { resize(); resizeTabs(); + ui.summaryWidget = new SummaryWidget(ui.summaryBar); ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []); ui.processWidget = new ProcessWidget(ui.processPanel); ui.historyWidget = new HistoryWidget(ui.historyPanel, ui.historyTabHeader); diff --git a/main/webapp/modules/core/scripts/project/browsing-engine.js b/main/webapp/modules/core/scripts/project/browsing-engine.js index 8de1ba106..f509d02f0 100644 --- a/main/webapp/modules/core/scripts/project/browsing-engine.js +++ b/main/webapp/modules/core/scripts/project/browsing-engine.js @@ -1,7 +1,8 @@ function BrowsingEngine(div, facetConfigs) { this._div = div; - this._facets = []; + this._mode = theProject.recordModel.hasRecords ? 'record-based' : 'row-based'; + this._facets = []; this._initializeUI(); if (facetConfigs.length > 0) { @@ -40,7 +41,6 @@ BrowsingEngine.prototype.resize = function() { var height = this._div.height() - this._div.find(".browsing-panel-header").outerHeight(true) - - this._div.find(".browsing-panel-modes").outerHeight(true) - bodyPaddings; body.css("height", height + "px"); @@ -67,13 +67,6 @@ BrowsingEngine.prototype._initializeUI = function() { '

by choosing a facet or filter method from the menus at the top of each column.

' + '

Not sure how to get started? Watch these screencasts.

' + '' + - '
' + - 'Browse by ' + - '' + - '' + - '' + - '' + - '
' + '
' + '
' + ' refreshing facets ...' + @@ -101,15 +94,7 @@ BrowsingEngine.prototype._initializeUI = function() { self._updateFacetOrder(); } }); - - $("#browsing-panel-mode-" + - (theProject.recordModel.hasRecords ? 'record-based' : 'row-based')).attr("checked", "checked"); - this._elmts.modeSelectors.buttonset(); - this._elmts.modeSelectors.find("input").change(function() { - Refine.update({ engineChanged: true }); - }); - this._elmts.refreshLink.click(function() { self.update(); }); this._elmts.resetLink.click(function() { self.reset(); }); this._elmts.removeLink.click(function() { self.remove(); }); @@ -131,13 +116,20 @@ BrowsingEngine.prototype._updateFacetOrder = function() { }; BrowsingEngine.prototype.getMode = function() { - return this._elmts.modeSelectors.find("input:checked")[0].value; + return this._mode; +}; + +BrowsingEngine.prototype.setMode = function(mode) { + if (this._mode != mode) { + this._mode = mode; + Refine.update({ engineChanged: true }); + } }; BrowsingEngine.prototype.getJSON = function(keepUnrestrictedFacets, except) { var a = { facets: [], - mode: this._elmts.modeSelectors.find("input:checked")[0].value + mode: this._mode }; for (var i = 0; i < this._facets.length; i++) { var facet = this._facets[i]; diff --git a/main/webapp/modules/core/scripts/project/summary-widget.js b/main/webapp/modules/core/scripts/project/summary-widget.js new file mode 100644 index 000000000..f5886c8b4 --- /dev/null +++ b/main/webapp/modules/core/scripts/project/summary-widget.js @@ -0,0 +1,21 @@ +function SummaryWidget(div) { + this._div = div; + this._initializeUI(); +} + +SummaryWidget.prototype._initializeUI = function() { + +}; + +SummaryWidget.prototype.updateResultCount = function() { + var summaryText; + var units = theProject.rowModel.mode == "row-based" ? "rows" : "records"; + if (theProject.rowModel.filtered == theProject.rowModel.total) { + summaryText = '' + (theProject.rowModel.total) + ' ' + units + ''; + } else { + summaryText = '' + + (theProject.rowModel.filtered) + ' matching ' + units + '' + ' (' + (theProject.rowModel.total) + ' total)'; + } + + $('').html(summaryText).appendTo(this._div.empty()); +}; diff --git a/main/webapp/modules/core/scripts/views/data-table/data-table-view.js b/main/webapp/modules/core/scripts/views/data-table/data-table-view.js index 14e090bdd..a86589dca 100644 --- a/main/webapp/modules/core/scripts/views/data-table/data-table-view.js +++ b/main/webapp/modules/core/scripts/views/data-table/data-table-view.js @@ -1,7 +1,7 @@ function DataTableView(div) { this._div = div; - this._pageSize = 20; + this._pageSize = 10; this._showRecon = true; this._collapsedColumnNames = {}; this._sorting = { criteria: [] }; @@ -35,9 +35,14 @@ DataTableView.prototype.render = function() { var html = $( '' + '' + - '' + - '' + - '' + + '' + + '' + + '' + '' + '' + '
Show as ' + + '' + + '' + + '' + + '' + + '
' + @@ -45,7 +50,8 @@ DataTableView.prototype.render = function() { ); var elmts = DOM.bind(html); - this._renderSummaryText(elmts.summary); + ui.summaryWidget.updateResultCount(); + this._renderPagingControls(elmts.pageSizeControls, elmts.pagingControls); this._renderDataTable(elmts.table[0]); @@ -58,21 +64,14 @@ DataTableView.prototype.render = function() { this.resize(); elmts.dataTableContainer[0].scrollLeft = scrollLeft; -}; - -DataTableView.prototype._renderSummaryText = function(elmt) { - var summaryText; - var units = theProject.rowModel.mode == "row-based" ? "rows" : "records"; - var from = (theProject.rowModel.start + 1); - var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit); - if (theProject.rowModel.filtered == theProject.rowModel.total) { - summaryText = from + ' – ' + to + ' of ' + (theProject.rowModel.total) + ' ' + units; - } else { - summaryText = from + ' – ' + to + ' of ' + - (theProject.rowModel.filtered) + ' matching ' + units + ' (' + (theProject.rowModel.total) + ' total)'; - } - $('').html(summaryText).appendTo(elmt); + $("#viewPanel-browsingMode-" + + (theProject.recordModel.hasRecords ? 'record-based' : 'row-based')).attr("checked", "checked"); + + elmts.modeSelectors.buttonset(); + elmts.modeSelectors.find("input").change(function() { + ui.browsingEngine.setMode(this.value); + }); }; DataTableView.prototype._renderSortingControls = function(sortingControls) { @@ -91,6 +90,9 @@ DataTableView.prototype._renderSortingControls = function(sortingControls) { DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagingControls) { var self = this; + var from = (theProject.rowModel.start + 1); + var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit); + var firstPage = $('« first').appendTo(pagingControls); var previousPage = $('« previous').appendTo(pagingControls); if (theProject.rowModel.start > 0) { @@ -100,7 +102,9 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin firstPage.addClass("inaction"); previousPage.addClass("inaction"); } - $(' • ').appendTo(pagingControls); + + $('').addClass("viewPanel-pagingControls-currentPageInfo").html(" " + from + " — " + to + " ").appendTo(pagingControls); + var nextPage = $('next page »').appendTo(pagingControls); var lastPage = $('last »').appendTo(pagingControls); if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) { @@ -112,7 +116,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin } $('Show ').appendTo(pageSizeControls); - var sizes = [ 10, 20, 25, 50 ]; + var sizes = [ 5, 10, 25, 50 ]; var renderPageSize = function(index) { var pageSize = sizes[index]; var a = $('') diff --git a/main/webapp/modules/core/styles/project/browsing.less b/main/webapp/modules/core/styles/project/browsing.less index 7e32bc69f..c78ca0ca2 100644 --- a/main/webapp/modules/core/styles/project/browsing.less +++ b/main/webapp/modules/core/styles/project/browsing.less @@ -1,17 +1,5 @@ @import-less url("../theme.less"); -.browsing-panel-modes { - padding-bottom: 0.5em; - text-align: center; -} -.browsing-panel-modes .ui-button .ui-button-text { - line-height: 1.0; - text-decoration: line-through; -} -.browsing-panel-modes .ui-button.ui-state-active .ui-button-text { - text-decoration: none; -} - .browsing-panel-header { padding-bottom: 0.5em; position: relative; diff --git a/main/webapp/modules/core/styles/project/summary-widget.less b/main/webapp/modules/core/styles/project/summary-widget.less new file mode 100644 index 000000000..c1854c43d --- /dev/null +++ b/main/webapp/modules/core/styles/project/summary-widget.less @@ -0,0 +1,9 @@ +@import-less url("../theme.less"); + +#summary-bar { +} + +.summaryWidget-rowCount { + font-size: 150%; + font-weight: bold; +} \ No newline at end of file diff --git a/main/webapp/modules/core/styles/views/data-table-view.less b/main/webapp/modules/core/styles/views/data-table-view.less index a7189bd49..6a3fdad0f 100644 --- a/main/webapp/modules/core/styles/views/data-table-view.less +++ b/main/webapp/modules/core/styles/views/data-table-view.less @@ -1,9 +1,17 @@ @import-less url("../theme.less"); -.viewPanel-summary-row-count { - font-size: 150%; - font-weight: bold; +.viewPanel-browsingModes .ui-button .ui-button-text { + line-height: 1.0; + text-decoration: line-through; } +.viewPanel-browsingModes .ui-button.ui-state-active .ui-button-text { + text-decoration: none; +} + +.viewPanel-pagingControls-currentPageInfo { + font-size: 150%; +} + a.viewPanel-pagingControls-page { margin: 0 2px; padding: 2px 4px 3px 4px;