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

Added padding to "working" popup.

Browse Source 
Use background colors to explain undo/redo better, hopefully.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1584 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-10-17 05:30:03 +00:00
parent 8e8231d8c6
commit 7f48b3a692
3 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
main/webapp/modules/core/scripts/widgets/history-widget.js
View File

@ -51,21 +51,41 @@ HistoryWidget.prototype._render = function() {
'<p><a href="http://code.google.com/p/google-refine/wiki/GettingStarted?tm=6" target="_blank"><b>Learn more &raquo;</b></a></p>' +
'</div>' +
'<div class="history-panel-body" bind="bodyDiv">' +
'<div class="history-past" bind="pastDiv"></div>' +
'<div class="history-past" bind="pastDiv"><div class="history-highlight" bind="pastHighlightDiv"></div></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 class="history-highlight" bind="futureHighlightDiv"></div></div>' +
'</div>'
);
var elmts = DOM.bind(this._div);
var renderEntry = function(container, index, entry, lastDoneID, title) {
var renderEntry = function(container, index, entry, lastDoneID, past) {
var a = $('<a href="javascript:{}"></a>').appendTo(container);
a.addClass("history-entry").text(entry.description).attr("title", title).click(function(evt) {
return self._onClickHistoryEntry(evt, entry, lastDoneID);
});
a.addClass("history-entry")
.text(entry.description)
.attr("title", past ? "Undo to here" : "Redo to here")
.click(function(evt) {
return self._onClickHistoryEntry(evt, entry, lastDoneID);
})
.mouseover(function() {
if (past) {
elmts.pastHighlightDiv.show().height(elmts.pastDiv.height() - this.offsetTop);
} else {
elmts.futureHighlightDiv.show().height(this.offsetTop + this.offsetHeight);
}
})
.mouseout(function() {
if (past) {
elmts.pastHighlightDiv.hide();
} else {
elmts.futureHighlightDiv.hide();
}
});
$('<span>').addClass("history-entry-index").text((index + 1) + ".").prependTo(a);
$('<span>')
.addClass("history-entry-index")
.text((index + 1) + ".")
.prependTo(a);
return a;
};
@ -76,7 +96,7 @@ HistoryWidget.prototype._render = function() {
} else {
for (var i = 0; i < this._data.past.length; i++) {
var entry = this._data.past[i];
renderEntry(elmts.pastDiv, i, entry, i === 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
renderEntry(elmts.pastDiv, i, entry, i === 0 ? 0 : this._data.past[i - 1].id, true);
}
}
@ -85,7 +105,7 @@ HistoryWidget.prototype._render = function() {
} else {
for (var i = 0; i < this._data.future.length; i++) {
var entry = this._data.future[i];
renderEntry(elmts.futureDiv, this._data.past.length + i, entry, entry.id, "Redo to here");
renderEntry(elmts.futureDiv, this._data.past.length + i, entry, entry.id, false);
}
}

81
main/webapp/modules/core/styles/project/sidebar.less
View File

@ -60,26 +60,32 @@
line-height: 1.3;
}
@history_done_background: white;
@history_undone_background: #f2f2ff; /* #a9e9fb; */
@history_now_background: @chrome_primary;
@history_entry_vpadding: 7px;
@history_entry_hpadding: 5px;
@history_entry_index_width: 30px;
.history-panel-body {
background: #fff;
background: @history_undone_background;
overflow: auto;
border-top: 1px solid @chrome_primary;
}
.history-panel-message {
text-align: center;
color: #aaa;
font-style: italic;
padding: @padding_loose;
}
.history-past {
padding-bottom: 3px;
position: relative;
background: @history_done_background;
}
@history_now_color: #a9e9fb;
.history-now {
padding: 3px 0;
background: @history_now_color;
background: @history_now_background;
color: white;
font-size: 80%;
text-transform: uppercase;
@ -88,49 +94,54 @@
font-weight: bold;
}
.history-future {
padding-top: 3px;
padding-bottom: 3px;
}
a.history-entry {
display: block;
position: relative;
padding: 7px 5px 7px 36px;
text-decoration: none;
color: black;
border-top: 1px dotted #ddd;
}
a.history-entry:first-child {
border-top: none;
.history-highlight {
position: absolute;
left: 0px;
width: 100%;
display: none;
}
a.history-entry:hover {
background: #ddd;
.history-past .history-highlight {
background: @history_undone_background;
bottom: 0px;
}
.history-future .history-highlight {
background: @history_done_background;
top: 0px;
}
.history-entry-index {
position: absolute;
left: 0px;
top: 0px;
width: 30px;
width: @history_entry_index_width;
text-align: right;
font-size: 80%;
padding: 2px;
color: @history_now_color;
padding: 2px 0px;
}
a.history-entry {
display: block;
position: relative;
padding: @history_entry_vpadding @history_entry_hpadding;
padding-left: @history_entry_hpadding + @history_entry_index_width;
text-decoration: none;
color: black;
border-top: 1px dotted #ddd;
}
.history-future a.history-entry {
color: @near_black;
}
.history-past a.history-entry:hover{
padding-top: 11px;
padding-bottom: 2px;
border-top: 2px solid @history_now_color;
background: url(../../images/up-arrow.png) top center no-repeat;
padding-top: @history_entry_vpadding - 2px;
border-top: 2px solid @history_now_background;
}
.history-future a.history-entry:hover{
padding-top: 2px;
padding-bottom: 11px;
border-bottom: 2px solid @history_now_color;
background: url(../../images/down-arrow.png) bottom center no-repeat;
}
.history-future a.history-entry {
color: #888;
padding-bottom: @history_entry_vpadding - 2px;
border-bottom: 2px solid @history_now_background;
}
.history-panel-controls {

3
main/webapp/modules/core/styles/util/dialog.less
View File

@ -54,7 +54,8 @@
.dialog-busy-frame {
width: 300px;
border: none;
-moz-border-radiust: 15px;
padding: @padding_loose;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.dialog-busy-body {