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

@@ -45,11 +45,14 @@ function resize() {
 }
 
 function resizeTabs() {
-    var totalHeight = ui.leftPanelTabs.height();
+    var totalHeight = ui.leftPanel.height();
-    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").innerHeight();
+    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").outerHeight(true);
-    var tabPanels = ui.leftPanelTabs.find(".ui-tabs-panel")
+    
-    var paddings = tabPanels.innerHeight(true) - tabPanels.height();
+    var visibleTabPanels = ui.leftPanelTabs.find(".ui-tabs-panel:not(.ui-tabs-hide)");
-    tabPanels.height(totalHeight - headerHeight - paddings);
+    var paddings = visibleTabPanels.innerHeight(true) - visibleTabPanels.height();
+    
+    var allTabPanels = ui.leftPanelTabs.find(".ui-tabs-panel");
+    allTabPanels.height(totalHeight - headerHeight - paddings - 1);
 }
 
 function resizeAll() {

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,6 +62,7 @@ HistoryWidget.prototype._render = function() {
         return a;
     };
     
+    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 {
@@ -74,12 +81,20 @@ HistoryWidget.prototype._render = function() {
             }
         }
         
+        elmts.helpDiv.hide();
+    } else {
+        elmts.bodyDiv.hide();
+    }
+    
     elmts.extractLink.click(function() { self._extractOperations(); });
     elmts.applyLink.click(function() { self._showApplyOperationsDialog(); });
     
     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) {

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 {

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;