diff --git a/src/main/webapp/scripts/dialogs/scatterplot-dialog.js b/src/main/webapp/scripts/dialogs/scatterplot-dialog.js index 0c4d2cfcb..f1c3ba87f 100644 --- a/src/main/webapp/scripts/dialogs/scatterplot-dialog.js +++ b/src/main/webapp/scripts/dialogs/scatterplot-dialog.js @@ -22,24 +22,32 @@ ScatterplotDialog.prototype._createDialog = function() { ).appendTo(frame); var html = $( - '
' + + '
' + '' + - '' + + '' + + '' + + '' + '' + '' + - '' + '' + @@ -48,39 +56,33 @@ ScatterplotDialog.prototype._createDialog = function() { this._elmts = DOM.bind(html); - - this._elmts.plotSelector.change(function() { - self._plot_method = $(this).find("option:selected").attr("value"); + + this._elmts.plotSelector.buttonset().change(function() { + self._plot_method = $(this).find("input:checked").val(); self._renderMatrix(); }); - this._elmts.rotationSelector.change(function() { - self._rotation = $(this).find("option:selected").attr("value"); + this._elmts.rotationSelector.buttonset().change(function() { + self._rotation = $(this).find("input:checked").val(); self._renderMatrix(); }); - this._elmts.plotSize.change(function() { - try { - self._plot_size = parseInt($(this).val(),10); - self._renderMatrix(); - } catch (e) { - alert("Must be a number"); - } - }); - - this._elmts.dotSize.change(function() { - try { - self._dot_size = parseFloat($(this).val(),10); - self._renderMatrix(); - } catch (e) { - alert("Must be a number"); + this._elmts.dotSelector.buttonset().change(function() { + var dot_size = $(this).find("input:checked").val(); + if (dot_size == "small") { + self._dot_size = 0.4; + } else if (dot_size == "big") { + self._dot_size = 1.4; + } else { + self._dot_size = 0.8; } + self._renderMatrix(); }); var left_footer = footer.find(".left"); + $('').text("cancel").click(function() { self._dismiss(); }).appendTo(left_footer); var right_footer = footer.find(".right"); - $('').text("Done").click(function() { self._dismiss(); }).appendTo(right_footer); this._level = DialogSystem.showDialog(frame); this._renderMatrix(); @@ -113,8 +115,6 @@ ScatterplotDialog.prototype._renderMatrix = function() { if (typeof self._plot_size == 'undefined') { self._plot_size = Math.max(Math.floor(500 / columns.length / 5) * 5,20); self._dot_size = 0.8; - self._elmts.plotSize.val(self._plot_size); - self._elmts.dotSize.val(self._dot_size); } var table = '
' + - 'Plot type: ' + - 'Plot Size: px' + - 'Dot Size: px' + - 'Rotation: ' + + '' + + '
' + + '' + + '' + + '
' + '
' + + '
' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '' + + '' + + '
' + + '
 
' + + '' + '
' + '
'; @@ -183,7 +183,7 @@ ScatterplotDialog.prototype._renderMatrix = function() { 'r': self._rotation }; ui.browsingEngine.addFacet("scatterplot", options); - //self._dismiss(); + self._dismiss(); }); var load_images = function(data) { diff --git a/src/main/webapp/scripts/facets/scatterplot-facet.js b/src/main/webapp/scripts/facets/scatterplot-facet.js index 208c9f31d..26ee09985 100644 --- a/src/main/webapp/scripts/facets/scatterplot-facet.js +++ b/src/main/webapp/scripts/facets/scatterplot-facet.js @@ -79,22 +79,22 @@ ScatterplotFacet.prototype._initializeUI = function() { '' + '' + '' + '
' + - '
' + - '
' + + '
' + + '
' + '' + '' + '
' + - '
' + + '
' + '' + '' + '' + '
' + - '
' + + '
' + '' + '' + '' + '
' + - '' + + '' + '
' + '
' + @@ -154,7 +154,7 @@ ScatterplotFacet.prototype._initializeUI = function() { this._elmts.selectors.find("#" + facet_id + "-dot-regular").attr('checked','checked'); } - this._elmts.selectors.find(".facet-scatterplot-dim-selector").change(function() { + this._elmts.selectors.find(".scatterplot-dim-selector").change(function() { var dim = $(this).find("input:checked").val(); self._config.dim_x = dim; self._config.dim_y = dim; @@ -163,14 +163,14 @@ ScatterplotFacet.prototype._initializeUI = function() { self.changePlot(); }); - this._elmts.selectors.find(".facet-scatterplot-rot-selector").change(function() { + this._elmts.selectors.find(".scatterplot-rot-selector").change(function() { self._config.r = $(this).find("input:checked").val(); self.reset(); self._updateRest(); self.changePlot(); }); - this._elmts.selectors.find(".facet-scatterplot-dot-selector").change(function() { + this._elmts.selectors.find(".scatterplot-dot-selector").change(function() { var dot_size = $(this).find("input:checked").val(); if (dot_size == "small") { self._config.dot = 0.4; diff --git a/src/main/webapp/styles/dialogs/scatterplot-dialog.css b/src/main/webapp/styles/dialogs/scatterplot-dialog.css index feb423a5d..783f5f405 100644 --- a/src/main/webapp/styles/dialogs/scatterplot-dialog.css +++ b/src/main/webapp/styles/dialogs/scatterplot-dialog.css @@ -23,7 +23,7 @@ table.scatterplot-matrix-table td.current_column { } table.scatterplot-matrix-table div.current_column { - background-color: #ffeeee; + background-color: #fbede3; } table.scatterplot-matrix-table .column_header { diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css index f5da49e0a..afb35b3f0 100644 --- a/src/main/webapp/styles/project/browsing.css +++ b/src/main/webapp/styles/project/browsing.css @@ -221,20 +221,29 @@ img.facet-choice-link { vertical-align: middle; } -.facet-scatterplot-body .ui-button-text-only .ui-button-text { +.facet-scatterplot-selectors-container .scatterplot-selectors { + text-align: center; +} + +.facet-scatterplot-selectors-container .scatterplot-export-plot { + font-size: 95%; + margin-top: 3em; +} + +.facet-scatterplot-selectors-container .scatterplot-selectors .buttonset { + margin: 0.8em 0em; +} + +.scatterplot-selectors .ui-button-text-only .ui-button-text { font-size: 90%; padding: 0.0em 0.4em 0.1em 0.3em; } -.facet-scatterplot-selectors { - text-align: center; +.scatterplot-selectors .buttonset { + margin: 0px; } -.facet-scatterplot-selectors .buttonset { - margin: 0.8em 0em; -} - -.facet-scatterplot-selectors .buttonset .ui-corner-top { +.scatterplot-selectors .buttonset .ui-corner-top { -moz-border-radius-topleft: 0.5em; -webkit-border-top-left-radius: 0.5em; border-top-left-radius: 0.5em; @@ -243,7 +252,7 @@ img.facet-choice-link { border-top-right-radius: 0.5em; } -.facet-scatterplot-selectors .buttonset .ui-corner-bottom { +.scatterplot-selectors .buttonset .ui-corner-bottom { -moz-border-radius-bottomleft: 0.5em; -webkit-border-bottom-left-radius: 0.5em; border-bottom-left-radius: 0.5em; @@ -252,7 +261,7 @@ img.facet-choice-link { border-bottom-right-radius: 0.5em; } -.facet-scatterplot-selectors .buttonset .ui-corner-right { +.scatterplot-selectors .buttonset .ui-corner-right { -moz-border-radius-topright: 0.5em; -webkit-border-top-right-radius: 0.5em; border-top-right-radius: 0.5em; @@ -261,7 +270,7 @@ img.facet-choice-link { border-bottom-right-radius: 0.5em; } -.facet-scatterplot-selectors .buttonset .ui-corner-left { +.scatterplot-selectors .buttonset .ui-corner-left { -moz-border-radius-topleft: 0.5em; -webkit-border-top-left-radius: 0.5em; border-top-left-radius: 0.5em; @@ -270,43 +279,43 @@ img.facet-choice-link { border-bottom-left-radius: 0.5em; } -.facet-scatterplot-selectors .facet-scatterplot-dim-selector label { +.scatterplot-selectors .scatterplot-dim-selector label { width: 32px; height: 16px; } - -.facet-scatterplot-selectors .facet-scatterplot-rot-selector label { + +.scatterplot-selectors .scatterplot-rot-selector label { width: 22px; height: 18px; background-image: url("../../images/scatterplot-icons.png"); } -.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-ccw-label { +.scatterplot-selectors .scatterplot-rot-selector label.rot-ccw-label { background-position: -5px -5px; } -.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-none-label { +.scatterplot-selectors .scatterplot-rot-selector label.rot-none-label { background-position: -28px -4px; } -.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-cw-label { +.scatterplot-selectors .scatterplot-rot-selector label.rot-cw-label { background-position: -48px -3px; } -.facet-scatterplot-selectors .facet-scatterplot-dot-selector label { +.scatterplot-selectors .scatterplot-dot-selector label { width: 22px; height: 18px; background-image: url("../../images/scatterplot-icons.png"); } -.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-small-label { +.scatterplot-selectors .scatterplot-dot-selector label.dot-small-label { background-position: -5px -25px; } -.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-regular-label { +.scatterplot-selectors .scatterplot-dot-selector label.dot-regular-label { background-position: -27px -25px; } -.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-big-label { +.scatterplot-selectors .scatterplot-dot-selector label.dot-big-label { background-position: -48px -25px; }