UI improvements to facetting, star and flags

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1617 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-22 01:43:56 +00:00
parent 9d328231d3
commit 91797339e0
25 changed files with 272 additions and 264 deletions

View File

@ -181,11 +181,9 @@ licenses/json.LICENSE.txt
licenses/mockito.LICENSE.txt
mockito
Others
------
Flag icon
http://pixel-mixer.com/category/free-icons/
Flag icon based on an icon from Silk Icons:
http://www.famfamfam.com/lab/icons/silk/
</pre>
<h2>Credits</h2>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 770 B

After

Width:  |  Height:  |  Size: 1022 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 B

After

Width:  |  Height:  |  Size: 991 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 B

After

Width:  |  Height:  |  Size: 961 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 166 B

After

Width:  |  Height:  |  Size: 1002 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 465 B

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -158,14 +158,12 @@ ListFacet.prototype._initializeUI = function() {
'</tr></table></div>' +
'</div>' +
'<div class="facet-expression" bind="expressionDiv" title="Click to edit expression"></div>' +
'<div class="facet-controls" bind="controlsDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
'<table><tr>' +
'<td><a bind="choiceCountContainer" class="action" href="javascript:{}"></a> <span class="facet-controls-sortControls" bind="sortGroup">sorted by ' +
'<div class="facet-controls" bind="controlsDiv" style="display:none;">' +
'<a bind="choiceCountContainer" class="action" href="javascript:{}"></a> <span class="facet-controls-sortControls" bind="sortGroup">Sort by: ' +
'<a href="javascript:{}" bind="sortByNameLink">name</a>' +
'<a href="javascript:{}" bind="sortByCountLink">count</a>' +
'</span></td>' +
'<td width="1%" nowrap=""><button bind="clusterLink">cluster</button></td>' +
'</tr></table>' +
'</span>' +
'<button bind="clusterLink" class="facet-controls-button button">Cluster</button>' +
'</div></div>' +
'<div class="facet-body" bind="bodyDiv">' +
'<div class="facet-body-inner" bind="bodyInnerDiv"></div>' +
@ -202,7 +200,7 @@ ListFacet.prototype._initializeUI = function() {
}
});
this._elmts.clusterLink.click(function() { self._doEdit(); }).button();
this._elmts.clusterLink.click(function() { self._doEdit(); });
if (this._config.expression != "value" && this._config.expression != "grel:value") {
this._elmts.clusterLink.hide();
}
@ -224,7 +222,7 @@ ListFacet.prototype._copyChoices = function() {
var frame = DialogSystem.createDialog();
frame.width("600px");
var header = $('<div></div>').addClass("dialog-header").text("Facet Choices exported as TSV").appendTo(frame);
var header = $('<div></div>').addClass("dialog-header").text("Facet Choices as Tab Separated Values").appendTo(frame);
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
@ -313,11 +311,11 @@ ListFacet.prototype._update = function(resetScroll) {
}
if (this._options.sort == "name") {
this._elmts.sortByNameLink.removeClass("action").addClass("inaction");
this._elmts.sortByCountLink.removeClass("inaction").addClass("action");
this._elmts.sortByNameLink.removeClass("action").addClass("selected");
this._elmts.sortByCountLink.removeClass("selected").addClass("action");
} else {
this._elmts.sortByNameLink.removeClass("inaction").addClass("action");
this._elmts.sortByCountLink.removeClass("action").addClass("inaction");
this._elmts.sortByNameLink.removeClass("selected").addClass("action");
this._elmts.sortByCountLink.removeClass("action").addClass("selected");
}
var html = [];
@ -444,9 +442,10 @@ ListFacet.prototype._renderBodyControls = function() {
.appendTo(this._elmts.bodyInnerDiv);
$('<a>')
.text("facet by choice counts")
.text("Facet by choice counts")
.attr("href", "javascript:{}")
.addClass("action")
.addClass("secondary")
.appendTo(bodyControls)
.click(function() {
ui.browsingEngine.addFacet(
@ -482,25 +481,17 @@ ListFacet.prototype._editChoice = function(choice, choiceDiv) {
var menu = MenuSystem.createMenu().addClass("data-table-cell-editor").width("400px");
menu.html(
'<table class="data-table-cell-editor-layout">' +
'<tr>' +
'<td colspan="3">' +
'<textarea class="data-table-cell-editor-editor" bind="textarea" />' +
'</td>' +
'</tr>' +
'<tr>' +
'<td width="1%" align="center">' +
'<button class="button" bind="okButton">Apply</button><br/>' +
'<span class="data-table-cell-editor-key">Enter</span>' +
'</td>' +
'<td width="1%" align="center">' +
'<button class="button" bind="cancelButton">Cancel</button><br/>' +
'<span class="data-table-cell-editor-key">Esc</span>' +
'</td>' +
'<td>' +
'</td>' +
'</tr>' +
'</table>'
'<div id="data-table-cell-editor-actions">' +
'<div class="data-table-cell-editor-action">' +
'<button class="button" bind="okButton">Apply</button>' +
'<div class="data-table-cell-editor-key">Enter</div>' +
'</div>' +
'<div class="data-table-cell-editor-action">' +
'<button class="button" bind="cancelButton">Cancel</button>' +
'<div class="data-table-cell-editor-key">Esc</div>' +
'</div>' +
'</div>'
);
var elmts = DOM.bind(menu);

View File

@ -172,7 +172,7 @@ RangeFacet.prototype._initializeUI = function() {
self._remove();
});
this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#bbccff", "#88aaee" ] });
this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {

View File

@ -137,8 +137,8 @@ function renderProjects(data) {
'<table class="list-table"><tr>' +
'<th>Name</th>' +
'<th></th>' +
'<th align="right">Last&nbsp;Modified</th>' +
'<th></th>' +
'<th align="right">Last&nbsp;modified</th>' +
'</tr></table>'
).appendTo(container)[0];
@ -183,16 +183,11 @@ function renderProjects(data) {
});
}).appendTo(tr.insertCell(tr.cells.length));
$('<div></div>')
.html(formatDate(project.date))
.addClass("last-modified")
.attr("title", project.date.toString())
.appendTo(tr.insertCell(tr.cells.length));
$('<a></a>')
var deleteLink = $('<a></a>')
.addClass("delete-project")
.attr("title","Delete this project")
.attr("href","")
.css("visibility", "hidden")
.html("<img src='/images/close.png' />")
.click(function() {
if (window.confirm("Are you sure you want to delete project \"" + project.name + "\"?")) {
@ -211,10 +206,19 @@ function renderProjects(data) {
return false;
}).appendTo(tr.insertCell(tr.cells.length));
$('<div></div>')
.html(formatDate(project.date))
.addClass("last-modified")
.attr("title", project.date.toString())
.appendTo(tr.insertCell(tr.cells.length));
$(tr).mouseenter(function() {
renameLink.css("visibility", "visible");
deleteLink.css("visibility", "visible");
}).mouseleave(function() {
renameLink.css("visibility", "hidden");
deleteLink.css("visibility", "hidden");
});
};

View File

@ -1,13 +1,16 @@
<div class="dialog-frame" style="width: 800px;">
<div class="dialog-header" bind="dialogHeader">Extract Operations</div>
<div class="dialog-body" bind="dialogBody"><div class="grid-layout layout-normal layout-full"><table>
<tr><td>Paste the JSON code encoding the operations to perform.</td></tr>
<tr><td>
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader">Apply Operation History</div>
<div class="dialog-body" bind="dialogBody">
<div class="dialog-instruction">
Paste an extracted JSON history of operations to perform:
</div>
<div class="input-container"><textarea wrap="off" bind="textarea" class="history-operation-json" /></div>
</td></tr>
</table></div></div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<button class="button" bind="applyButton">Apply</button>
<button class="button" bind="applyButton">Perform Operations</button>
<button class="button" bind="cancelButton">Cancel</button>
</div>
</div>
</div>

View File

@ -1,21 +1,31 @@
<div class="dialog-frame" style="width: 800px;">
<div class="dialog-header" bind="dialogHeader">Extract Operations</div>
<div class="dialog-body" bind="dialogBody"><div class="grid-layout layout-normal layout-full"><table>
<tr><td colspan="2">
The following JSON code encodes the operations you have done that can be abstracted.
You can copy and save it in order to apply the same operations in the future.
</td></tr>
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader">Extract Operation History</div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full">
<table>
<tr>
<td colspan="2">
Extract and save parts of your operation history as JSON that you can apply to this or other projects in the future.
</td>
</tr>
<tr>
<td width="50%" style="vertical-align: top">
<div class="extract-operation-dialog-entries"><table cellspacing="5" bind="entryTable"></table></div>
<div class="extract-operation-dialog-entries">
<table cellspacing="5" bind="entryTable"></table>
</div>
<button class="button" bind="selectAllButton">Select All</button>
<button class="button" bind="unselectAllButton">Unselect All</button>
</td>
<td width="50%" style="vertical-align: top">
<div class="input-container"><textarea wrap="off" class="history-operation-json" bind="textarea" /></div>
</td>
</tr>
</table></div></div>
<div class="dialog-footer" bind="dialogFooter"><div class="grid-layout layout-normal layout-full"><table><tr>
<td align="left"><button class="button" bind="selectAllButton">Select All</button> <button class="button" bind="unselectAllButton">Unselect All</button></td>
<td align="left"><button class="button" bind="closeButton">Close</button></td>
</tr></table></div></div>
</table>
</div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<button class="button" bind="closeButton">Close</button>
</div>
</div>
</div>

View File

@ -22,8 +22,3 @@
<div class="data-table-cell-editor-key">Esc</div>
</div>
</div>

View File

@ -288,7 +288,7 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
elmts.sortAloneContainer.show();
}
var validValuesHtml = '<li kind="value">Valid Values</li>';
var validValuesHtml = '<li kind="value">Valid values</li>';
var blankValuesHtml = '<li kind="blank">Blanks</li>';
var errorValuesHtml = '<li kind="error">Errors</li>';
var positionsHtml;

View File

@ -87,7 +87,7 @@ DataTableView.prototype.render = function() {
var html = $(
'<div class="viewpanel-header">' +
'<div class="viewpanel-rowrecord" bind="rowRecordControls">Show as ' +
'<div class="viewpanel-rowrecord" bind="rowRecordControls">Show as: ' +
'<span bind="modeSelectors"></span>' +
'</div>' +
'<div class="viewpanel-pagesize" bind="pageSizeControls"></div>' +
@ -172,7 +172,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
lastPage.addClass("inaction");
}
$('<span>Show </span>').appendTo(pageSizeControls);
$('<span>Show: </span>').appendTo(pageSizeControls);
var sizes = [ 5, 10, 25, 50 ];
var renderPageSize = function(index) {
var pageSize = sizes[index];

View File

@ -231,12 +231,12 @@ a img {
.notification-action {
padding-left: 10px;
}
}
.notification-loader {
padding: 0 3px 0 0;
opacity: 0.3;
}
}
#header {
height: 40px;
@ -286,26 +286,19 @@ a img {
#body-info ul {
font-size: 1.3em;
margin: .5em 0 2em;
}
}
#body-info li {
margin: 0.4em;
}
}
input[type="checkbox"], input[type="radio"], select {
vertical-align: baseline;
}
}
input.inline {
vertical-align: middle;
}
}
div.grid-layout > table {

View File

@ -70,9 +70,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
}
#projects-container {
border: 1px solid @chrome_primary;
border-left: 0;
border-right: 0;
border-top: 1px solid @chrome_primary;
background: #fff;
overflow: auto;
height: 378px;
@ -97,6 +95,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
background: #f2f2f2;
padding: @padding_tight;
font-size: 1.1em;
.rounded_corners_bottom(4px);
}
#project-links {
@ -141,6 +140,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
padding: @padding_loose 200px 48px @padding_loose;
background: @fill_secondary;
color: @metadata_grey;
.rounded_corners_bottom(4px);
}
#project-create-parsetext {

