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

ui improvements: data-table-view header

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@1540 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-14 20:24:05 +00:00
parent 42cd990e5a
commit 5ab02f5a77
3 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
main/webapp/modules/core/scripts/views/data-table/data-table-view.js
View File

@ -33,13 +33,13 @@ DataTableView.prototype.render = function() {
var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0;
var html = $(
'<div id="viewPanel-header">' +
'<div bind="rowRecordControls">Show as ' +
'<span bind="modeSelectors" class="viewPanel-browsingmodes"></span>' +
'<div id="viewpanel-header">' +
'<div class="viewpanel-rowrecord" bind="rowRecordControls">Show as ' +
'<span bind="modeSelectors"></span>' +
'</div>' +
'<div bind="pageSizeControls"></div>' +
'<div bind="sortingControls" align="center"></div>' +
'<div bind="pagingControls" align="right"></div>' +
'<div class="viewpanel-pagesize" bind="pageSizeControls"></div>' +
'<div class="viewpanel-sorting" bind="sortingControls"></div>' +
'<div class="viewpanel-paging" bind="pagingControls"></div>' +
'</div>' +
'<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>'
);
@ -54,7 +54,7 @@ DataTableView.prototype.render = function() {
.appendTo(elmts.modeSelectors);
if (value == ui.browsingEngine.getMode()) {
a.addClass("inaction");
a.addClass("selected");
} else {
a.addClass("action").click(function(evt) {
ui.browsingEngine.setMode(value);
@ -98,7 +98,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit);
var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls);
var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls);
var previousPage = $('<a href="javascript:{}">&lsaquo; previous</a>').appendTo(pagingControls);
if (theProject.rowModel.start > 0) {
firstPage.addClass("action").click(function(evt) { self._onClickFirstPage(this, evt); });
previousPage.addClass("action").click(function(evt) { self._onClickPreviousPage(this, evt); });
@ -107,9 +107,9 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
previousPage.addClass("inaction");
}
$('<span>').addClass("viewPanel-pagingControls-currentPageInfo").html(" " + from + " &mdash; " + to + " ").appendTo(pagingControls);
$('<span>').addClass("viewpanel-pagingcount").html(" " + from + " - " + to + " ").appendTo(pagingControls);
var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls);
var nextPage = $('<a href="javascript:{}">next &rsaquo;</a>').appendTo(pagingControls);
var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls);
if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) {
nextPage.addClass("action").click(function(evt) { self._onClickNextPage(this, evt); });
@ -127,7 +127,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
.addClass("viewPanel-pagingControls-page")
.appendTo(pageSizeControls);
if (pageSize == self._pageSize) {
a.text(pageSize).addClass("inaction");
a.text(pageSize).addClass("selected");
} else {
a.text(pageSize).addClass("action").click(function(evt) {
self._pageSize = pageSize;

38
main/webapp/modules/core/styles/common.less
View File

@ -43,6 +43,25 @@ a.secondary {
color: @link_secondary;
}
a.action, a.selected, a.inaction {
margin: 0 3px;
}
a.selected {
color: #000;
font-weight: bold;
cursor: default;
}
a.inaction {
color: #ccc;
}
a.selected:hover, a.inaction:hover {
cursor: default;
text-decoration: none;
}
a img {
border: 0;
}
@ -203,25 +222,6 @@ input.inline {
a.action,
a.quiet-link {
text-decoration: none;
color: #448;
}
a.action {
margin: 0 3px;
}
a.action:hover,
a.quiet-link:hover {
color: #88f;
}
a.inaction {
margin: 0 3px;
text-decoration: none;
color: #ccc;
}

31
main/webapp/modules/core/styles/views/data-table-view.less
View File

@ -1,26 +1,31 @@
@import-less url("../theme.less");
#viewPanel-header {
#viewpanel-header {
position: relative;
background: @chrome_secondary;
font-size: 1.3em;
padding: @padding_normal;
overflow: hidden;
text-align: right;
}
.viewPanel-pagingControls-currentPageInfo {
font-size: 150%;
.viewpanel-rowrecord, .viewpanel-pagesize, .viewpanel-sorting {
position: absolute;
top: @padding_normal;
background: @chrome_secondary;
padding: 0 10px 0 0;
}
a.viewPanel-pagingControls-page, a.viewPanel-browsingModes-mode {
margin: 0 2px;
padding: 2px 4px 3px 4px;
font-weight: bold;
.viewpanel-pagesize {
left: 180px;
}
a.viewPanel-pagingControls-page.inaction, a.viewPanel-browsingModes-mode.inaction {
background: #f8f8f8;
color: #777;
border: 1px solid #ff6a00;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
.viewpanel-sorting {
left: 350px;
}
.viewpanel-pagingcount {
font-weight: bold
}
.data-table-container {