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 class="history-panel-body" bind="bodyDiv">
<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>
<div class="history-now" bind="nowDiv">done upto here</div>
<div class="history-now" bind="nowDiv"></div>
<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>
</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 a = $(DOM.loadHTML("core", "scripts/project/history-entry.html")).appendTo(container);
a.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();
}
});
if (lastDoneID >= 0) {
a.attr("href", "javascript:{}")
.click(function(evt) {
return self._onClickHistoryEntry(evt, entry, lastDoneID);
})
.mouseover(function() {
if (past) {
elmts.pastHighlightDiv.show().height(elmts.pastDiv.height() - this.offsetTop - this.offsetHeight);
} else {
elmts.futureHighlightDiv.show().height(this.offsetTop + this.offsetHeight);
}
})
.mouseout(function() {
if (past) {
elmts.pastHighlightDiv.hide();
} else {
elmts.futureHighlightDiv.hide();
}
});
}
a[0].appendChild(document.createTextNode(entry.description));
a[0].firstChild.appendChild(document.createTextNode((index + 1) + "."));
a[0].firstChild.appendChild(document.createTextNode(index + "."));
return a;
};
if (this._data.past.length > 0 || this._data.future.length > 0) {
if (!this._data.past.length) {
elmts.noUndoDiv.show();
renderEntry(elmts.nowDiv, 0, {
description: "Create project"
}, 0, true);
} 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];
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) {
elmts.noRedoDiv.show();
} else {
if (this._data.future.length) {
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, 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;
}
.history-now {
padding: 3px 0;
background: @history_now_background;
color: white;
font-size: 80%;
text-transform: uppercase;
text-align: center;
font-variant: small-caps;
font-weight: bold;
}
.history-future {
position: relative;
@ -149,16 +142,11 @@ a.history-entry {
color: black;
border-top: 1px dotted #ddd;
}
.history-future a.history-entry {
color: @near_black;
.history-future a.history-entry, .history-future a.history-entry-index {
color: @light_grey;
}
.history-past 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;
.history-past a.history-entry:hover, .history-future a.history-entry:hover {
border-bottom: 2px solid @history_now_background;
}