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

Fix UI of scatterplot-facet and dialog - fixes #3228 (#3338)

Browse Source
This commit is contained in:
rachittiwari8562 2020-11-29 06:46:23 +05:30 committed by GitHub
parent e410e345d2
commit 8740d1bcba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html
View File

@ -12,22 +12,22 @@
<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" bind="or_dialog_linplot">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" bind="or_dialog_logplot">log</label>
<input class="no-icon" 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" bind="or_dialog_linplot">lin</label>
<input class="no-icon" type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" bind="or_dialog_logplot">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" bind="or_dialog_counter">&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" bind="or_dialog_norot">&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" bind="or_dialog_clock">&nbsp;</label>
<input class="no-icon" type="radio" id="clustering-dialog-rot-ccw" name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" bind="or_dialog_counter">&nbsp;</label>
<input class="no-icon" 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" bind="or_dialog_norot">&nbsp;</label>
<input class="no-icon" type="radio" id="clustering-dialog-rot-cw" name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" bind="or_dialog_clock">&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" bind="or_dialog_smallDot">&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" bind="or_dialog_regularDot">&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" bind="or_dialog_bigDot">&nbsp;</label>
<input class="no-icon" type="radio" id="clustering-dialog-dot-small" name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" bind="or_dialog_smallDot">&nbsp;</label>
<input class="no-icon" 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" bind="or_dialog_regularDot">&nbsp;</label>
<input class="no-icon" type="radio" id="clustering-dialog-dot-big" name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" bind="or_dialog_bigDot">&nbsp;</label>
</div>
</td>
</tr></table>

5
main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
View File