View File

@ -62,7 +62,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
}
#project-name-button:hover {
background: #ffffd6;
background: @fill_editable;
border: 1px solid #ccc;
border-top: 1px solid #aaa;
}

View File

@ -34,111 +34,116 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@import-less url("../theme.less");
ul.facets-container {
margin: 0;
padding: 0;
padding-right: 2px;
margin: 0 5px;
overflow: auto;
}
}
li.facet-container {
display: block;
clear: both;
margin: 0;
padding: 0;
margin-bottom: 6px;
background: white;
border: 1px solid #bbb;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px 7px;
}
margin-bottom: 7px;
background: @chrome_secondary;
border: 1px solid @chrome_primary;
.rounded_corners(7px);
}
.facet-title {
padding: 3px 5px;
background: @chrome_primary;
font-weight: bold;
cursor: move;
border-bottom: 1px solid #ccc;
}
border-bottom: 1px solid @chrome_primary;
.rounded_corners_top(6px);
}
a.facet-title-remove {
display: block;
width: 16px;
height: 16px;
width: 12px;
height: 12px;
margin: 2px 0 0 0;
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;
}
background-position: -12px 0px;
}
.facet-expression {
padding: 3px 5px;
font-family: monospace;
font-size: 11px;
background: #eee;
background: #fff;
cursor: text;
border-bottom: 1px solid #ccc;
}
.facet-expression:hover {
background: #ffffd6;
}
.facet-status {
font-size: 90%;
padding: 2px 5px;
}
.facet-controls {
font-size: 90%;
padding: 4px 5px 4px 5px;
background: #F4F7FA;
border-bottom: 1px solid #ccc;
}
.facet-controls .ui-button-text {
padding: 0.1em 0.4em 0.2em;
}
.facet-controls-sortControls a {
margin: 0 2px;
padding: 2px 4px 3px 4px;
}
.facet-controls-sortControls a.inaction {
color: #000;
font-weight: bold;
border-bottom: 1px solid @chrome_primary;
}
.facet-expression:hover {
background: @fill_editable;
}
.facet-status {
font-size: 0.9em;
padding: 2px 5px;
}
.facet-controls {
position: relative;
font-size: 0.9em;
padding: 7px 3px;
background: @chrome_secondary;
border-bottom: 1px solid @chrome_primary;
}
.facet-controls-button {
position: absolute;
top: 2px;
right: 2px;
}
.facet-body {
padding: 1px;
}
.facet-body-message {
margin: 1em;
color: #666;
color: @metadata_grey;
text-align: center;
}
.facet-body.facet-body-scrollable {
}
.facet-body-scrollable {
height: 17em;
padding-bottom: 10px;
padding-bottom: 8px;
background: url(../../images/facet-resize-handle.png) center bottom no-repeat;
}
}
.facet-body-inner {
background: #fff;
border-bottom: 1px solid @chrome_primary;
}
.facet-body.facet-body-scrollable .ui-resizable-s {
bottom: -5px;
height: 15px;
}
}
.facet-body-scrollable .facet-body-inner {
height: 100%;
overflow: auto;
}
}
.facet-body-controls {
margin: 0.5em 0;
text-align: center;
}
font-size: 0.85em;
margin: 5px 0;
}
.facet-choice {
padding: 2px 5px;
clear: both;
}
.facet-choice:hover {
background: @fill_secondary;
}
.facet-choice-selected .facet-choice-label {
font-weight: bold;
color: #ff6a00;
@ -152,32 +157,19 @@ a.facet-title-remove:hover {
color: black;
}
a.facet-choice-label {
margin-right: 0.25em;
text-decoration: none;
color: #004;
}
a.facet-choice-label:hover {
text-decoration: underline;
color: #66f;
}
.facet-choice-count {
color: #aaa;
font-size: 80%;
}
padding-left: 5px;
font-size: 0.85em;
color: @light_grey;
}
a.facet-choice-link {
margin-left: 0.5em;
font-size: 80%;
float: right;
text-decoration: none;
color: #aac;
}
a.facet-choice-link:hover {
text-decoration: underline;
color: #88a;
}
padding-left: 5px;
font-size: 0.85em;
color: @link_secondary;
font-weight: normal;
}
img.facet-choice-link {
text-align: baseline;
@ -187,23 +179,22 @@ img.facet-choice-link {
}
.facet-range-body {
padding: 10px 5px 0px 5px;
}
.facet-range-message {
margin: 1em;
color: #f88;
}
.facet-range-histogram {
overflow: hidden;
}
.facet-range-slider {
margin: 0px;
padding: 5px;
}
.facet-range-message {
color: @metadata_grey;
}
.facet-range-histogram {
overflow: hidden;
}
.facet-range-status {
margin: 5px 0;
margin: 0 0 3px 0;
color: #000;
text-align: center;
}
}
.facet-range-choices {
margin-bottom: 0.8em;

View File

@ -34,7 +34,6 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@import-less url("../theme.less");
.browsing-panel-header {
padding-bottom: 0.5em;
position: relative;
display: none;
}

View File

@ -37,6 +37,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@chrome_secondary: #e3e9ff;
@fill_primary: #ebeef8;
@fill_secondary: #f2f2f2;
@fill_editable: #ffffd6;
@selected_primary: #68e;
@green_primary: #282;
@green_secondary: #3d3;
@ -62,6 +63,24 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
border-radius: @radius;
}
.rounded_corners_top (@radius: 5px) {
-webkit-border-top-left-radius: @radius;
-webkit-border-top-right-radius: @radius;
-moz-border-radius-topleft: @radius;
-moz-border-radius-topright: @radius;
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.rounded_corners_bottom (@radius: 5px) {
-webkit-border-bottom-left-radius: @radius;
-webkit-border-bottom-right-radius: @radius;
-moz-border-radius-bottomleft: @radius;
-moz-border-radius-bottomright: @radius;
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.sharp_corners_left () {
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;

View File

@ -75,6 +75,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
padding: @padding_looser;
}
.dialog-instruction {
padding: 0 0 @padding_normal;
}
.dialog-footer {
font-size: 1.3em;
background: @dialog_footer;

View File

@ -243,19 +243,19 @@ a.data-table-star-on, a.data-table-star-off, a.data-table-flag-on, a.data-table-
text-decoration: none;
}
a.data-table-star-on, a.data-table-star-off:hover {
a.data-table-star-on {
background-position: 0 0;
}
a.data-table-star-off, a.data-table-star-on:hover {
a.data-table-star-off {
background-position: -17px 0;
}
a.data-table-flag-on, a.data-table-flag-off:hover {
a.data-table-flag-on {
background-position: 0 -17px;
}
a.data-table-flag-off, a.data-table-flag-on:hover {
a.data-table-flag-off {
background-position: -17px -17px;
}

View File

@ -37,8 +37,8 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
margin: 0;
padding: 0;
position: relative;
}
}
.histogram-widget canvas {
width: 100%;
}
}

View File

@ -36,46 +36,47 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
.slider-widget {
position: relative;
overflow: visible;
margin-left: 12px;
margin-right: 12px;
margin: 5px;
}
.slider-widget-tint {
position: absolute;
top: 0px;
height: 100%;
background: black;
opacity: 0.2;
background: #666;
opacity: 0.5;
display: none;
}
}
.slider-widget-tint.left {
left: 0px;
left: 0;
}
.slider-widget-tint.right {
right: 0px;
right: 0;
}
.slider-widget-highlight {
position: absolute;
padding: 1px 0px;
border: 1px solid #ff6a00;
padding: 0;
border: 1px solid #000;
top: -2px;
height: 100%;
cursor: move;
}
.slider-widget-bracket {
position: absolute;
top: 0;
width: 12px;
top: 0px;
height: 100%;
}
.slider-widget-bracket.left {
background: url(../../images/slider-handle.png) no-repeat center right;
margin-left: -14px;
margin-left: -8px;
cursor: e-resize;
}
.slider-widget-bracket.right {
background: url(../../images/slider-handle.png) no-repeat center left;
margin-left: 2px;
margin-left: -4px;
cursor: w-resize;
}
.slider-widget-overlay {