condense status and controls in the list facet on a single line and use jquery_ui small radio buttons to make it look more coherent with the other facets
git-svn-id: http://google-refine.googlecode.com/svn/trunk@531 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
parent
c9e4214a89
commit
909156dc70
@ -105,28 +105,23 @@ ListFacet.prototype._reSortChoices = function() {
|
||||
ListFacet.prototype._initializeUI = function() {
|
||||
var self = this;
|
||||
|
||||
var facet_id = this._div.attr("id");
|
||||
|
||||
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>' +
|
||||
'<div class="facet-expression" bind="expressionDiv"></div>' +
|
||||
'<div class="facet-status" bind="statusDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
|
||||
'<table><tr>' +
|
||||
'<td bind="choiceCountContainer"></td>' +
|
||||
'<td width="1%"><a href="javascript:{}" class="action" bind="clusterLink">Cluster</a></td>' +
|
||||
'</tr></table>' +
|
||||
'</div></div>' +
|
||||
'<div class="facet-controls" bind="controlsDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
|
||||
'<table><tr>' +
|
||||
'<td>Sort by: ' +
|
||||
'<a href="javascript:{}" bind="sortByNameLink" class="facet-mode-link">Name</a> ' +
|
||||
'<a href="javascript:{}" bind="sortByCountLink" class="facet-mode-link">Count</a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" class="action" bind="resetButton">Reset</a>' +
|
||||
'</td>' +
|
||||
'<td><span bind="sortGroup">Sort 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>' +
|
||||
'</tr></table>' +
|
||||
'</div></div>' +
|
||||
'<div class="facet-body" bind="bodyDiv">' +
|
||||
@ -158,8 +153,10 @@ ListFacet.prototype._initializeUI = function() {
|
||||
}
|
||||
});
|
||||
|
||||
this._elmts.sortGroup.buttonset();
|
||||
|
||||
if (this._config.expression == "value") {
|
||||
this._elmts.clusterLink.click(function() { self._doEdit(); });
|
||||
this._elmts.clusterLink.click(function() { self._doEdit(); }).button();
|
||||
} else {
|
||||
this._elmts.clusterLink.hide();
|
||||
}
|
||||
@ -180,14 +177,14 @@ ListFacet.prototype._update = function(resetScroll) {
|
||||
var self = this;
|
||||
|
||||
if (!this._data) {
|
||||
this._elmts.statusDiv.hide();
|
||||
//this._elmts.statusDiv.hide();
|
||||
this._elmts.controlsDiv.hide();
|
||||
this._elmts.bodyInnerDiv.empty().append(
|
||||
$('<div>').text("Loading...").addClass("facet-body-message"));
|
||||
|
||||
return;
|
||||
} else if ("error" in this._data) {
|
||||
this._elmts.statusDiv.hide();
|
||||
//this._elmts.statusDiv.hide();
|
||||
this._elmts.controlsDiv.hide();
|
||||
this._elmts.bodyInnerDiv.empty().append(
|
||||
$('<div>').text(this._data.error).addClass("facet-body-message"));
|
||||
@ -204,7 +201,7 @@ ListFacet.prototype._update = function(resetScroll) {
|
||||
}
|
||||
|
||||
this._elmts.bodyInnerDiv.empty();
|
||||
this._elmts.statusDiv.show();
|
||||
//this._elmts.statusDiv.show();
|
||||
this._elmts.controlsDiv.show();
|
||||
|
||||
var choices = this._data.choices;
|
||||
|
@ -81,25 +81,12 @@ li.facet-container {
|
||||
}
|
||||
.facet-controls {
|
||||
font-size: 90%;
|
||||
padding: 5px 5px;
|
||||
padding: 4px 5px 4px 5px;
|
||||
background: #F4F7FA;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
a.facet-mode-link {
|
||||
text-decoration: none;
|
||||
padding: 1px 3px 2px 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
a.facet-mode-link:hover {
|
||||
background: #f8f8f8;
|
||||
color: #FF6A00;
|
||||
}
|
||||
a.facet-mode-link.facet-mode-link-selected {
|
||||
background: #f8f8f8;
|
||||
color: #FF6A00;
|
||||
border: 1px solid #ccc;
|
||||
.facet-controls .ui-button-text {
|
||||
padding: 0.1em 0.4em 0.2em;
|
||||
}
|
||||
|
||||
.facet-body {
|
||||
|
Loading…
Reference in New Issue
Block a user