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

New column header popup menu button.

Browse Source 
Reorganized column header menus.
Styled page size controls.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@487 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-04-16 22:39:30 +00:00
parent 9e73a4e68c
commit f1e05194e4
5 changed files with 118 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/graphics/menu-dropdown.psd
View File

Binary file not shown.

BIN
src/main/webapp/images/menu-dropdown.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 528 B

159
src/main/webapp/scripts/views/data-table-column-header-ui.js
View File

@ -13,10 +13,10 @@ DataTableColumnHeaderUI.prototype._render = function() {
var html = $( var html = $(
'<table class="column-header-layout">' + '<table class="column-header-layout">' +
'<tr>' + '<tr>' +
'<td bind="nameContainer"></td>' +
'<td width="1%">' + '<td width="1%">' +
'<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' + '<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' +
'</td>' + '</td>' +
'<td bind="nameContainer"></td>' +
'</tr>' + '</tr>' +
'</table>' + '</table>' +
'<div style="display:none;" bind="reconStatsContainer"></div>' '<div style="display:none;" bind="reconStatsContainer"></div>'
@ -59,8 +59,7 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
self = this; self = this;
MenuSystem.createAndShowStandardMenu([ MenuSystem.createAndShowStandardMenu([
{ {
label: "Filter", label: "Facet",
tooltip: "Filter rows by this column's cell content or characteristics",
submenu: [ submenu: [
{ {
label: "Text Facet", label: "Text Facet",
@ -75,29 +74,6 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
); );
} }
}, },
{
label: "Custom Text Facet ...",
click: function() { self._doFilterByExpressionPrompt("value", "list"); }
},
{
label: "Common Text Facets",
submenu: [
{
label: "Word Facet",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : self._column.name + " value.split(' ')",
"columnName" : self._column.name,
"expression" : "value.split(' ')"
}
);
}
}
]
},
{},
{ {
label: "Numeric Facet", label: "Numeric Facet",
click: function() { click: function() {
@ -112,13 +88,38 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
); );
} }
}, },
{
label: "Scatterplot Facet",
click: function() {
new ScatterplotDialog(self._column.name);
}
},
{},
{
label: "Custom Text Facet ...",
click: function() { self._doFilterByExpressionPrompt("value", "list"); }
},
{ {
label: "Custom Numeric Facet ...", label: "Custom Numeric Facet ...",
click: function() { self._doFilterByExpressionPrompt("value", "range"); } click: function() { self._doFilterByExpressionPrompt("value", "range"); }
}, },
{ {
label: "Common Numeric Facets", label: "Customized Facets",
submenu: [ submenu: [
{
label: "Word Facet",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : self._column.name + " value.split(' ')",
"columnName" : self._column.name,
"expression" : "value.split(' ')"
}
);
}
},
{},
{ {
label: "Numeric Log Facet", label: "Numeric Log Facet",
click: function() { click: function() {
@ -189,74 +190,52 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
} }
); );
} }
},
{},
{
label: "Facet by Error",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : self._column.name + ": Error?",
"columnName" : self._column.name,
"expression" : "isError(value)"
}
);
}
},
{
label: "Facet by Blank",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : self._column.name + ": Blank?",
"columnName" : self._column.name,
"expression" : "isBlank(value)"
}
);
}
} }
] ]
},
{},
{
label: "Scatterplot Facet",
click: function() {
new ScatterplotDialog(self._column.name);
}
},
{},
{
label: "Text Search",
click: function() {
ui.browsingEngine.addFacet(
"text",
{
"name" : self._column.name,
"columnName" : self._column.name,
"mode" : "text",
"caseSensitive" : false
}
);
}
},
{
label: "Regular Expression Search",
click: function() {
ui.browsingEngine.addFacet(
"text",
{
"name" : self._column.name,
"columnName" : self._column.name,
"mode" : "regex",
"caseSensitive" : true
}
);
}
},
{},
{
label: "By Error",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : self._column.name + ": Error?",
"columnName" : self._column.name,
"expression" : "isError(value)"
}
);
}
},
{
label: "By Blank",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : self._column.name + ": Blank?",
"columnName" : self._column.name,
"expression" : "isBlank(value)"
}
);
}
} }
] ]
}, },
{
label: "Text Filter",
click: function() {
ui.browsingEngine.addFacet(
"text",
{
"name" : self._column.name,
"columnName" : self._column.name,
"mode" : "text",
"caseSensitive" : false
}
);
}
},
{}, {},
{ {
label: "Edit Cells", label: "Edit Cells",

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

@ -57,7 +57,7 @@ DataTableView.prototype._renderSummaryText = function(elmt) {
summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' + (theProject.rowModel.total) + '</span> rows'; summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' + (theProject.rowModel.total) + '</span> rows';
} else { } else {
summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' + summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' +
(theProject.rowModel.filtered) + '</span> rows (filtered from ' + (theProject.rowModel.total) + ' rows total)'; (theProject.rowModel.filtered) + '</span> matching rows (' + (theProject.rowModel.total) + ' total)';
} }
$('<span>').html(summaryText).appendTo(elmt); $('<span>').html(summaryText).appendTo(elmt);
}; };
@ -89,9 +89,11 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
var sizes = [ 10, 20, 25, 50 ]; var sizes = [ 10, 20, 25, 50 ];
var renderPageSize = function(index) { var renderPageSize = function(index) {
var pageSize = sizes[index]; var pageSize = sizes[index];
var a = $('<a href="javascript:{}"></a>').appendTo(pageSizeControls); var a = $('<a href="javascript:{}"></a>')
.addClass("viewPanel-pagingControls-page")
.appendTo(pageSizeControls);
if (pageSize == self._pageSize) { if (pageSize == self._pageSize) {
a.text("[" + pageSize + "]").addClass("inaction"); a.text(pageSize).addClass("inaction");
} else { } else {
a.text(pageSize).addClass("action").click(function(evt) { a.text(pageSize).addClass("action").click(function(evt) {
self._pageSize = pageSize; self._pageSize = pageSize;
@ -198,10 +200,11 @@ DataTableView.prototype._renderDataTable = function(table) {
.attr("colspan", "2") .attr("colspan", "2")
.addClass("column-header") .addClass("column-header")
.html( .html(
'<table class="column-header-layout"><tr><td>&nbsp;</td>' + '<table class="column-header-layout"><tr>' +
'<td width="1%">' + '<td width="1%">' +
'<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' + '<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' +
'</td>' + '</td>' +
'<td>&nbsp;</td>' +
'</tr></table>' '</tr></table>'
) )
).dropdownMenu.click(function() { ).dropdownMenu.click(function() {
@ -325,7 +328,27 @@ DataTableView.prototype._onClickLastPage = function(elmt, evt) {
DataTableView.prototype._createMenuForAllColumns = function(elmt) { DataTableView.prototype._createMenuForAllColumns = function(elmt) {
self = this; self = this;
MenuSystem.createAndShowStandardMenu([ MenuSystem.createAndShowStandardMenu([
{ label: "Edit", { label: "Facet",
submenu: [
{
label: "Facet by Star",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : "Starred Rows",
"columnName" : "",
"expression" : "row.starred"
},
{
"scroll" : false
}
);
}
}
]
},
{ label: "Edit Rows",
submenu: [ submenu: [
{ {
label: "Star Rows", label: "Star Rows",
@ -341,33 +364,13 @@ DataTableView.prototype._createMenuForAllColumns = function(elmt) {
}, },
{}, {},
{ {
label: "Remove Visible Rows", label: "Remove Matching Rows",
click: function() { click: function() {
Gridworks.postProcess("remove-rows", {}, null, { rowMetadataChanged: true }); Gridworks.postProcess("remove-rows", {}, null, { rowMetadataChanged: true });
} }
} }
] ]
}, },
{ label: "Filter",
submenu: [
{
label: "By Star",
click: function() {
ui.browsingEngine.addFacet(
"list",
{
"name" : "Starred Rows",
"columnName" : "",
"expression" : "row.starred"
},
{
"scroll" : false
}
);
}
}
]
},
{ label: "View", { label: "View",
submenu: [ submenu: [
{ {

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

@ -1,3 +1,19 @@
.viewPanel-summary-row-count {
font-size: 150%;
font-weight: bold;
}
a.viewPanel-pagingControls-page {
margin: 0 2px;
padding: 2px 5px;
font-weight: bold;
}
a.viewPanel-pagingControls-page.inaction {
background: #aaa;
color: #eee;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.data-table-container { .data-table-container {
border: 1px solid #ccc; border: 1px solid #ccc;
overflow: auto; overflow: auto;
@ -51,15 +67,15 @@ table.column-header-layout td {
} }
a.column-header-menu { a.column-header-menu {
display: block; display: block;
margin-left: 5px; margin-right: 5px;
width: 19px; width: 17px;
height: 19px; height: 23px;
background-image: url(../../images/menu-dropdown.png); background-image: url(../../images/menu-dropdown.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0px 0px; background-position: 0px 0px;
} }
a.column-header-menu:hover { a.column-header-menu:hover {
background-position: -19px 0px; background-position: -17px 0px;
} }
.column-header-recon-stats-bar { .column-header-recon-stats-bar {
margin-top: 5px; margin-top: 5px;
@ -80,11 +96,6 @@ a.column-header-menu:hover {
background: #6d6; background: #6d6;
} }
.viewPanel-summary-row-count {
font-size: 150%;
font-weight: bold;
}
table.viewPanel-header { table.viewPanel-header {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;