From a0b119b3460890d2699ab1c5a934d5a74cfe3b0a Mon Sep 17 00:00:00 2001 From: David Huynh Date: Tue, 13 Apr 2010 05:41:32 +0000 Subject: [PATCH] Polished list facet a bit more to look like James' design. git-svn-id: http://google-refine.googlecode.com/svn/trunk@460 7d457c2a-affb-35e4-300a-418c747d4874 --- src/main/webapp/scripts/facets/list-facet.js | 116 ++++++++++++------- src/main/webapp/styles/project.css | 8 +- src/main/webapp/styles/project/browsing.css | 46 ++++++-- 3 files changed, 113 insertions(+), 57 deletions(-) diff --git a/src/main/webapp/scripts/facets/list-facet.js b/src/main/webapp/scripts/facets/list-facet.js index a9db1fa73..8345a1242 100644 --- a/src/main/webapp/scripts/facets/list-facet.js +++ b/src/main/webapp/scripts/facets/list-facet.js @@ -106,20 +106,19 @@ ListFacet.prototype.render = function() { scrollTop = this._div[0].childNodes[1].scrollTop; } catch (e) { } - var container = this._div.empty(); - var headerDiv = $('
').addClass("facet-title").appendTo(container); - $('').text(this._config.name).appendTo(headerDiv); + var container = this._div.empty().html( + '
' + + '' + + '' + + '
' + ); + var elmts = DOM.bind(container); - var removeButton = $('') - .attr("src", "images/close.png") - .attr("title", "Remove this facet") - .addClass("facet-choice-link") - .click(function() { - self._remove(); - }).prependTo(headerDiv); + elmts.titleSpan.text(this._config.name); + elmts.removeButton.click(function() { self._remove(); }); - var bodyDiv = $('
').addClass("facet-body"); + var bodyDiv = $('
').addClass("facet-body"); if (!("scroll" in this._options) || this._options.scroll) { bodyDiv.addClass("facet-body-scrollable"); } @@ -127,23 +126,79 @@ ListFacet.prototype.render = function() { if (!this._data) { $('
').text("Loading...").addClass("facet-body-message").appendTo(bodyDiv); bodyDiv.appendTo(container); + } else if ("error" in this._data) { $('
').text(this._data.error).addClass("facet-body-message").appendTo(bodyDiv); bodyDiv.appendTo(container); + } else { + var choices = this._data.choices; var selectionCount = this._selection.length + (this._blankChoice !== null && this._blankChoice.s ? 1 : 0) + (this._errorChoice !== null && this._errorChoice.s ? 1 : 0); - if (selectionCount > 0) { - var reset = function() { - self._reset(); - }; - removeButton.after( - $('').addClass("facet-choice-link").text("reset").click(reset) - ); + /* + * Status + */ + var statusDiv = $( + '
' + + '' + + '' + + '' + + '
' + choices.length + ' choicesCluster
' + + '
' + ).appendTo(container); + + var statusElmts = DOM.bind(statusDiv); + if (this._config.expression == "value") { + statusElmts.clusterLink.click(function() { self._doEdit(); }); + } else { + statusElmts.clusterLink.hide(); } + /* + * Controls + */ + var controlsDiv = $( + '
' + + '' + + '' + + '' + + '
Sort by ' + + 'Name ' + + 'Count' + + '' + + 'Reset' + + '
' + + '
' + ).appendTo(container); + + var controlsElmts = DOM.bind(controlsDiv); + if (selectionCount > 0) { + controlsElmts.resetButton.click(function() { self._reset(); }); + } else { + controlsElmts.resetButton.hide(); + } + + if (this._options.sort == "name") { + controlsElmts.sortByNameLink.addClass("facet-mode-link-selected"); + controlsElmts.sortByCountLink.click(function() { + self._options.sort = "count"; + self._reSortChoices(); + self.render(); + }); + } else { + controlsElmts.sortByCountLink.addClass("facet-mode-link-selected"); + controlsElmts.sortByNameLink.click(function() { + self._options.sort = "name"; + self._reSortChoices(); + self.render(); + }); + } + + /* + * Body + */ var renderEdit = this._config.expression == "value"; var renderChoice = function(choice, customLabel) { var label = customLabel || choice.v.l; @@ -226,7 +281,6 @@ ListFacet.prototype.render = function() { } }; - var choices = this._data.choices; for (var i = 0; i < choices.length; i++) { renderChoice(choices[i]); } @@ -239,30 +293,6 @@ ListFacet.prototype.render = function() { bodyDiv.appendTo(container); bodyDiv[0].scrollTop = scrollTop; - - var footerDiv = $('
').addClass("facet-footer").appendTo(container); - - $('').text(choices.length + " choices: ").appendTo(footerDiv); - if (this._options.sort == "name") { - $('').addClass("action").text("re-sort by count").click(function() { - self._options.sort = "count"; - self._reSortChoices(); - self.render(); - }).appendTo(footerDiv); - } else { - $('').addClass("action").text("re-sort by name").click(function() { - self._options.sort = "name"; - self._reSortChoices(); - self.render(); - }).appendTo(footerDiv); - } - - if (this._config.expression == "value") { - $('').html(" • ").appendTo(footerDiv); - $('').addClass("action").text("cluster").click(function() { - self._doEdit(); - }).appendTo(footerDiv); - } } }; diff --git a/src/main/webapp/styles/project.css b/src/main/webapp/styles/project.css index d68edcfe7..0d1e38ac7 100644 --- a/src/main/webapp/styles/project.css +++ b/src/main/webapp/styles/project.css @@ -107,12 +107,10 @@ body { .left-panel .ui-tabs .ui-tabs-panel { margin: 0px; padding: 7px; + border: 1px solid #DBE8EB; background: #DBE8EB; - - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - -moz-border-radius-topleft: 0px; - -webkit-border-top-left-radius: 0px; + -moz-border-radius-bottomleft: 7px; + -webkit-border-bottom-left-radius: 7px; } .facet-panel { diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css index 04b325376..c8d83838d 100644 --- a/src/main/webapp/styles/project/browsing.css +++ b/src/main/webapp/styles/project/browsing.css @@ -21,11 +21,14 @@ li.facet-container { padding: 0; margin-top: 10px; background: white; - border: 1px solid #ccc; + border: 1px solid #bbb; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px 5px; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + border-radius: 7px 7px; + + -moz-border-radius-bottomright: 0px; + -webkit-border-bottom-right-radius: 0px; } .facet-title { @@ -34,6 +37,35 @@ li.facet-container { font-weight: bold; cursor: move; } + +.facet-status { + font-size: 90%; + padding: 2px 5px; +} +.facet-controls { + font-size: 90%; + padding: 5px 5px; + background: #F4F7FA; + border-bottom: 1px solid #eee; +} +a.facet-mode-link { + text-decoration: none; + padding: 2px; + margin 0px 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} +a.facet-mode-link:hover { + background: #666; + color: white; +} +a.facet-mode-link.facet-mode-link-selected { + background: #888; + color: #eee; + color: default; +} + .facet-body { padding: 1px; } @@ -45,11 +77,7 @@ li.facet-container { height: 20em; overflow: auto; } -.facet-footer { - padding: 1px; - text-align: center; - font-size: 80%; -} + .facet-choice { padding: 2px 5px;