Polished history widget. Now there's a link to roll the widget up.

Made sure busy dialog also has rounded corners on Chrome. git-svn-id: http://google-refine.googlecode.com/svn/trunk@346 7d457c2a-affb-35e4-300a-418c747d4874
2010-03-23 19:30:50 +00:00 · 2010-03-23 19:30:50 +00:00 · cbfa77dcaa
commit cbfa77dcaa
parent 5c97177efd
4 changed files with 105 additions and 62 deletions
--- a/src/main/webapp/scripts/project/history-widget.js
+++ b/src/main/webapp/scripts/project/history-widget.js
@ -24,14 +24,67 @@ HistoryWidget.prototype.update = function(onDone) {
 HistoryWidget.prototype._render = function() {
    var self = this;
    
-    this._div.empty();
-    this._div.unbind();
+    var collapsedMessage = 
+        (this._data.past.length == 0 ? 
+            "" : 
+            (this._data.past.length == 1 ? "1 change - " : (this._data.past.length + " changes - "))
+        ) + 'hover to see';
    
-    $('<h3>Undo/Redo History</h3>').appendTo(this._div);
+    this._div
+        .empty()
+        .unbind()
+        .html(
+            '<h3>Undo/Redo History</h3>' +
+            '<div class="history-panel-body-collapsed" bind="bodyCollapsedDiv">' +
+                collapsedMessage +
+            '</div>' +
+            '<div class="history-panel-body" bind="bodyDiv">' +
+                '<div class="history-past" bind="pastDiv"></div>' +
+                '<div class="history-now" bind="nowDiv">done upto here</div>' +
+                '<div class="history-future" bind="futureDiv"></div>' +
+            '</div>' +
+            '<div class="history-panel-body-controls" bind="bodyControlsDiv"><a href="javascript:{}" bind="rollUpLink">roll up</a></div>' +
+            '<div class="history-panel-footer">' +
+                '<a href="javascript:{}" bind="extractLink">extract</a> &bull; ' +
+                '<a href="javascript:{}" bind="applyLink">apply</a>' +
+            '</div>'
+        );
    
-    var bodyDiv = $('<div></div>').addClass("history-panel-body").appendTo(this._div);
-    bodyDiv.mouseenter(function(evt) {
-        bodyDiv.addClass("history-panel-body-expanded");
+    var elmts = DOM.bind(this._div);
+    
+    var renderEntry = function(container, entry, lastDoneID, title) {
+        var a = $('<a href="javascript:{}"></a>').appendTo(container);
+        a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
+            return self._onClickHistoryEntry(evt, entry, lastDoneID);
+        });
+        return a;
+    };
+    
+    if (this._data.past.length == 0) {
+        elmts.pastDiv.html('<div class="history-panel-message">No change to undo</div>');
+    } else {
+        for (var i = 0; i < this._data.past.length; i++) {
+            var entry = this._data.past[i];
+            renderEntry(elmts.pastDiv, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
+        }
+    }
+    
+    if (this._data.future.length == 0) {
+        elmts.futureDiv.html('<div class="history-panel-message">No change to redo</div>');
+    } else {
+        for (var i = 0; i < this._data.future.length; i++) {
+            var entry = this._data.future[i];
+            renderEntry(elmts.futureDiv, entry, entry.id, "Redo to here");
+        }
+    }
+    
+    elmts.extractLink.click(function() { self._extractOperations(); });
+    elmts.applyLink.click(function() { self._showApplyOperationsDialog(); });
+    
+    elmts.bodyCollapsedDiv.mouseenter(function(evt) {
+        elmts.bodyCollapsedDiv.hide();
+        elmts.bodyDiv.show();
+        elmts.bodyControlsDiv.show();
    });
    
    this._div.mouseenter(function(evt) {
@ -42,55 +95,23 @@ HistoryWidget.prototype._render = function() {
    }).mouseleave(function(evt) {
        self._timerID = window.setTimeout(function() {
            self._timerID = null;
-            bodyDiv.removeClass("history-panel-body-expanded");
-            autoscroll();
+            elmts.bodyCollapsedDiv.show();
+            elmts.bodyDiv.hide();
+            elmts.bodyControlsDiv.hide();
        }, 1000);
    });
    
-    var renderEntry = function(container, entry, lastDoneID, title) {
-        var a = $('<a href="javascript:{}"></a>').appendTo(container);
-        a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
-            return self._onClickHistoryEntry(evt, entry, lastDoneID);
-        });
-        return a;
-    };
-    
-    var divPast = $('<div></div>').addClass("history-past").appendTo(bodyDiv);
-    if (this._data.past.length == 0) {
-        $('<div></div>').addClass("history-panel-message").text("No change to undo").appendTo(divPast);
-    } else {
-        for (var i = 0; i < this._data.past.length; i++) {
-            var entry = this._data.past[i];
-            renderEntry(divPast, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
+    elmts.rollUpLink.click(function(evt) {
+        if (self._timerID != null) {
+            window.clearTimeout(self._timerID);
+            self._timerID = null;
        }
-    }
-    
-    var divNow = $('<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 to here");
-        }
-    }
-    
-    var autoscroll = function() {
-        bodyDiv[0].scrollTop = divNow[0].offsetTop + divNow[0].offsetHeight - bodyDiv[0].offsetHeight;
-    };
-    autoscroll();
-    
-    
-    var footerDiv = $('<div></div>').addClass("history-panel-footer").appendTo(this._div);
-    $('<a href="javascript:{}"></a>').text("extract").appendTo(footerDiv).click(function() {
-        self._extractOperations();
-    });
-    $('<span> &bull; </span>').appendTo(footerDiv);
-    $('<a href="javascript:{}"></a>').text("apply").appendTo(footerDiv).click(function() {
-        self._showApplyOperationsDialog();
+        elmts.bodyCollapsedDiv.show();
+        elmts.bodyDiv.hide();
+        elmts.bodyControlsDiv.hide();
    });
+    
+    elmts.bodyDiv[0].scrollTop = elmts.nowDiv[0].offsetTop + elmts.nowDiv[0].offsetHeight - elmts.bodyDiv[0].offsetHeight;
 };

 HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {
--- a/src/main/webapp/scripts/util/dialog.js
+++ b/src/main/webapp/scripts/util/dialog.js
@ -57,7 +57,7 @@ DialogSystem.createDialog = function() {

 DialogSystem.showBusy = function(message) {
    var frame = DialogSystem.createDialog();
-    frame.width("300px").css("-moz-border-radius", "25px");
+    frame.addClass("dialog-busy-frame");
    
    var body = $('<div>').addClass("dialog-busy-body").appendTo(frame);
    $('<img>').attr("src", "images/large-spinner.gif").appendTo(body);
--- a/src/main/webapp/styles/project/history.css
+++ b/src/main/webapp/styles/project/history.css
@ -2,8 +2,7 @@
    position: absolute;
    top: -1px;
    right: 20px;
-    width: 250px;
-    background: #fff;
+    width: 300px;
    z-index: 10;
 }
 .history-panel h3 {
@ -16,16 +15,32 @@
    text-align: center;
    border: 1px solid #666;
 }
-.history-panel-body {
-    height: 60px;
-    overflow: hidden;
+
+.history-panel-body-collapsed {
    border-left: 1px solid #888;
    border-right: 1px solid #888;
+    background: #eee;
+    padding: 0.5em;
+    text-align: center;
 }
-.history-panel-body.history-panel-body-expanded {
-    height: 300px;
+.history-panel-body {
+    display: none;
+    border-left: 1px solid #888;
+    border-right: 1px solid #888;
+    background: #fff;
+    height: 400px;
    overflow: auto;
 }
+.history-panel-body-controls {
+    font-size: 80%;
+    padding: 0.5em;
+    text-align: center;
+    background: #eee;
+    border-left: 1px solid #888;
+    border-right: 1px solid #888;
+    display: none;
+}
+
 .history-panel-message {
    text-align: center;
    color: #aaa;
@ -46,6 +61,7 @@
 }
 .history-future {
    padding-top: 3px;
+    padding-bottom: 3px;
 }
 a.history-entry {
    display: block;
@ -84,10 +100,10 @@ a.history-entry:hover {
    font-size: 90%;
    border: 1px solid #888;
    text-align: center;
-    -moz-border-radius-bottomleft: 6px;
-    -webkit-border-bottom-left-radius: 6px;
-    -moz-border-radius-bottomright: 6px;
-    -webkit-border-bottom-right-radius: 6px;    
+    -moz-border-radius-bottomleft: 10px;
+    -webkit-border-bottom-left-radius: 10px;
+    -moz-border-radius-bottomright: 10px;
+    -webkit-border-bottom-right-radius: 10px;    
 }
 .history-panel-footer a {
    color: white;
--- a/src/main/webapp/styles/util/dialog.css
+++ b/src/main/webapp/styles/util/dialog.css
@ -49,6 +49,12 @@
    margin-left: 5px;
 }

+.dialog-busy-frame {
+    width: 300px;
+    border: none;
+    -moz-border-radiust: 25px;
+    -webkit-border-radius: 25px;
+}
 .dialog-busy-body {
    margin: 1em;
    text-align: center;