s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

more polish for the scatterplot dialog

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@617 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
Stefano Mazzocchi 2010-05-07 00:02:32 +00:00
parent 5bb944161c
commit 4058fc8045
3 changed files with 45 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/main/webapp/scripts/dialogs/scatterplot-dialog.js
View File

@ -13,7 +13,7 @@ ScatterplotDialog.prototype._createDialog = function() {
var header = $('<div></div>').addClass("dialog-header").text('Scatterplot Matrix' + ((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')")).appendTo(frame);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $(
'<div class="dialog-footer">' +
'<div>' +
'<table width="100%"><tr>' +
'<td class="left" style="text-align: left"></td>' +
'<td class="right" style="text-align: right"></td>' +
@ -21,41 +21,41 @@ ScatterplotDialog.prototype._createDialog = function() {
'</div>'
).appendTo(frame);
var html = $(
'<div class="grid-layout layout-normal"><table width="100%" class="scatterplot-selectors">' +
'<tr>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-dim-selector" bind="plotSelector">' +
'<input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>' +
'<input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>' +
'</div>' +
'</td>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-rot-selector" bind="rotationSelector">' +
'<input type="radio" id="clustering-dialog-rot-ccw" name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-rot-cw" name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise">&nbsp;</label>' +
'</div>' +
'</td>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-dot-selector" bind="dotSelector">' +
'<input type="radio" id="clustering-dialog-dot-small" name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-dot-big" name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size">&nbsp;</label>' +
'</div>' +
'</td>' +
'<td width="100%">&nbsp;</td>' +
'</tr>' +
'<tr>' +
'<td colspan="4">' +
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
'</td>' +
'</tr>' +
'</table></div>'
).appendTo(body);
$('<div class="grid-layout layout-normal">' +
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
'</div>').appendTo(body);
var left_footer = footer.find(".left");
var right_footer = footer.find(".right");
this._elmts = DOM.bind(html);
$('<button></button>').text("close").click(function() { self._dismiss(); }).appendTo(right_footer);
$('<div class="scatterplot-dialog-selectors-container">' +
'<table class="scatterplot-selectors"><tr>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-dim-selector" bind="plotSelector">' +
'<input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>' +
'<input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>' +
'</div>' +
'</td>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-rot-selector" bind="rotationSelector">' +
'<input type="radio" id="clustering-dialog-rot-ccw" name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-rot-cw" name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise">&nbsp;</label>' +
'</div>' +
'</td>' +
'<td nowrap>' +
'<div class="buttonset scatterplot-dot-selector" bind="dotSelector">' +
'<input type="radio" id="clustering-dialog-dot-small" name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size">&nbsp;</label>' +
'<input type="radio" id="clustering-dialog-dot-big" name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size">&nbsp;</label>' +
'</div>' +
'</td>' +
'</tr></table>' +
'</div>').appendTo(left_footer);
this._elmts = DOM.bind(frame);
this._elmts.plotSelector.buttonset().change(function() {
self._plot_method = $(this).find("input:checked").val();
@ -79,11 +79,6 @@ ScatterplotDialog.prototype._createDialog = function() {
self._renderMatrix();
});
var left_footer = footer.find(".left");
$('<button></button>').text("cancel").click(function() { self._dismiss(); }).appendTo(left_footer);
var right_footer = footer.find(".right");
this._level = DialogSystem.showDialog(frame);
this._renderMatrix();
};

2
src/main/webapp/styles/dialogs/clustering-dialog.css
View File

@ -50,13 +50,13 @@ table.clustering-dialog-entry-table a:hover {
.clustering-dialog-controls {
margin-bottom: 0.5em;
margin-right: 2em;
}
.clustering-dialog-controls td {
padding-right: 0.5em;
}
.clustering-dialog-facet {
margin-bottom: 1em;
}

12
src/main/webapp/styles/dialogs/scatterplot-dialog.css
View File

@ -1,13 +1,17 @@
.scatterplot-dialog-selectors-container {
}
.scatterplot-dialog-selectors-container .buttonset {
margin-right: 1em;
}
.scatterplot-dialog-table-container {
margin: 2px 0em;
height: 500px;
overflow: auto;
border: 1px solid #aaa;
}
.clustering-dialog-controls {
margin-right: 2em;
}
table.scatterplot-matrix-table {
border-collapse: collapse;
}