Prevent really long expressions from stretching the expression preview dialogs.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1772 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-11-03 19:15:48 +00:00
parent faaca5beea
commit 232d97f832
2 changed files with 32 additions and 19 deletions

View File

@ -135,6 +135,8 @@ ExpressionPreviewDialog.Widget = function(
})
.select()
.focus();
this._tabContentWidth = this._elmts.expressionPreviewPreviewContainer.width() + "px";
this.update();
this._renderExpressionHistoryTab();
@ -178,10 +180,10 @@ ExpressionPreviewDialog.Widget.prototype._renderHelpTab = function() {
};
ExpressionPreviewDialog.Widget.prototype._renderHelp = function(data) {
var elmt = this._elmts.expressionPreviewHelpTabBody.empty();
var elmt = this._elmts.expressionPreviewHelpTabBody.empty().width(this._tabContentWidth);
$('<h3></h3>').text("Variables").appendTo(elmt);
var varTable = $('<table width="100%" cellspacing="5"></table>').appendTo(elmt)[0];
var varTable = $('<table cellspacing="5"></table>').appendTo(elmt)[0];
var vars = [
{ name: "cell",
description: "The current cell. It has a few fields: 'value' and 'recon'."
@ -260,13 +262,13 @@ ExpressionPreviewDialog.Widget.prototype._renderExpressionHistoryTab = function(
ExpressionPreviewDialog.Widget.prototype._renderExpressionHistory = function(data) {
var self = this;
var elmt = this._elmts.expressionPreviewHistoryContainer.empty();
var elmt = this._elmts.expressionPreviewHistoryContainer.empty().width(this._tabContentWidth);
var table = $(
'<table width="100%" cellspacing="5">' +
'<table>' +
'<tr><th></th><th>From</th><th colspan="2">Expression</th><th></th></tr>' +
'</table>'
).appendTo(elmt)[0];
).appendTo($('<div>').addClass("expression-preview-table-wrapper").appendTo(elmt))[0];
var renderEntry = function(entry) {
var tr = table.insertRow(table.rows.length);
@ -333,8 +335,10 @@ ExpressionPreviewDialog.Widget.prototype._prepareUpdate = function(params) {
};
ExpressionPreviewDialog.Widget.prototype._renderPreview = function(expression, data) {
var container = this._elmts.expressionPreviewPreviewContainer.empty();
var table = $('<table width="100%"></table>').appendTo(container)[0];
var container = this._elmts.expressionPreviewPreviewContainer.empty().width(this._tabContentWidth);
var table = $('<table></table>').appendTo(
$('<div>').addClass("expression-preview-table-wrapper").appendTo(container))[0];
var tr = table.insertRow(0);
$(tr.insertCell(0)).addClass("expression-preview-heading").text("row");

View File

@ -50,16 +50,30 @@ textarea.expression-preview-code {
color: red;
}
#expression-preview-tabs-preview, #expression-preview-tabs-help, #expression-preview-tabs-history {
padding: 5px;
#expression-preview-tabs-preview,
#expression-preview-tabs-help,
#expression-preview-tabs-history {
padding: @padding_tight;
overflow: hidden;
}
.expression-preview-container {
#expression-preview-tabs-preview > div,
#expression-preview-tabs-help > div,
#expression-preview-tabs-history > div {
height: 200px;
padding: 5px;
overflow: auto;
}
#expression-preview-tabs-preview td, #expression-preview-tabs-preview th,
#expression-preview-tabs-help td, #expression-preview-tabs-help th,
#expression-preview-tabs-history td, #expression-preview-tabs-history th {
padding: @padding_tight;
}
.expression-preview-table-wrapper {
padding: @padding_normal;
}
.expression-preview-container td {
padding: 2px 5px;
border-top: 1px solid #ccc;
@ -80,15 +94,10 @@ td.expression-preview-value {
color: #aaa;
}
.expression-preview-help-container {
height: 200px;
padding: 5px;
overflow: auto;
}
.expression-preview-help-container h3 {
background: white;
padding: 3px 10px;
margin-top: @padding_looser;
margin-bottom: @padding_normal;
border-bottom: 1px solid @light_grey;
}
.expression-preview-doc-item-title {