New column header popup menu button.
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
parent
9e73a4e68c
commit
f1e05194e4
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 528 B |
@ -13,10 +13,10 @@ DataTableColumnHeaderUI.prototype._render = function() {
|
||||
var html = $(
|
||||
'<table class="column-header-layout">' +
|
||||
'<tr>' +
|
||||
'<td bind="nameContainer"></td>' +
|
||||
'<td width="1%">' +
|
||||
'<a class="column-header-menu" bind="dropdownMenu"> </a>' +
|
||||
'</td>' +
|
||||
'<td bind="nameContainer"></td>' +
|
||||
'</tr>' +
|
||||
'</table>' +
|
||||
'<div style="display:none;" bind="reconStatsContainer"></div>'
|
||||
@ -59,8 +59,7 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
|
||||
self = this;
|
||||
MenuSystem.createAndShowStandardMenu([
|
||||
{
|
||||
label: "Filter",
|
||||
tooltip: "Filter rows by this column's cell content or characteristics",
|
||||
label: "Facet",
|
||||
submenu: [
|
||||
{
|
||||
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",
|
||||
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 ...",
|
||||
click: function() { self._doFilterByExpressionPrompt("value", "range"); }
|
||||
},
|
||||
{
|
||||
label: "Common Numeric Facets",
|
||||
label: "Customized 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 Log Facet",
|
||||
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",
|
||||
|
||||
@ -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';
|
||||
} else {
|
||||
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);
|
||||
};
|
||||
@ -89,9 +89,11 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
|
||||
var sizes = [ 10, 20, 25, 50 ];
|
||||
var renderPageSize = function(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) {
|
||||
a.text("[" + pageSize + "]").addClass("inaction");
|
||||
a.text(pageSize).addClass("inaction");
|
||||
} else {
|
||||
a.text(pageSize).addClass("action").click(function(evt) {
|
||||
self._pageSize = pageSize;
|
||||
@ -198,10 +200,11 @@ DataTableView.prototype._renderDataTable = function(table) {
|
||||
.attr("colspan", "2")
|
||||
.addClass("column-header")
|
||||
.html(
|
||||
'<table class="column-header-layout"><tr><td> </td>' +
|
||||
'<table class="column-header-layout"><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a class="column-header-menu" bind="dropdownMenu"> </a>' +
|
||||
'</td>' +
|
||||
'<td> </td>' +
|
||||
'</tr></table>'
|
||||
)
|
||||
).dropdownMenu.click(function() {
|
||||
@ -325,7 +328,27 @@ DataTableView.prototype._onClickLastPage = function(elmt, evt) {
|
||||
DataTableView.prototype._createMenuForAllColumns = function(elmt) {
|
||||
self = this;
|
||||
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: [
|
||||
{
|
||||
label: "Star Rows",
|
||||
@ -341,33 +364,13 @@ DataTableView.prototype._createMenuForAllColumns = function(elmt) {
|
||||
},
|
||||
{},
|
||||
{
|
||||
label: "Remove Visible Rows",
|
||||
label: "Remove Matching Rows",
|
||||
click: function() {
|
||||
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",
|
||||
submenu: [
|
||||
{
|
||||
|
||||
@ -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 {
|
||||
border: 1px solid #ccc;
|
||||
overflow: auto;
|
||||
@ -51,15 +67,15 @@ table.column-header-layout td {
|
||||
}
|
||||
a.column-header-menu {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
margin-right: 5px;
|
||||
width: 17px;
|
||||
height: 23px;
|
||||
background-image: url(../../images/menu-dropdown.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
a.column-header-menu:hover {
|
||||
background-position: -19px 0px;
|
||||
background-position: -17px 0px;
|
||||
}
|
||||
.column-header-recon-stats-bar {
|
||||
margin-top: 5px;
|
||||
@ -80,11 +96,6 @@ a.column-header-menu:hover {
|
||||
background: #6d6;
|
||||
}
|
||||
|
||||
|
||||
.viewPanel-summary-row-count {
|
||||
font-size: 150%;
|
||||
font-weight: bold;
|
||||
}
|
||||
table.viewPanel-header {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user