From 12d5c6aba5ba6f5adcdfff72a9bb5b6995a4a8c5 Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Mon, 8 Mar 2010 00:45:29 +0000
Subject: [PATCH] Fixed layout of extract operation dialog.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@233 7d457c2a-affb-35e4-300a-418c747d4874
---
 .../webapp/scripts/project/history-widget.js   | 13 +++++++------
 src/main/webapp/styles/project/history.css     | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/scripts/project/history-widget.js b/src/main/webapp/scripts/project/history-widget.js
index b67ef4c68..6e0190cab 100644
--- a/src/main/webapp/scripts/project/history-widget.js
+++ b/src/main/webapp/scripts/project/history-widget.js
@@ -128,13 +128,17 @@ HistoryWidget.prototype._showExtractOperationsDialog = function(json) {
         "The following JSON code encodes the operations you have done that can be abstracted. " + 
         "You can copy and save it in order to apply the same operations in the future.").appendTo(body);
         
-    var table = $('<table width="100%" cellspacing="0" cellpadding="0"><tr></tr></table>').appendTo(body)[0];
+    var table = $('<table width="100%" cellspacing="0" cellpadding="0"><tr></tr></table>')
+        .addClass("extract-operation-dialog-layout")
+        .appendTo(body)[0];
+    
     var leftColumn = table.rows[0].insertCell(0);
     var rightColumn = table.rows[0].insertCell(1);
     $(leftColumn).width("50%");
     $(rightColumn).width("50%").css("padding-left", "20px");
     
-    var entryDiv = $('<div>').height("400px").css("overflow", "auto").appendTo(leftColumn);
+    var entryDiv = $('<div>').addClass("extract-operation-dialog-entries").appendTo(leftColumn);
+    
     var entryTable = $('<table cellspacing="5"></table>').appendTo(entryDiv)[0];
     var createEntry = function(entry) {
         var tr = entryTable.insertRow(entryTable.rows.length);
@@ -161,10 +165,7 @@ HistoryWidget.prototype._showExtractOperationsDialog = function(json) {
         
     var textarea = $('<textarea />')
         .attr("wrap", "off")
-        .css("white-space", "pre")
-        .css("font-family", "monospace")
-        .width("100%")
-        .height("400px")
+        .addClass("extract-operation-dialog-textarea")
         .appendTo(rightColumn);
     var updateJson = function() {
         var a = [];
diff --git a/src/main/webapp/styles/project/history.css b/src/main/webapp/styles/project/history.css
index c8dff6151..fc54bb585 100644
--- a/src/main/webapp/styles/project/history.css
+++ b/src/main/webapp/styles/project/history.css
@@ -85,3 +85,21 @@ a.history-entry:hover {
     color: white;
     text-decoration: none;
 }
+
+table.extract-operation-dialog-layout td {
+    vertical-align: top;
+}
+.extract-operation-dialog-entries {
+    height: 400px;
+    overflow: auto;
+}
+textarea.extract-operation-dialog-textarea {
+    display: block;
+    margin: 0;
+    vertical-align: top;
+    white-space: pre;
+    font-family: monospace;
+    padding: 2%;
+    width: 96%;
+    height: 400px;
+}
\ No newline at end of file