From f504a59eb1884dc6ea12de4ad3d5ae003cdbf461 Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Fri, 15 Oct 2010 18:43:17 +0000
Subject: [PATCH] Removed left, right, bottom borders to sidebar tab panels to
 streamline them a bit. Moved extract, apply links of history widget to the
 top and made them into buttons. And always show them even if there's no
 operation. Minor tweaks to history entries' visual.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1571 7d457c2a-affb-35e4-300a-418c747d4874
---
 .../core/scripts/widgets/history-widget.js    | 13 +++++-----
 main/webapp/modules/core/styles/project.less  |  6 +++++
 .../modules/core/styles/project/sidebar.less  | 24 +++++++++++--------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/main/webapp/modules/core/scripts/widgets/history-widget.js b/main/webapp/modules/core/scripts/widgets/history-widget.js
index 42dcee371..2ccdc3ff4 100644
--- a/main/webapp/modules/core/scripts/widgets/history-widget.js
+++ b/main/webapp/modules/core/scripts/widgets/history-widget.js
@@ -6,10 +6,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");
+    var controls = this._div.find(".history-panel-controls");
     var bodyPaddings = body.outerHeight(true) - body.height();
     
-    body.css("height", (this._div.height() - footer.outerHeight(true) - bodyPaddings) + "px");
+    body.css("height", (this._div.height() - controls.outerHeight(true) - bodyPaddings) + "px");
 };
 
 HistoryWidget.prototype.update = function(onDone) {
@@ -36,6 +36,10 @@ HistoryWidget.prototype._render = function() {
         .empty()
         .unbind()
         .html(
+            '<div class="history-panel-controls" bind="controlsDiv">' +
+                '<a class="button" href="javascript:{}" bind="extractLink">extract...</a> ' +
+                '<a class="button" href="javascript:{}" bind="applyLink">apply...</a>' +
+            '</div>' +
             '<div class="history-panel-help" bind="helpDiv">' +
                 '<h1>Infinite undo history</h1>' +
                 '<p>Don\'t worry about making mistakes. Every change you make will be shown here, and you can undo your changes anytime.</p>' +
@@ -45,10 +49,6 @@ HistoryWidget.prototype._render = function() {
                 '<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-footer" bind="footerDiv">' +
-                '<a href="javascript:{}" bind="extractLink">extract</a> &bull; ' +
-                '<a href="javascript:{}" bind="applyLink">apply</a>' +
             '</div>'
         );
     
@@ -84,7 +84,6 @@ HistoryWidget.prototype._render = function() {
         elmts.helpDiv.hide();
     } else {
         elmts.bodyDiv.hide();
-        elmts.footerDiv.hide();
     }
     
     elmts.extractLink.click(function() { self._extractOperations(); });
diff --git a/main/webapp/modules/core/styles/project.less b/main/webapp/modules/core/styles/project.less
index 055b7b236..eec1c068d 100644
--- a/main/webapp/modules/core/styles/project.less
+++ b/main/webapp/modules/core/styles/project.less
@@ -46,6 +46,12 @@
   padding-top: @padding_tight;
   font-size: 1.3em;
   background: @fill_normal;
+  
+  .ui-tabs .ui-tabs-panel {
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    }
   }
 
 #right-panel {
diff --git a/main/webapp/modules/core/styles/project/sidebar.less b/main/webapp/modules/core/styles/project/sidebar.less
index 5dd7c3f8c..d900bb141 100644
--- a/main/webapp/modules/core/styles/project/sidebar.less
+++ b/main/webapp/modules/core/styles/project/sidebar.less
@@ -73,9 +73,12 @@
 .history-past {
     padding-bottom: 3px;
 }
+
+@history_now_color: #a9e9fb;
+
 .history-now {
     padding: 3px 0;
-    background: #a9e9fb;
+    background: @history_now_color;
     color: white;
     font-size: 80%;
     text-transform: uppercase;
@@ -92,7 +95,7 @@ a.history-entry {
     padding: 7px 5px;
     text-decoration: none;
     color: black;
-    border-top: 1px solid #ddd;
+    border-top: 1px dotted #ddd;
 }
 a.history-entry:first-child {
     border-top: none;
@@ -103,12 +106,12 @@ a.history-entry:hover {
 
 .history-past a.history-entry:hover{
     padding: 11px 5px 2px 5px;
-    border-top: 2px solid red;
+    border-top: 2px solid @history_now_color;
     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;
+    border-bottom: 2px solid @history_now_color;
     background: url(../../images/down-arrow.png) bottom center no-repeat;
 }
 
@@ -116,13 +119,14 @@ a.history-entry:hover {
     color: #888;
 }
 
-.history-panel-footer {
-    padding: 6px 0px 0px 0px;    
-    text-align: center;
+.history-panel-controls {
+    padding: 6px;
+    text-align: right;
     font-weight: bold;
-}
-.history-panel-footer a {
-    text-decoration: none;
+    
+    a {
+      text-decoration: none;
+    }
 }
 
 .extract-operation-dialog-entries {