@ -81,6 +81,11 @@ ScatterplotDialog.prototype._createDialog = function() {
this._level = DialogSystem.showDialog(dialog);
this._renderMatrix();
//the function buttonset() groups the input buttons into one but in doing so it creates icon on the input button
//the icon is created using checkboxradio()
//to get rid of the icon a class "no-icon" is directly applied to input button and checkboxradio() is called again with option :- icon=false
$(".no-icon").checkboxradio("option", "icon", false);
//this function only works after initialisation
};
ScatterplotDialog.prototype._renderMatrix = function() {

22
main/webapp/modules/core/scripts/facets/scatterplot-facet.js
View File

@ -114,18 +114,18 @@ class ScatterplotFacet extends Facet {
'<td class="facet-scatterplot-selectors-container" width="100%">' +
'<div class="scatterplot-selectors" bind="selectors">' +
'<div class="buttonset scatterplot-dim-selector">' +
'<input type="radio" id="' + facet_id + '-dim-lin" name="' + facet_id + '-dim" value="lin"/><label class="dim-lin-label" for="' + facet_id + '-dim-lin" title="'+$.i18n('core-facets/linear-plot')+'">'+$.i18n('core-facets/linear-plot-abbr')+'</label>' +
'<input type="radio" id="' + facet_id + '-dim-log" name="' + facet_id + '-dim" value="log"/><label class="dim-log-label" for="' + facet_id + '-dim-log" title="'+$.i18n('core-facets/logar-plot')+'">'+$.i18n('core-facets/logar-plot-abbr')+'</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-dim-lin" name="' + facet_id + '-dim" value="lin"/><label class="dim-lin-label" for="' + facet_id + '-dim-lin" title="'+$.i18n('core-facets/linear-plot')+'">'+$.i18n('core-facets/linear-plot-abbr')+'</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-dim-log" name="' + facet_id + '-dim" value="log"/><label class="dim-log-label" for="' + facet_id + '-dim-log" title="'+$.i18n('core-facets/logar-plot')+'">'+$.i18n('core-facets/logar-plot-abbr')+'</label>' +
'</div>' +
'<div class="buttonset scatterplot-rot-selector">' +
'<input type="radio" id="' + facet_id + '-rot-ccw" name="' + facet_id + '-rot" value="ccw"/><label class="rot-ccw-label" for="' + facet_id + '-rot-ccw" title="'+$.i18n('core-facets/rotated-counter-clock')+'">&nbsp;</label>' +
'<input type="radio" id="' + facet_id + '-rot-none" name="' + facet_id + '-rot" value="none"/><label class="rot-none-label" for="' + facet_id + '-rot-none" title="'+$.i18n('core-facets/no-rotation')+'">&nbsp;</label>' +
'<input type="radio" id="' + facet_id + '-rot-cw" name="' + facet_id + '-rot" value="cw"/><label class="rot-cw-label" for="' + facet_id + '-rot-cw" title="'+$.i18n('core-facets/rotated-clock')+'">&nbsp;</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-rot-ccw" name="' + facet_id + '-rot" value="ccw"/><label class="rot-ccw-label" for="' + facet_id + '-rot-ccw" title="'+$.i18n('core-facets/rotated-counter-clock')+'">&nbsp;</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-rot-none" name="' + facet_id + '-rot" value="none"/><label class="rot-none-label" for="' + facet_id + '-rot-none" title="'+$.i18n('core-facets/no-rotation')+'">&nbsp;</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-rot-cw" name="' + facet_id + '-rot" value="cw"/><label class="rot-cw-label" for="' + facet_id + '-rot-cw" title="'+$.i18n('core-facets/rotated-clock')+'">&nbsp;</label>' +
'</div>' +
'<div class="buttonset scatterplot-dot-selector">' +
'<input type="radio" id="' + facet_id + '-dot-small" name="' + facet_id + '-dot" value="small"/><label class="dot-small-label" for="' + facet_id + '-dot-small" title="'+$.i18n('core-facets/small-dot')+'">&nbsp;</label>' +
'<input type="radio" id="' + facet_id + '-dot-regular" name="' + facet_id + '-dot" value="regular"/><label class="dot-regular-label" for="' + facet_id + '-dot-regular" title="'+$.i18n('core-facets/regular-dot')+'">&nbsp;</label>' +
'<input type="radio" id="' + facet_id + '-dot-big" name="' + facet_id + '-dot" value="big"/><label class="dot-big-label" for="' + facet_id + '-dot-big" title="'+$.i18n('core-facets/big-dot')+'">&nbsp;</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-dot-small" name="' + facet_id + '-dot" value="small"/><label class="dot-small-label" for="' + facet_id + '-dot-small" title="'+$.i18n('core-facets/small-dot')+'">&nbsp;</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-dot-regular" name="' + facet_id + '-dot" value="regular"/><label class="dot-regular-label" for="' + facet_id + '-dot-regular" title="'+$.i18n('core-facets/regular-dot')+'">&nbsp;</label>' +
'<input class="no-icon" type="radio" id="' + facet_id + '-dot-big" name="' + facet_id + '-dot" value="big"/><label class="dot-big-label" for="' + facet_id + '-dot-big" title="'+$.i18n('core-facets/big-dot')+'">&nbsp;</label>' +
'</div>' +
'<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">'+$.i18n('core-facets/export-plot')+'</a></div>' +
'</div>' +
@ -218,6 +218,12 @@ class ScatterplotFacet extends Facet {
});
this._elmts.selectors.find(".buttonset").buttonset();
//the function buttonset() groups the input buttons into one but in doing so it creates icon on the input button
//the icon is created using checkboxradio()
//to get rid of the icon a class "no-icon" is directly applied to input button and checkboxradio() is called again with option :- icon=false
$(".no-icon").checkboxradio("option", "icon", false);
//this function only works after initialisation
};
_fillSelectionOptions(ops) {

5
main/webapp/modules/core/styles/project/facets.less
View File

@ -282,7 +282,7 @@ img.facet-choice-link {
}
.facet-scatterplot-selectors-container .scatterplot-selectors .buttonset {
margin: 0.8em 0em;
margin: 0.4em 0em;
}
.scatterplot-selectors .ui-button-text-only .ui-button-text {
@ -333,11 +333,13 @@ img.facet-choice-link {
.scatterplot-selectors .scatterplot-dim-selector label {
width: 32px;
height: 16px;
padding: 0px;
}
.scatterplot-selectors .scatterplot-rot-selector label {
width: 22px;
height: 18px;
padding: 0px;
background-image: url("../../images/scatterplot-icons.png");
}
@ -356,6 +358,7 @@ img.facet-choice-link {
.scatterplot-selectors .scatterplot-dot-selector label {
width: 22px;
height: 18px;
padding: 0px;
background-image: url("../../images/scatterplot-icons.png");
}