Styled the history widget and hopefully made it more comprehensible.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@30 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project/history-widget.js

@@ -19,7 +19,7 @@ HistoryWidget.prototype._render = function() {
     
     this._div.empty();
     
-    $('<h3>History</h3>').appendTo(this._div);
+    $('<h3>History for Undo/Redo</h3>').appendTo(this._div);
     
     var bodyDiv = $('<div></div>').addClass("history-panel-body").appendTo(this._div);
     bodyDiv.mouseover(function() {
@@ -43,17 +43,19 @@ HistoryWidget.prototype._render = function() {
     } else {
         for (var i = 0; i < this._data.past.length; i++) {
             var entry = this._data.past[i];
-            lastPast = renderEntry(divPast, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo upto and including this change");
+            lastPast = renderEntry(divPast, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
         }
     }
     
+    $('<div></div>').text("done upto here").addClass("history-now").appendTo(bodyDiv);
+    
     var divFuture = $('<div></div>').addClass("history-future").appendTo(bodyDiv);
     if (this._data.future.length == 0) {
         $('<div></div>').addClass("history-panel-message").text("No change to redo").appendTo(divFuture);
     } else {
         for (var i = 0; i < this._data.future.length; i++) {
             var entry = this._data.future[i];
-            renderEntry(divFuture, entry, entry.id, "Redo upto and including this change");
+            renderEntry(divFuture, entry, entry.id, "Redo to here");
         }
     }
     

src/main/webapp/styles/history.css

@@ -26,27 +26,44 @@
 
 .history-past {
     padding-bottom: 3px;
-    border-bottom: 2px solid #f88;
+}
+.history-now {
+    padding: 1px;
+    background: #f88;
+    color: white;
+    font-size: 80%;
+    text-align: center;
+    font-variant: small-caps;
+    font-weight: bold;
 }
 .history-future {
     padding-top: 3px;
 }
 a.history-entry {
     display: block;
-    padding: 3px 5px;
+    padding: 7px 5px;
     text-decoration: none;
     color: black;
-    border-top: 1px solid #eee;
+    border-top: 1px solid #ddd;
 }
 a.history-entry:first-child {
     border-top: none;
 }
 a.history-entry:hover {
-    background: #eee;
-    color: #a88;
+    background: #ddd;
+}
+
+.history-past a.history-entry:hover{
+    padding: 11px 5px 2px 5px;
+    border-top: 2px solid red;
+    background: url(../images/up-arrow.png) top center no-repeat;
+}
+.history-future a.history-entry:hover{
+    padding: 2px 5px 11px 5px;
+    border-bottom: 2px solid red;
+    background: url(../images/down-arrow.png) bottom center no-repeat;
 }
 
 .history-future a.history-entry {
     color: #888;
-    font-style: italic;
 }