Removed left, right, bottom borders to sidebar tab panels to streamline them a bit.

Moved extract, apply links of history widget to the top and made them into buttons. And always show them even if there's no operation.
Minor tweaks to history entries' visual.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1571 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-10-15 18:43:17 +00:00
parent c8bb6a3475
commit f504a59eb1
3 changed files with 26 additions and 17 deletions

View File

@ -6,10 +6,10 @@ function HistoryWidget(div, tabHeader) {
HistoryWidget.prototype.resize = function() { HistoryWidget.prototype.resize = function() {
var body = this._div.find(".history-panel-body"); var body = this._div.find(".history-panel-body");
var footer = this._div.find(".history-panel-footer"); var controls = this._div.find(".history-panel-controls");
var bodyPaddings = body.outerHeight(true) - body.height(); var bodyPaddings = body.outerHeight(true) - body.height();
body.css("height", (this._div.height() - footer.outerHeight(true) - bodyPaddings) + "px"); body.css("height", (this._div.height() - controls.outerHeight(true) - bodyPaddings) + "px");
}; };
HistoryWidget.prototype.update = function(onDone) { HistoryWidget.prototype.update = function(onDone) {
@ -36,6 +36,10 @@ HistoryWidget.prototype._render = function() {
.empty() .empty()
.unbind() .unbind()
.html( .html(
'<div class="history-panel-controls" bind="controlsDiv">' +
'<a class="button" href="javascript:{}" bind="extractLink">extract...</a> ' +
'<a class="button" href="javascript:{}" bind="applyLink">apply...</a>' +
'</div>' +
'<div class="history-panel-help" bind="helpDiv">' + '<div class="history-panel-help" bind="helpDiv">' +
'<h1>Infinite undo history</h1>' + '<h1>Infinite undo history</h1>' +
'<p>Don\'t worry about making mistakes. Every change you make will be shown here, and you can undo your changes anytime.</p>' + '<p>Don\'t worry about making mistakes. Every change you make will be shown here, and you can undo your changes anytime.</p>' +
@ -45,10 +49,6 @@ HistoryWidget.prototype._render = function() {
'<div class="history-past" bind="pastDiv"></div>' + '<div class="history-past" bind="pastDiv"></div>' +
'<div class="history-now" bind="nowDiv">done upto here</div>' + '<div class="history-now" bind="nowDiv">done upto here</div>' +
'<div class="history-future" bind="futureDiv"></div>' + '<div class="history-future" bind="futureDiv"></div>' +
'</div>' +
'<div class="history-panel-footer" bind="footerDiv">' +
'<a href="javascript:{}" bind="extractLink">extract</a> &bull; ' +
'<a href="javascript:{}" bind="applyLink">apply</a>' +
'</div>' '</div>'
); );
@ -84,7 +84,6 @@ HistoryWidget.prototype._render = function() {
elmts.helpDiv.hide(); elmts.helpDiv.hide();
} else { } else {
elmts.bodyDiv.hide(); elmts.bodyDiv.hide();
elmts.footerDiv.hide();
} }
elmts.extractLink.click(function() { self._extractOperations(); }); elmts.extractLink.click(function() { self._extractOperations(); });

View File

@ -46,6 +46,12 @@
padding-top: @padding_tight; padding-top: @padding_tight;
font-size: 1.3em; font-size: 1.3em;
background: @fill_normal; background: @fill_normal;
.ui-tabs .ui-tabs-panel {
border-left: none;
border-right: none;
border-bottom: none;
}
} }
#right-panel { #right-panel {

View File

@ -73,9 +73,12 @@
.history-past { .history-past {
padding-bottom: 3px; padding-bottom: 3px;
} }
@history_now_color: #a9e9fb;
.history-now { .history-now {
padding: 3px 0; padding: 3px 0;
background: #a9e9fb; background: @history_now_color;
color: white; color: white;
font-size: 80%; font-size: 80%;
text-transform: uppercase; text-transform: uppercase;
@ -92,7 +95,7 @@ a.history-entry {
padding: 7px 5px; padding: 7px 5px;
text-decoration: none; text-decoration: none;
color: black; color: black;
border-top: 1px solid #ddd; border-top: 1px dotted #ddd;
} }
a.history-entry:first-child { a.history-entry:first-child {
border-top: none; border-top: none;
@ -103,12 +106,12 @@ a.history-entry:hover {
.history-past a.history-entry:hover{ .history-past a.history-entry:hover{
padding: 11px 5px 2px 5px; padding: 11px 5px 2px 5px;
border-top: 2px solid red; border-top: 2px solid @history_now_color;
background: url(../../images/up-arrow.png) top center no-repeat; background: url(../../images/up-arrow.png) top center no-repeat;
} }
.history-future a.history-entry:hover{ .history-future a.history-entry:hover{
padding: 2px 5px 11px 5px; padding: 2px 5px 11px 5px;
border-bottom: 2px solid red; border-bottom: 2px solid @history_now_color;
background: url(../../images/down-arrow.png) bottom center no-repeat; background: url(../../images/down-arrow.png) bottom center no-repeat;
} }
@ -116,13 +119,14 @@ a.history-entry:hover {
color: #888; color: #888;
} }
.history-panel-footer { .history-panel-controls {
padding: 6px 0px 0px 0px; padding: 6px;
text-align: center; text-align: right;
font-weight: bold; font-weight: bold;
}
.history-panel-footer a { a {
text-decoration: none; text-decoration: none;
}
} }
.extract-operation-dialog-entries { .extract-operation-dialog-entries {