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

More polishing on the facets. Moved close buttons to left so they are separate from the "reset" links. Simplified the html generating code in scatterplot facet. Changed resize graphics for list facet.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@537 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-04-25 01:08:23 +00:00
parent 18afe534c5
commit c5c587132a
8 changed files with 112 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/main/webapp/images/close-map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 770 B

BIN
src/main/webapp/images/facet-resize-handle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 B

BIN
src/main/webapp/images/slider-handle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 B

After

Width:  |  Height:  |  Size: 2.8 KiB

16
src/main/webapp/scripts/facets/list-facet.js
View File

@ -109,19 +109,23 @@ ListFacet.prototype._initializeUI = function() {
this._div.empty().show().html(
'<div class="facet-title">' +
'<img src="images/close.png" title="Remove this facet" class="facet-choice-link" bind="removeButton"/>' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">change</a>' +
'<span bind="titleSpan"></span>' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="Remove this facet" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td>' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">change</a>' +
'<span bind="titleSpan"></span>' +
'</td>' +
'</tr></table></div>' +
'</div>' +
'<div class="facet-expression" bind="expressionDiv"></div>' +
'<div class="facet-controls" bind="controlsDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
'<table><tr>' +
'<td><span bind="sortGroup">Sort by: ' +
'<td><span bind="choiceCountContainer"></span> <span bind="sortGroup">sorted by ' +
'<input bind="sortByNameLink" type="radio" id="' + facet_id + '-name-sort" name="radio" checked="checked" /><label for="' + facet_id + '-name-sort">name</label>' +
'<input bind="sortByCountLink" type="radio" id="' + facet_id + '-count-sort" name="radio" /><label for="' + facet_id + '-count-sort">count</label>' +
'</span></td>' +
'<td width="1%" nowrap=""><span bind="choiceCountContainer"></span> <button bind="clusterLink">cluster</button></td>' +
'<td width="1%" nowrap=""><button bind="clusterLink">cluster</button></td>' +
'</tr></table>' +
'</div></div>' +
'<div class="facet-body" bind="bodyDiv">' +

12
src/main/webapp/scripts/facets/range-facet.js
View File

@ -98,10 +98,14 @@ RangeFacet.prototype._initializeUI = function() {
.show()
.html(
'<div class="facet-title" bind="headerDiv">' +
'<img src="images/close.png" class="facet-choice-link" title="Remove this facet" bind="removeButton" />' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">change</a>' +
'<span bind="facetTitle"></span>' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="Remove this facet" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td>' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">change</a>' +
'<span bind="facetTitle"></span>' +
'</td>' +
'</tr></table></div>' +
'</div>' +
'<div class="facet-expression" bind="expressionDiv"></div>' +
'<div class="facet-range-body">' +

162
src/main/webapp/scripts/facets/scatterplot-facet.js
View File

@ -25,7 +25,7 @@ ScatterplotFacet.reconstruct = function(div, uiState) {
};
ScatterplotFacet.prototype.dispose = function() {
this._plotImg.imgAreaSelect({ hide : true });
this._elmts.plotImg.imgAreaSelect({ hide : true });
};
ScatterplotFacet.prototype.getUIState = function() {
@ -52,45 +52,63 @@ ScatterplotFacet.prototype._initializeUI = function() {
var facet_id = container.attr("id");
var headerDiv = $('<div>').addClass("facet-title").appendTo(container);
$('<span></span>').text(this._config.name).appendTo(headerDiv);
this._div.empty().show().html(
'<div class="facet-title">' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="Remove this facet" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td>' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
'<span bind="titleSpan"></span>' +
'</td>' +
'</tr></table></div>' +
'</div>' +
'<div class="facet-scatterplot-body" bind="bodyDiv">' +
'<div class="facet-scatterplot-message" bind="messageDiv">Loading...</div>' +
'<table width="100%"><tr>' +
'<td class="facet-scatterplot-plot-container">' +
'<div class="facet-scatterplot-plot" bind="plotDiv">' +
'<img class="facet-scatterplot-image" bind="plotBaseImg" />' +
'<img class="facet-scatterplot-image" bind="plotImg" />' +
'</div>' +
'</td>' +
'<td class="facet-scatterplot-selectors-container" width="100%">' +
'<div class="facet-scatterplot-selectors" bind="selectors">' +
'<div class="buttonset facet-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="Linear Plot">lin</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="Logarithmic Plot">log</label>' +
'</div>' +
'<div class="buttonset facet-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="Rotated 45° Counter-Clockwise">&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="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="Rotated 45° Clockwise">&nbsp;</label>' +
'</div>' +
'<div class="buttonset facet-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="Small Dot Size">&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="Regular Dot Size">&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="Big Dot Size">&nbsp;</label>' +
'</div>' +
'</div>' +
'</td>' +
'</tr></table>' +
'<div class="facet-scatterplot-status" bind="statusDiv"></div>' +
'</div>'
);
this._elmts = DOM.bind(this._div);
var resetButton = $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("reset").click(function() {
this._elmts.titleSpan.text(this._config.name);
this._elmts.removeButton.click(function() { self._remove(); });
this._elmts.resetButton.click(function() {
self.reset();
self._updateRest();
}).prependTo(headerDiv);
});
var removeButton = $('<img>')
.attr("src", "images/close.png")
.attr("title", "Remove this facet")
.addClass("facet-choice-link")
.click(function() {
self._remove();
}).prependTo(headerDiv);
var bodyDiv = $('<div>').addClass("facet-scatterplot-body").appendTo(container);
this._messageDiv = $('<div>').text("Loading...").addClass("facet-scatterplot-message").appendTo(bodyDiv);
this._plotDiv = $('<div>')
.addClass("facet-scatterplot-plot")
.width(this._config.l + "px")
.height(this._config.l + "px")
.appendTo(bodyDiv);
this._plotBaseImg = $('<img>')
.addClass("facet-scatterplot-image")
.attr("src", this._formulateBaseImageUrl())
this._elmts.plotDiv.width(this._config.l + "px").height(this._config.l + "px");
this._elmts.plotBaseImg.attr("src", this._formulateBaseImageUrl())
.attr("width", this._config.l)
.attr("height", this._config.l)
.appendTo(this._plotDiv);
this._plotImg = $('<img>')
.addClass("facet-scatterplot-image")
.attr("src", this._formulateCurrentImageUrl())
.attr("height", this._config.l);
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl())
.attr("width", this._config.l)
.attr("height", this._config.l)
.appendTo(this._plotDiv);
.attr("height", this._config.l);
var ops = {
instance: true,
@ -115,61 +133,43 @@ ScatterplotFacet.prototype._initializeUI = function() {
ops.x2 = this._config.to_x;
ops.y2 = this._config.to_y;
}
this._plotAreaSelector = this._plotImg.imgAreaSelect(ops);
this._selectors = $('<div class="facet-scatterplot-selectors">' +
'<div class="buttonset facet-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="Linear Plot">lin</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="Logarithmic Plot">log</label>' +
'</div>' +
'<div class="buttonset facet-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="Rotated 45° Counter-Clockwise">&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="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="Rotated 45° Clockwise">&nbsp;</label>' +
'</div>' +
'<div class="buttonset facet-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="Small Dot Size">&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="Regular Dot Size">&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="Big Dot Size">&nbsp;</label>' +
'</div>' +
'</div>');
this._plotAreaSelector = this._elmts.plotImg.imgAreaSelect(ops);
if (this._config.dim_x == 'lin' && this._config.dim_y == 'lin') {
this._selectors.find("#" + facet_id + "-dim-lin").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-dim-lin").attr('checked','checked');
} else if (this._config.dim_x == 'log' && this._config.dim_y == 'log') {
this._selectors.find("#" + facet_id + "-dim-log").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-dim-log").attr('checked','checked');
}
if (this._config.r == 'cw') {
this._selectors.find("#" + facet_id + "-rot-cw").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-rot-cw").attr('checked','checked');
} else if (this._config.r == 'ccw') {
this._selectors.find("#" + facet_id + "-rot-ccw").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-rot-ccw").attr('checked','checked');
} else {
this._selectors.find("#" + facet_id + "-rot-none").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-rot-none").attr('checked','checked');
}
if (this._config.dot >= 1.2) {
this._selectors.find("#" + facet_id + "-dot-big").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-dot-big").attr('checked','checked');
} else if (this._config.dot <= 0.4) {
this._selectors.find("#" + facet_id + "-dot-small").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-dot-small").attr('checked','checked');
} else {
this._selectors.find("#" + facet_id + "-dot-regular").attr('checked','checked');
this._elmts.selectors.find("#" + facet_id + "-dot-regular").attr('checked','checked');
}
this._selectors.find(".facet-scatterplot-dim-selector").change(function() {
this._elmts.selectors.find(".facet-scatterplot-dim-selector").change(function() {
var dim = $(this).find("input:checked").val();
self._config.dim_x = dim;
self._config.dim_y = dim;
self.changePlot();
});
this._selectors.find(".facet-scatterplot-rot-selector").change(function() {
this._elmts.selectors.find(".facet-scatterplot-rot-selector").change(function() {
self._config.r = $(this).find("input:checked").val();
self.changePlot();
});
this._selectors.find(".facet-scatterplot-dot-selector").change(function() {
this._elmts.selectors.find(".facet-scatterplot-dot-selector").change(function() {
var dot_size = $(this).find("input:checked").val();
if (dot_size == "small") {
self._config.dot = 0.4;
@ -181,21 +181,7 @@ ScatterplotFacet.prototype._initializeUI = function() {
self.changePlot();
});
this._selectors.find("#" + facet_id + "-dim-lin").css
this._selectors.find(".buttonset").buttonset();
var plotTable = $(
'<table width="100%"><tr>' +
'<td class="facet-scatterplot-plot-container"></td>' +
'<td class="facet-scatterplot-selectors-container" width="100%"></td>' +
'</tr></table>'
);
plotTable.find(".facet-scatterplot-plot-container").append(this._plotDiv);
plotTable.find(".facet-scatterplot-selectors-container").append(this._selectors);
plotTable.appendTo(bodyDiv);
this._statusDiv = $('<div>').addClass("facet-scatterplot-status").appendTo(bodyDiv);
this._elmts.selectors.find(".buttonset").buttonset();
};
ScatterplotFacet.prototype._formulateCurrentImageUrl = function() {
@ -249,8 +235,8 @@ ScatterplotFacet.prototype.updateState = function(data) {
};
ScatterplotFacet.prototype.changePlot = function() {
this._plotBaseImg.attr("src", this._formulateBaseImageUrl());
this._plotImg.attr("src", this._formulateCurrentImageUrl());
this._elmts.plotBaseImg.attr("src", this._formulateBaseImageUrl());
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl());
this._updateRest();
}
@ -261,17 +247,17 @@ ScatterplotFacet.prototype.render = function() {
}
if (this._error) {
this._messageDiv.text(this._errorMessage).show();
this._plotDiv.hide();
this._statusDiv.hide();
this._elmts.messageDiv.text(this._errorMessage).show();
this._elmts.plotDiv.hide();
this._elmts.statusDiv.hide();
return;
}
this._messageDiv.hide();
this._plotDiv.show();
this._statusDiv.show();
this._elmts.messageDiv.hide();
this._elmts.plotDiv.show();
this._elmts.statusDiv.show();
this._plotImg.attr("src", this._formulateCurrentImageUrl());
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl());
};
ScatterplotFacet.prototype._remove = function() {

8
src/main/webapp/scripts/facets/text-search-facet.js
View File

@ -50,8 +50,12 @@ TextSearchFacet.prototype._initializeUI = function() {
var self = this;
this._div.empty().show().html(
'<div class="facet-title">' +
'<img bind="removeButton" src="images/close.png" title="Remove this facet" class="facet-choice-link" />' +
'<span>' + this._config.name + '</span>' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="Remove this facet" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td>' +
'<span>' + this._config.name + '</span>' +
'</td>' +
'</tr></table></div>' +
'</div>' +
'<div class="facet-text-body"><div class="grid-layout layout-tightest layout-full"><table>' +
'<tr><td colspan="4"><div class="input-container"><input bind="input" /></div></td></tr>' +

16
src/main/webapp/styles/project/browsing.css
View File

@ -61,11 +61,23 @@ li.facet-container {
.facet-title {
padding: 3px 5px;
padding-right: 2px;
font-weight: bold;
cursor: move;
border-bottom: 1px solid #ccc;
}
a.facet-title-remove {
display: block;
width: 16px;
height: 16px;
text-decoration: none;
background-image: url(../../images/close-map.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
a.facet-title-remove:hover {
background-position: -16px 0px;
}
.facet-expression {
padding: 3px 5px;
font-family: monospace;
@ -100,7 +112,7 @@ li.facet-container {
.facet-body.facet-body-scrollable {
height: 17em;
padding-bottom: 10px;
background: url(../../images/down-arrow.png) center bottom no-repeat;
background: url(../../images/facet-resize-handle.png) center bottom no-repeat;
}
.facet-body.facet-body-scrollable .ui-resizable-s {
bottom: -5px;