From 84bc49b3d526dbb966b9dea76b7289fa289c5552 Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Tue, 13 Apr 2010 07:08:23 +0000
Subject: [PATCH] Got the history panel to resize properly in its tab.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@463 7d457c2a-affb-35e4-300a-418c747d4874
---
 src/main/webapp/scripts/project.js            | 10 +++++++++-
 .../webapp/scripts/widgets/history-widget.js  |  9 ++++++++-
 src/main/webapp/styles/widgets/history.css    | 20 -------------------
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js
index fe951c8f4..b7594bc99 100644
--- a/src/main/webapp/scripts/project.js
+++ b/src/main/webapp/scripts/project.js
@@ -98,7 +98,7 @@ function initializeUI(uiState) {
     ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
     ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
     
-    ui.leftPanelTabs.tabs();
+    ui.leftPanelTabs.tabs({ selected: 0 });
     resize();
     resizeTabs();
     
@@ -107,6 +107,14 @@ function initializeUI(uiState) {
     ui.historyWidget = new HistoryWidget(ui.historyPanel, ui.historyTabHeader);
     ui.dataTableView = new DataTableView(ui.viewPanel);
     
+    ui.leftPanelTabs.bind('tabsshow', function(event, tabs) {
+        if (tabs.index === 0) {
+            ui.browsingEngine.resize();
+        } else if (tabs.index === 1) {
+            ui.historyWidget.resize();
+        }
+    });
+    
     $(window).bind("resize", resizeAll);
 }
 
diff --git a/src/main/webapp/scripts/widgets/history-widget.js b/src/main/webapp/scripts/widgets/history-widget.js
index d67f4b513..3aa29310c 100644
--- a/src/main/webapp/scripts/widgets/history-widget.js
+++ b/src/main/webapp/scripts/widgets/history-widget.js
@@ -5,6 +5,10 @@ function HistoryWidget(div, tabHeader) {
 }
 
 HistoryWidget.prototype.resize = function() {
+    var body = this._div.find(".history-panel-body");
+    var footer = this._div.find(".history-panel-footer");
+    console.log(this._div.height());
+    body.css("height", (this._div.height() - footer.innerHeight(true)) + "px");
 };
 
 HistoryWidget.prototype.update = function(onDone) {
@@ -36,7 +40,7 @@ HistoryWidget.prototype._render = function() {
                 '<div class="history-now" bind="nowDiv">done upto here</div>' +
                 '<div class="history-future" bind="futureDiv"></div>' +
             '</div>' +
-            '<div class="history-panel-footer">' +
+            '<div class="history-panel-footer" bind="footerDiv">' +
                 '<a href="javascript:{}" bind="extractLink">extract</a> &bull; ' +
                 '<a href="javascript:{}" bind="applyLink">apply</a>' +
             '</div>'
@@ -72,6 +76,9 @@ HistoryWidget.prototype._render = function() {
     
     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;
 };
 
diff --git a/src/main/webapp/styles/widgets/history.css b/src/main/webapp/styles/widgets/history.css
index 77549e373..7986c441f 100644
--- a/src/main/webapp/styles/widgets/history.css
+++ b/src/main/webapp/styles/widgets/history.css
@@ -1,17 +1,7 @@
 .history-panel-body {
     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;
@@ -65,20 +55,10 @@ a.history-entry:hover {
 }
 
 .history-panel-footer {
-    margin: 0;
     padding: 3px;
-    background: #b8b8b8;
-    color: #fff;
-    font-size: 90%;
-    border: 1px solid #888;
     text-align: center;
-    -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;
     text-decoration: none;
 }