First implementation of minimize facets

v1 de minimize facets.
This commit is contained in:
Antoine2711 2020-04-16 03:26:47 -04:00
parent 0fa56a4d5f
commit f9c69bf80e
6 changed files with 45 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -286,6 +286,7 @@
"core-dialogs/choose-export-destination": "Please choose the destination for project export",
"core-dialogs/export-to-local": "OpenRefine project archive to file",
"core-facets/remove-facet": "Remove this facet",
"core-facets/minimize-facet": "Minimize this facet",
"core-facets/reset": "reset",
"core-facets/invert": "invert",
"core-facets/change": "change",

View File

@ -310,6 +310,7 @@
"core-facets/facet-by-count": "Facetas por conteo de opciones",
"core-facets/linear-plot": "Gráfica lineal",
"core-facets/rotated-clock": "Girar 45° en dirección de las manecillas de reloj",
"core-facets/remove-facet": "Minimizar esta faceta",
"core-facets/remove-facet": "Quitar esta faceta",
"core-facets/too-many-choices": "opciones en total, son muchas para mostrar",
"core-facets/time": "Hora",

View File

@ -296,6 +296,7 @@
"core-facets/reset": "réinitialiser",
"core-facets/time": "Date",
"core-facets/remove-facet": "Supprimer cette facette",
"core-facets/remove-facet": "Minimiser cette facette",
"core-facets/non-time": "Non-date",
"core-facets/linear-plot-abbr": "lin",
"core-facets/small-dot": "Point de petite taille",

View File

@ -37,7 +37,9 @@ function ListFacet(div, config, options, selection) {
if (!("invert" in this._config)) {
this._config.invert = false;
}
this._config.minimize = false;
this._options = options || {};
if (!("sort" in this._options)) {
this._options.sort = "name";
@ -82,6 +84,7 @@ ListFacet.prototype.getJSON = function() {
var o = {
type: "list",
name: this._config.name,
minimize: this._config.minimize,
columnName: this._config.columnName,
expression: this._config.expression,
omitBlank: "omitBlank" in this._config ? this._config.omitBlank : false,
@ -148,7 +151,12 @@ ListFacet.prototype._initializeUI = function() {
this._div.empty().show().html(
'<div class="facet-title" bind="facetTitle">' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td width="1%">' +
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
'</td>' +
'<td width="1%">' +
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
'</td>' +
'<td>' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
'<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
@ -182,6 +190,7 @@ ListFacet.prototype._initializeUI = function() {
});
this._elmts.expressionDiv.text(this._config.expression).hide().click(function() { self._editExpression(); });
this._elmts.removeButton.click(function() { self._remove(); });
this._elmts.minimizeButton.click(function() { self._minimize(); });
this._elmts.resetButton.click(function() { self._reset(); });
this._elmts.invertButton.click(function() { self._invert(); });
@ -674,6 +683,17 @@ ListFacet.prototype._remove = function() {
this._data = null;
};
ListFacet.prototype._minimize = function() {
if(!this._config.minimize) {
this._div.addClass("facet-state-minimize");
this._config.minimize = true;
} else {
this._div.removeClass("facet-state-minimize");
this._config.minimize = false;
}
};
ListFacet.prototype._updateRest = function() {
Refine.update({ engineChanged: true });
};

View File

@ -47,6 +47,11 @@ li.facet-container {
.rounded_corners(7px);
}
li.facet-state-minimize {
height: 22px;
overflow: hidden;
}
.facet-title {
padding: 3px 5px;
background: @chrome_primary;
@ -77,6 +82,21 @@ a.facet-title-remove:hover {
background-position: -12px 0px;
}
a.facet-title-minimize {
display: block;
width: 12px;
height: 12px;
margin: 2px 0 0 0;
text-decoration: none;
background-image: url(../../images/minimize-map.png);
background-repeat: no-repeat;
background-position: -12px 0px;
}
li.facet-state-minimize a.facet-title-minimize {
background-position: 0px 0px;
}
.facet-expression {
padding: 3px 5px;
font-family: monospace;