From b7c3f99e3c4c4c0b09e1f5f7142a98e83efa970d Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Fri, 16 Apr 2010 23:38:49 +0000
Subject: [PATCH] Added help message in history panel. Better resizing for left
 panel's tabs.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@488 7d457c2a-affb-35e4-300a-418c747d4874
---
 src/main/webapp/scripts/project.js            | 13 +++---
 .../webapp/scripts/widgets/history-widget.js  | 45 ++++++++++++-------
 src/main/webapp/styles/project.css            |  3 +-
 src/main/webapp/styles/widgets/history.css    | 14 ++++++
 4 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js
index b7594bc99..02818fa76 100644
--- a/src/main/webapp/scripts/project.js
+++ b/src/main/webapp/scripts/project.js
@@ -45,11 +45,14 @@ function resize() {
 }
 
 function resizeTabs() {
-    var totalHeight = ui.leftPanelTabs.height();
-    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").innerHeight();
-    var tabPanels = ui.leftPanelTabs.find(".ui-tabs-panel")
-    var paddings = tabPanels.innerHeight(true) - tabPanels.height();
-    tabPanels.height(totalHeight - headerHeight - paddings);
+    var totalHeight = ui.leftPanel.height();
+    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").outerHeight(true);
+    
+    var visibleTabPanels = ui.leftPanelTabs.find(".ui-tabs-panel:not(.ui-tabs-hide)");
+    var paddings = visibleTabPanels.innerHeight(true) - visibleTabPanels.height();
+    
+    var allTabPanels = ui.leftPanelTabs.find(".ui-tabs-panel");
+    allTabPanels.height(totalHeight - headerHeight - paddings - 1);
 }
 
 function resizeAll() {
diff --git a/src/main/webapp/scripts/widgets/history-widget.js b/src/main/webapp/scripts/widgets/history-widget.js
index 44b6a7141..90f129a68 100644
--- a/src/main/webapp/scripts/widgets/history-widget.js
+++ b/src/main/webapp/scripts/widgets/history-widget.js
@@ -7,8 +7,9 @@ function HistoryWidget(div, tabHeader) {
 HistoryWidget.prototype.resize = function() {
     var body = this._div.find(".history-panel-body");
     var footer = this._div.find(".history-panel-footer");
+    var bodyPaddings = body.outerHeight(true) - body.height();
     
-    body.css("height", (this._div.height() - footer.innerHeight(true)) + "px");
+    body.css("height", (this._div.height() - footer.outerHeight(true) - bodyPaddings) + "px");
 };
 
 HistoryWidget.prototype.update = function(onDone) {
@@ -35,6 +36,11 @@ HistoryWidget.prototype._render = function() {
         .empty()
         .unbind()
         .html(
+            '<div class="history-panel-help" bind="helpDiv">' +
+                '<h1>Don\'t worry ...</h1>' +
+                '<p>about making mistakes. Every change you make will be shown here, and you can undo changes at any point.</p>' +
+                '<p><a href="">Learn more &raquo;</a></p>' +
+            '</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>' +
@@ -56,22 +62,28 @@ HistoryWidget.prototype._render = function() {
         return a;
     };
     
-    if (!this._data.past.length) {
-        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.past.length > 0 || this._data.future.length > 0) {
+        if (!this._data.past.length) {
+            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) {
-        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");
+        if (!this._data.future.length) {
+            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.helpDiv.hide();
+    } else {
+        elmts.bodyDiv.hide();
     }
     
     elmts.extractLink.click(function() { self._extractOperations(); });
@@ -79,7 +91,10 @@ HistoryWidget.prototype._render = function() {
     
     this.resize();
     
-    elmts.bodyDiv[0].scrollTop = elmts.nowDiv[0].offsetTop + elmts.nowDiv[0].offsetHeight - elmts.bodyDiv[0].offsetHeight;
+    elmts.bodyDiv[0].scrollTop = 
+        elmts.nowDiv[0].offsetTop + 
+        elmts.nowDiv[0].offsetHeight - 
+        elmts.bodyDiv[0].offsetHeight;
 };
 
 HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {
diff --git a/src/main/webapp/styles/project.css b/src/main/webapp/styles/project.css
index 09975e9ac..555b5e9db 100644
--- a/src/main/webapp/styles/project.css
+++ b/src/main/webapp/styles/project.css
@@ -48,7 +48,7 @@ body {
 .left-panel {
     position: fixed;
     background: white;
-    overflow: visible;
+    overflow: hidden;
     padding: 0px;
     font-size: 12px;
 }
@@ -111,6 +111,7 @@ body {
     background: #DBE8EB;
     -moz-border-radius-bottomleft: 7px;
     -webkit-border-bottom-left-radius: 7px;
+    overflow: hidden;
 }
 
 .facet-panel {
diff --git a/src/main/webapp/styles/widgets/history.css b/src/main/webapp/styles/widgets/history.css
index 7986c441f..614f92841 100644
--- a/src/main/webapp/styles/widgets/history.css
+++ b/src/main/webapp/styles/widgets/history.css
@@ -1,3 +1,17 @@
+.history-panel-help {
+    padding: 10px;
+    background: white;
+    border: 1px solid #ccc;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+}
+.history-panel-help h1 {
+    margin-top: 0px;
+    font-size: 150%;
+    font-weight: bold;
+    color: #888;
+}
+
 .history-panel-body {
     background: #fff;
     overflow: auto;