s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Re-ordered the "other" choices in numeric range facets to make better use of space.

Browse Source 
Changed main layout of whole application so that the horizontal scrollbar of the data table is visible without scrolling.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@335 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-03-22 21:48:36 +00:00
parent 1d20b33cf1
commit 19ba207d27
12 changed files with 173 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/main/webapp/scripts/facets/range-facet.js
View File

@ -196,6 +196,9 @@ RangeFacet.prototype._renderOtherChoices = function() {
var tr0 = table.insertRow(0);
var tr1 = table.insertRow(1);
/*
* Numeric
*/
var td00 = $(tr0.insertCell(0)).attr("width", "1%");
var numericCheck = $('<input type="checkbox" />').appendTo(td00).change(function() {
self._selectNumeric = !self._selectNumeric;
@ -209,21 +212,11 @@ RangeFacet.prototype._renderOtherChoices = function() {
$('<span>').text("Numeric ").addClass("facet-choice-label").appendTo(td01);
$('<span>').text(this._numericCount).addClass("facet-choice-count").appendTo(td01);
/*
* Blank
*/
var td02 = $(tr0.insertCell(2)).attr("width", "1%");
var nonNumericCheck = $('<input type="checkbox" />').appendTo(td02).change(function() {
self._selectNonNumeric = !self._selectNonNumeric;
self._updateRest();
});
if (this._selectNonNumeric) {
nonNumericCheck[0].checked = true;
}
var td03 = $(tr0.insertCell(3));
$('<span>').text("Non-numeric ").addClass("facet-choice-label").appendTo(td03);
$('<span>').text(this._nonNumericCount).addClass("facet-choice-count").appendTo(td03);
var td10 = $(tr1.insertCell(0)).attr("width", "1%");
var blankCheck = $('<input type="checkbox" />').appendTo(td10).change(function() {
var blankCheck = $('<input type="checkbox" />').appendTo(td02).change(function() {
self._selectBlank = !self._selectBlank;
self._updateRest();
});
@ -231,10 +224,29 @@ RangeFacet.prototype._renderOtherChoices = function() {
blankCheck[0].checked = true;
}
var td11 = $(tr1.insertCell(1));
$('<span>').text("Blank ").addClass("facet-choice-label").appendTo(td11);
$('<span>').text(this._blankCount).addClass("facet-choice-count").appendTo(td11);
var td03 = $(tr0.insertCell(3));
$('<span>').text("Blank ").addClass("facet-choice-label").appendTo(td03);
$('<span>').text(this._blankCount).addClass("facet-choice-count").appendTo(td03);
/*
* Non-Numeric
*/
var td10 = $(tr1.insertCell(0)).attr("width", "1%");
var nonNumericCheck = $('<input type="checkbox" />').appendTo(td10).change(function() {
self._selectNonNumeric = !self._selectNonNumeric;
self._updateRest();
});
if (this._selectNonNumeric) {
nonNumericCheck[0].checked = true;
}
var td11 = $(tr1.insertCell(1));
$('<span>').text("Non-numeric ").addClass("facet-choice-label").appendTo(td11);
$('<span>').text(this._nonNumericCount).addClass("facet-choice-count").appendTo(td11);
/*
* Error
*/
var td12 = $(tr1.insertCell(2)).attr("width", "1%");
var errorCheck = $('<input type="checkbox" />').appendTo(td12).change(function() {
self._selectError = !self._selectError;

64
src/main/webapp/scripts/project.js
View File

@ -48,28 +48,60 @@ function initializeUI(uiState) {
})
.appendTo(path);
var body = $("#body").empty();
var body = $("#body").empty().html(
'<div bind="viewPanel" class="view-panel"></div>' +
'<div bind="facetPanel" class="facet-panel"></div>' +
'<div bind="historyPanel" class="history-panel"></div>' +
'<div bind="processPanel" class="process-panel"></div>' +
'<div class="menu-bar-container" bind="menuBarContainer"><div bind="menuBarPanel" class="menu-bar"></div></div>'
);
ui = DOM.bind(body);
var table = document.createElement("table");
$(table).attr("cellspacing", 20).css("width", "100%");
body.append(table);
var tr = table.insertRow(0);
var tdLeft = tr.insertCell(0);
var tdRight = tr.insertCell(1);
tdRight.setAttribute("width", "250");
ui.viewPanel = $('<div></div>').appendTo(tdLeft);
ui.facetPanel = $('<div></div>').appendTo(tdRight);
ui.historyPanel = $('<div></div>').addClass("history-panel").appendTo(document.body);
ui.processPanel = $('<div></div>').addClass("process-panel").appendTo(document.body);
ui.menuBarPanel = $('<div></div>'); $("#header").after(ui.menuBarPanel);
ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
resize();
ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
ui.processWidget = new ProcessWidget(ui.processPanel);
ui.historyWidget = new HistoryWidget(ui.historyPanel);
ui.dataTableView = new DataTableView(ui.viewPanel);
ui.menuBar = new MenuBar(ui.menuBarPanel);
$(window).bind("resize", resizeAll);
}
function resize() {
var header = $("#header");
var footer = $("#footer");
ui.menuBarContainer.css("top", header.outerHeight() + "px");
var facetPanelWidth = 250;
var width = $(window).width();
var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
var height = footer.offset().top - top;
ui.viewPanel
.css("top", top + "px")
.css("height", height + "px")
.css("left", "0px")
.css("width", (width - facetPanelWidth) + "px");
ui.facetPanel
.css("top", top + "px")
.css("height", height + "px")
.css("left", (width - facetPanelWidth) + "px")
.css("width", facetPanelWidth + "px");
}
function resizeAll() {
resize();
ui.menuBar.resize();
ui.browsingEngine.resize();
ui.processWidget.resize();
ui.historyWidget.resize();
ui.dataTableView.resize();
}
Gridworks.reinitializeProjectData = function(f) {

3
src/main/webapp/scripts/project/browsing-engine.js
View File

@ -28,6 +28,9 @@ function BrowsingEngine(div, facetConfigs) {
}
}
BrowsingEngine.prototype.resize = function() {
};
BrowsingEngine.prototype.getFacetUIStates = function() {
var f = [];
for (var i = 0; i < this._facets.length; i++) {

3
src/main/webapp/scripts/project/history-widget.js
View File

@ -3,6 +3,9 @@ function HistoryWidget(div) {
this.update();
}
HistoryWidget.prototype.resize = function() {
};
HistoryWidget.prototype.update = function(onDone) {
var self = this;
Ajax.chainGetJSON(

3
src/main/webapp/scripts/project/menu-bar.js
View File

@ -3,6 +3,9 @@ function MenuBar(div) {
this._initializeUI();
}
MenuBar.prototype.resize = function() {
};
MenuBar.prototype._initializeUI = function() {
this._mode = "inactive";
this._menuItemRecords = [];

3
src/main/webapp/scripts/project/process-widget.js
View File

@ -9,6 +9,9 @@ function ProcessWidget(div) {
this.update({});
}
ProcessWidget.prototype.resize = function() {
};
ProcessWidget.prototype.update = function(updateOptions, onDone) {
for (var n in updateOptions) {
if (updateOptions.hasOwnProperty(n)) {

8
src/main/webapp/scripts/util/menu.js
View File

@ -51,8 +51,8 @@ MenuSystem.createMenuItem = function() {
MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
var offset = elmt.offset();
var windowWidth = $(document.body).innerWidth();
var windowHeight = $(document.body).innerHeight();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if (offset.top + elmt.outerHeight() - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
menu.css("top", (offset.top - menu.outerHeight()) + "px");
@ -69,8 +69,8 @@ MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
MenuSystem.positionMenuLeftRight = function(menu, elmt) {
var offset = elmt.offset();
var windowWidth = $(document.body).innerWidth();
var windowHeight = $(document.body).innerHeight();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if (offset.top - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
menu.css("top", (offset.top + elmt.outerHeight() - menu.outerHeight()) + "px");

80
src/main/webapp/scripts/views/data-table-view.js
View File

@ -4,18 +4,15 @@ function DataTableView(div) {
this._showRecon = true;
this._collapsedColumnNames = {};
this._initializeUI();
this._showRows(0);
}
DataTableView.prototype._initializeUI = function() {
this._div.addClass("view-panel");
DataTableView.prototype.resize = function() {
var topHeight = this._div.find(".viewPanel-summary").outerHeight(true) + this._div.find(".viewPanel-pagingControls").outerHeight(true);
var self = this;
$(window).resize(function() {
var dataTableContainer = self._div.find(".data-table-container");
dataTableContainer.hide().width(self._div.width() + "px").show();
});
this._div.find(".data-table-container")
.css("height", (this._div.innerHeight() - topHeight - 1) + "px")
.css("display", "block");
};
DataTableView.prototype.update = function(onDone) {
@ -24,18 +21,29 @@ DataTableView.prototype.update = function(onDone) {
DataTableView.prototype.render = function() {
var self = this;
var container = this._div;
var scrollLeft = 0;
var oldTableDiv = container.find(".data-table-container");
if (oldTableDiv.length > 0) {
scrollLeft = oldTableDiv[0].scrollLeft;
}
var oldTableDiv = this._div.find(".data-table-container");
var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0;
container.empty();
var html = $(
'<div bind="summaryDiv" class="viewPanel-summary"></div>' +
'<table bind="pagingControls" width="100%" class="viewPanel-pagingControls"><tr><td align="right"></td><td align="right"></td></tr></table>' +
'<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>'
);
var elmts = DOM.bind(html);
var divSummary = $('<div></div>').addClass("viewPanel-summary").appendTo(container);
this._renderSummaryText(elmts.summaryDiv);
this._renderPagingControls(elmts.pagingControls[0]);
this._renderDataTable(elmts.table[0]);
this._div.empty().append(html);
this.resize();
elmts.dataTableContainer[0].scrollLeft = scrollLeft;
};
DataTableView.prototype._renderSummaryText = function(elmt) {
var summaryText;
var from = (theProject.rowModel.start + 1);
@ -46,15 +54,14 @@ DataTableView.prototype.render = function() {
summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' +
(theProject.rowModel.filtered) + '</span> rows (filtered from ' + (theProject.rowModel.total) + ' rows total)';
}
$('<span>').html(summaryText).appendTo(divSummary);
$('<span>').html(summaryText).appendTo(elmt);
};
DataTableView.prototype._renderPagingControls = function(table) {
var self = this;
/*
* Paging controls
*/
var pagingControls = $('<table width="100%"><tr><td align="right"></td><td align="right"></td></tr></table>').addClass("viewPanel-pagingControls").appendTo(container);
var pagingControls0 = pagingControls[0].rows[0].cells[0];
var pagingControls1 = pagingControls[0].rows[0].cells[1];
var pagingControls0 = table.rows[0].cells[0];
var pagingControls1 = table.rows[0].cells[1];
var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls0);
var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls0);
@ -93,20 +100,10 @@ DataTableView.prototype.render = function() {
for (var i = 0; i < sizes.length; i++) {
renderPageSize(i);
}
/*============================================================
* Data Table
*============================================================
*/
var tableDiv = $('<div></div>')
.addClass("data-table-container")
.css("width", container.width() + "px")
.appendTo(container);
var table = document.createElement("table");
$(table)
.attr("cellspacing", "0")
.addClass("data-table");
};
DataTableView.prototype._renderDataTable = function(table) {
var self = this;
var columns = theProject.columnModel.columns;
var columnGroups = theProject.columnModel.columnGroups;
@ -288,13 +285,6 @@ DataTableView.prototype.render = function() {
}
renderRow(tr, r, row, even);
}
/*
* Finally, inject the table into the DOM
*/
$(table).appendTo(tableDiv);
tableDiv[0].scrollLeft = scrollLeft;
};
DataTableView.prototype._showRows = function(start, onDone) {

32
src/main/webapp/styles/project.css
View File

@ -1,11 +1,39 @@
#body {
padding: 20px;
padding: 0;
margin: 0;
}
#loading-message {
text-align: center;
font-size: 300%;
color: #faa;
margin: 1in;
padding: 1in;
font-style: italic;
}
#footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 1000;
background: #eee;
}
.menu-bar-container {
position: fixed;
left: 0px;
width: 100%;
}
.view-panel {
position: fixed;
background: white;
overflow: hidden;
}
.facet-panel {
position: fixed;
background: white;
overflow: auto;
}

13
src/main/webapp/styles/project/browsing.css
View File

@ -1,21 +1,18 @@
.browsing-panel {
}
.browsing-panel-indicator {
clear: both;
display: none;
margin: 1em;
margin: 0 1em;
margin-top: 50px;
text-align: center;
}
.browsing-panel-controls {
clear: both;
display: none;
margin: 1em;
margin: 0 1em;
margin-top: 50px;
text-align: center;
}
ul.facets-container {
margin: 0;
padding: 0;
padding: 0 1em;
}
li.facet-container {

3
src/main/webapp/styles/project/process.css
View File

@ -1,8 +1,9 @@
.process-panel {
position: absolute;
position: fixed;
top: -1px;
width: 100%;
text-align: center;
z-index: 1000;
}
.process-panel-inner {

12
src/main/webapp/styles/views/data-table-view.css
View File

@ -1,11 +1,12 @@
.view-panel {
}
.data-table-container {
border: 1px solid #ccc;
overflow-x: auto;
overflow: auto;
}
table.data-table {
margin: 0px;
padding: 0px;
border-collapse: collapse;
}
table.data-table > tbody > tr > td {
@ -81,6 +82,7 @@ a.column-header-menu:hover {
.viewPanel-summary {
margin: 1em 2em 0em 2em;
}
.viewPanel-summary-row-count {
font-size: 150%;
@ -89,7 +91,9 @@ a.column-header-menu:hover {
.viewPanel-pagingControls {
text-align: center;
margin: 1em 0;
}
.viewPanel-pagingControls td {
padding: 1em 2em;
}
div.data-table-cell-content {