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

Changed history panel's design to mimic Adobe Photoshop's history

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@1605 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-10-18 19:47:36 +00:00
parent a28b6fe21e
commit 83e94d240c
4 changed files with 40 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main/webapp/modules/core/scripts/project/history-entry.html
View File

@ -1 +1 @@
<a class="history-entry" href="javascript:{}"><span class="history-entry-index" bind="index"></span></a> <a class="history-entry"><span class="history-entry-index" bind="index"></span></a>

10
main/webapp/modules/core/scripts/project/history-panel.html
View File

@ -12,18 +12,10 @@
</div> </div>
<div class="history-panel-body" bind="bodyDiv"> <div class="history-panel-body" bind="bodyDiv">
<div class="history-past" bind="pastDiv"> <div class="history-past" bind="pastDiv">
<div class="history-panel-message" bind="createProjectDiv">
<span class="history-entry-index">0.</span>
Create Project
</div>
<div class="history-panel-message" bind="noUndoDiv" style="display:none;">No change to undo</div>
<div class="history-highlight" bind="pastHighlightDiv"></div> <div class="history-highlight" bind="pastHighlightDiv"></div>
</div> </div>
<div class="history-now" bind="nowDiv"></div>
<div class="history-now" bind="nowDiv">done upto here</div>
<div class="history-future" bind="futureDiv"> <div class="history-future" bind="futureDiv">
<div class="history-panel-message" bind="noRedoDiv" style="display:none;">No change to redo</div>
<div class="history-highlight" bind="futureHighlightDiv"></div> <div class="history-highlight" bind="futureHighlightDiv"></div>
</div> </div>
</div>' </div>'

62
main/webapp/modules/core/scripts/project/history-panel.js
View File

@ -44,47 +44,55 @@ HistoryPanel.prototype._render = function() {
var renderEntry = function(container, index, entry, lastDoneID, past) { var renderEntry = function(container, index, entry, lastDoneID, past) {
var a = $(DOM.loadHTML("core", "scripts/project/history-entry.html")).appendTo(container); var a = $(DOM.loadHTML("core", "scripts/project/history-entry.html")).appendTo(container);
a.attr("title", past ? "Undo to here" : "Redo to here") if (lastDoneID >= 0) {
.click(function(evt) { a.attr("href", "javascript:{}")
return self._onClickHistoryEntry(evt, entry, lastDoneID); .click(function(evt) {
}) return self._onClickHistoryEntry(evt, entry, lastDoneID);
.mouseover(function() { })
if (past) { .mouseover(function() {
elmts.pastHighlightDiv.show().height(elmts.pastDiv.height() - this.offsetTop); if (past) {
} else { elmts.pastHighlightDiv.show().height(elmts.pastDiv.height() - this.offsetTop - this.offsetHeight);
elmts.futureHighlightDiv.show().height(this.offsetTop + this.offsetHeight); } else {
} elmts.futureHighlightDiv.show().height(this.offsetTop + this.offsetHeight);
}) }
.mouseout(function() { })
if (past) { .mouseout(function() {
elmts.pastHighlightDiv.hide(); if (past) {
} else { elmts.pastHighlightDiv.hide();
elmts.futureHighlightDiv.hide(); } else {
} elmts.futureHighlightDiv.hide();
}); }
});
}
a[0].appendChild(document.createTextNode(entry.description)); a[0].appendChild(document.createTextNode(entry.description));
a[0].firstChild.appendChild(document.createTextNode((index + 1) + ".")); a[0].firstChild.appendChild(document.createTextNode(index + "."));
return a; return a;
}; };
if (this._data.past.length > 0 || this._data.future.length > 0) { if (this._data.past.length > 0 || this._data.future.length > 0) {
if (!this._data.past.length) { if (!this._data.past.length) {
elmts.noUndoDiv.show(); renderEntry(elmts.nowDiv, 0, {
description: "Create project"
}, 0, true);
} else { } else {
for (var i = 0; i < this._data.past.length; i++) { renderEntry(elmts.pastDiv, 0, {
description: "Create project"
}, 0, true);
for (var i = 0; i < this._data.past.length - 1; i++) {
var entry = this._data.past[i]; var entry = this._data.past[i];
renderEntry(elmts.pastDiv, i, entry, i === 0 ? 0 : this._data.past[i - 1].id, true); renderEntry(elmts.pastDiv, i + 1, entry, entry.id, true);
} }
renderEntry(elmts.nowDiv, this._data.past.length, this._data.past[this._data.past.length - 1], -1);
} }
if (!this._data.future.length) { if (this._data.future.length) {
elmts.noRedoDiv.show();
} else {
for (var i = 0; i < this._data.future.length; i++) { for (var i = 0; i < this._data.future.length; i++) {
var entry = this._data.future[i]; var entry = this._data.future[i];
renderEntry(elmts.futureDiv, this._data.past.length + i, entry, entry.id, false); renderEntry(elmts.futureDiv, this._data.past.length + i + 1, entry, entry.id, false);
} }
} }

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

@ -102,14 +102,7 @@
background: @history_done_background; background: @history_done_background;
} }
.history-now { .history-now {
padding: 3px 0;
background: @history_now_background; background: @history_now_background;
color: white;
font-size: 80%;
text-transform: uppercase;
text-align: center;
font-variant: small-caps;
font-weight: bold;
} }
.history-future { .history-future {
position: relative; position: relative;
@ -149,16 +142,11 @@ a.history-entry {
color: black; color: black;
border-top: 1px dotted #ddd; border-top: 1px dotted #ddd;
} }
.history-future a.history-entry { .history-future a.history-entry, .history-future a.history-entry-index {
color: @near_black; color: @light_grey;
} }
.history-past a.history-entry:hover{ .history-past a.history-entry:hover, .history-future a.history-entry:hover {
padding-top: @history_entry_vpadding - 2px;
border-top: 2px solid @history_now_background;
}
.history-future a.history-entry:hover{
padding-bottom: @history_entry_vpadding - 2px;
border-bottom: 2px solid @history_now_background; border-bottom: 2px solid @history_now_background;
} }