Skip to content
GitLab
Commit 091eac8f authored by Matija Obreza's avatar Matija Obreza
Browse files

User experience fixed

parent 7180ad16
Hide whitespace changes
Inline Side-by-side
src/main/resources/content/language.properties
View file @ 091eac8f
......@@ -314,8 +314,10 @@ selection.add-many.accessionIds=List accession IDs as used in Genesys separated
filters.page.title=Data filters
filters.view=Current filters
filter.filters-applied=You have applied filters.
filter.filters-not-applied=You can filter the data.
filters.data-is-filtered=The data is filtered.
filters.modify-filters=View & Modify filters
filters.toggle-filters=Filters
filter.taxonomy=Taxonomy
filter.inTrust=ITPGRFA Art. 15 accession
filter.acceNumb=Accession name
......@@ -339,6 +341,9 @@ filter.add=Add filter
filter.additional=Additional filters
filter.apply=Apply
filter.close=Close
filter.remove=Remove filter
filter.autocomplete-placeholder=Type more than 3 characters...
search.page.title=Full-text Search
search.no-results=No matches found for your query.
......
src/main/webapp/WEB-INF/jsp/accession/additional-filter.jsp
View file @ 091eac8f
......@@ -12,10 +12,9 @@
<c:set var="normalizedKey" value="${fn:replace(filter.key,':', '_')}"/>
<c:set var="filterKey" value="${filter.key}"/>
<div class="clearfix filter-block"
id="${normalizedKey}_filter" key="${normalizedKey}">
<div class="clearfix filter-block" id="${normalizedKey}_filter" key="${normalizedKey}">
<div class="col-lg-3">
<div class="col-lg-3 edit-fil">
<c:if test="${not filter.core}">
<a href="<c:url value="/descriptors/${filter.key}" />"><c:out value="${filter.title}" /></a>
</c:if>
......@@ -24,13 +23,12 @@
<spring:message code="filter.${filter.name}" />
</c:if>
</div>
<div class="col-lg-5 filter-new">
<div class="col-lg-5 filter-new">
<c:choose>
<c:when test="${filter.name=='crop'}">
<div class="form-group input-group">
<div class="form-group input-group">
<span class="input-group-btn">
<select name="crop" id="cropselector" onclick="filterCrop('${filterKey}')" class="form-control">
<select name="crop" id="cropselector" i-key = "${filterKey}" class="form-control filter-crop">
<option value=""></option>
<c:forEach items="${crops}" var="c">
<option value="${c.shortName}" ${c.shortName== crop.shortName?'selected':''} ><c:out value="${c.getName(pageContext.response.locale)}" /></option>
......@@ -38,54 +36,40 @@
</select>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:when test="${filter.filterType=='LIST'}">
<c:when test="${filter.filterType=='LIST'}">
<div class="">
<c:forEach items="${filter.options}" var="option">
<div>
<label>
<input class="filter-list" id="${option.value}_input" norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
<input class="filter-list" id="${option.value}_input" ${fn:contains(filters[filter.key], option.value)?'checked':''} norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
<spring:message code="${option.name}"/>
</label>
</div>
</c:forEach>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:when test="${filter.filterType=='I18NLIST'}">
<div class="">
<c:forEach items="${filter.options}" var="option">
<div>
<label>
<input class="filter-list" id="${option.value}_input" norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
<input class="filter-list" id="${option.value}_input" ${fn:contains(filters[filter.key], option.value)?'checked':''} norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
<spring:message code="${option.name}"/>
</label>
</div>
</c:forEach>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div>
</c:when>
<c:when test="${filter.filterType=='AUTOCOMPLETE'}">
<div class="ui-front">
<div class="form-group input-group">
<span class="input-group-btn">
<input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<span class="input-group-btn">
<input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" placeholder="<spring:message code="filter.autocomplete-placeholder" />" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button>
</span>
</div>
</div>
</c:when>
<c:when test="${filter.dataType=='NUMERIC'}">
<div class="form-group input-group">
......@@ -95,41 +79,33 @@
<button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:when test="${filter.dataType=='BOOLEAN'}">
<div class="">
<div><label><input type="checkbox" class="filter-bool" i-key="${normalizedKey}true" id="${normalizedKey}" value="true"/><spring:message code="boolean.true"/></label></div>
<div><label><input type="checkbox" class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"/><spring:message code="boolean.false"/></label></div>
<div><label><input type="checkbox" class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"/><spring:message code="boolean.null"/></label></div>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'true')?'checked':''} class="filter-bool" i-key="${normalizedKey}true" id="${normalizedKey}" value="true"><spring:message code="boolean.true"/></label></div>
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'false')?'checked':''} class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"><spring:message code="boolean.false"/></label></div>
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'null')?'checked':''} class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"><spring:message code="boolean.null"/></label></div>
</div>
</c:when>
<c:otherwise>
<div class="ui-front">
<div class="form-group input-group">
<span class="input-group-btn">
<input class="span2 form-control" id="${normalizedKey}_input" type="text" />
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<div class="ui-front">
<div class="form-group input-group">
<span class="input-group-btn">
<input class="span2 form-control" id="${normalizedKey}_input" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button>
</span>
</div>
</div>
</div>
</c:otherwise>
</c:choose>
</div>
<div>
<a href="#" style="float: right" class="close-fil glyphicon glyphicon-remove"></a>
<a href="#" style="float: right" class="edit-fil glyphicon glyphicon-pencil"></a>
</div>
<div class="col-lg-4 filter-values" id="${normalizedKey}_value">
<div class="col-lg-9">
<div class="filter-values" id="${normalizedKey}_value">
</div>
<div style="margin-top: 3px" class="filter-apply-btn">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<button class="btn btn-default remove-filter"><spring:message code="filter.remove"/></button>
</div>
</div>
</div>
</c:forEach>
src/main/webapp/WEB-INF/jsp/accession/explore_new.jsp
View file @ 091eac8f
......@@ -40,13 +40,19 @@
</div>
<%--Filters--%>
<div id="toggleFilters" class="filter-toggler applied-filters hide">
<a href="#"><spring:message code="filters.modify-filters" /></a>
<div id="toggleFilters" class="applied-filters">
<ul class="nav nav-pills">
<li class="active filter-toggler"><a><spring:message code="filters.toggle-filters" /></a></li>
<li class="message right">
<span class="${fn:length(currentFilters) gt 0 ? '' : 'hide'}"><spring:message code="filter.filters-applied" /></span>
<span class="${fn:length(currentFilters) gt 0 ? 'hide' : ''}"><spring:message code="filter.filters-not-applied" /></span>
</li>
</ul>
</div>
<div id="allfilters" class="applied-filters hide">
<a style="float: right" class="filter-toggler close-fil glyphicon glyphicon-remove" href="#"></a>
<ul class="nav nav-pills">
<li class="dropdown form-horizontal" id="menu1">
<li class="filter-toggler"><a><spring:message code="filters.toggle-filters" /></a></li>
<li class="active dropdown form-horizontal" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<spring:message code="filter.add"/>
......@@ -69,7 +75,10 @@
<b class="glyphicon-plus"></b>
</a>
</li>
<li class="message right">
<span class="${fn:length(currentFilters) gt 0 ? '' : 'hide'}"><spring:message code="filter.filters-applied" /></span>
<span class="${fn:length(currentFilters) gt 0 ? 'hide' : ''}"><spring:message code="filter.filters-not-applied" /></span>
</li>
</ul>
<%-- Only render currently present filters --%>
......@@ -79,18 +88,17 @@
<c:set var="filterKey" value="${filter.key}"/>
<div class="clearfix filter-block" id="${normalizedKey}_filter" key="${normalizedKey}">
<div class="col-lg-3">
<div class="col-lg-3 edit-fil">
<c:if test="${not filter.core}">
<a href="<c:url value="/descriptors/${filter.key}" />"><c:out value="${filter.title}" /></a>
<c:out value="${filter.title}" />
<%-- <a href="<c:url value="/descriptors/${filter.key}" />"> --%>
</c:if>
<c:if test="${filter.core}">
<spring:message code="filter.${filter.name}" />
<spring:message code="filter.${filter.name}" />
</c:if>
</div>
<div class="col-lg-5 filter-new" style="display: none">
<div class="col-lg-5 filter-new">
<c:choose>
<c:when test="${filter.filterType=='LIST'}">
<div class="">
......@@ -103,9 +111,6 @@
</div>
</c:forEach>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:when test="${filter.filterType=='I18NLIST'}">
<div class="">
......@@ -117,25 +122,17 @@
</label>
</div>
</c:forEach>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div>
</c:when>
<c:when test="${filter.filterType=='AUTOCOMPLETE'}">
<div class="ui-front">
<div class="form-group input-group">
<span class="input-group-btn">
<input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" type="text"/>
<input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" placeholder="<spring:message code="filter.autocomplete-placeholder" />" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div>
</c:when>
<c:when test="${filter.dataType=='NUMERIC'}">
<div class="form-group input-group">
......@@ -145,9 +142,6 @@
<button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:when test="${filter.dataType=='BOOLEAN'}">
<div class="">
......@@ -155,9 +149,6 @@
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'false')?'checked':''} class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"><spring:message code="boolean.false"/></label></div>
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'null')?'checked':''} class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"><spring:message code="boolean.null"/></label></div>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:when test="${filter.name=='crop'}">
<div class="form-group input-group">
......@@ -170,9 +161,6 @@
</select>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when>
<c:otherwise>
<div class="ui-front">
......@@ -182,38 +170,38 @@
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button>
</span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div>
</c:otherwise>
</c:choose>
</div>
<div>
<a href="#" style="float: right" class="close-fil glyphicon glyphicon-remove"></a>
<a href="#" style="float: right" class="edit-fil glyphicon glyphicon-pencil"></a>
</div>
<div class="col-lg-4 filter-values" id="${normalizedKey}_value">
<c:forEach items="${filters[filter.key]}" var="value">
<c:set var="string" value="${value}"/>
<c:if test="${fn:contains(value, 'range')}">
<c:set var="string" value="${fn:replace(value,'{range=[','Between ')}"/>
<c:set var="string" value="${fn:replace(string,',',' and ')}"/>
<c:set var="string" value="${fn:replace(string,']}','')}"/>
</c:if>
<c:if test="${fn:contains(value, 'min')}">
<c:set var="string" value="${fn:replace(value,'{min=','More than ')}"/>
<c:set var="string" value="${fn:replace(string,'}','')}"/>
</c:if>
<c:if test="${fn:contains(value, 'max')}">
<c:set var="string" value="${fn:replace(value,'{max=','Less than ')}"/>
<c:set var="string" value="${fn:replace(string,'}','')}"/>
</c:if>
<div class="filtval complex" x-key="${normalizedKey}${value}" id="${normalizedKey}">${string}</div>
</c:forEach>
<div class="col-lg-9">
<div class="filter-values" id="${normalizedKey}_value">
<c:forEach items="${filters[filter.key]}" var="value">
<c:set var="string" value="${value}"/>
<c:if test="${fn:contains(value, 'range')}">
<c:set var="string" value="${fn:replace(value,'{range=[','Between ')}"/>
<c:set var="string" value="${fn:replace(string,',',' and ')}"/>
<c:set var="string" value="${fn:replace(string,']}','')}"/>
</c:if>
<c:if test="${fn:contains(value, 'min')}">
<c:set var="string" value="${fn:replace(value,'{min=','More than ')}"/>
<c:set var="string" value="${fn:replace(string,'}','')}"/>
</c:if>
<c:if test="${fn:contains(value, 'max')}">
<c:set var="string" value="${fn:replace(value,'{max=','Less than ')}"/>
<c:set var="string" value="${fn:replace(string,'}','')}"/>
</c:if>
<c:if test="${string==null}">
<c:set var="string" value="null" />
</c:if>
<div class="filtval complex" x-key="${normalizedKey}${string}" id="${normalizedKey}">${string}</div>
<c:remove var="string" />
</c:forEach>
</div>
<div style="margin-top: 3px" class="filter-apply-btn">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<button class="btn btn-default remove-filter"><spring:message code="filter.remove"/></button>
</div>
</div>
</div>
</c:forEach>
......@@ -269,7 +257,7 @@
$(document).ready(function () {
if (jsonData.crop != null) {
if (jsonData.crop !=null && jsonData.crop.length > 0) {
$("#menu2").show();
}
......@@ -350,15 +338,15 @@
$("body").on("click", ".apply", function () {
GenesysFilterUtil.submitJson(jsonData);
});
$("body").on("click", ".close-fil", function () {
var key = $(this).parent().parent().attr("key");
$("body").on("click", ".remove-filter", function () {
var key = $(this).parents(".filter-block").attr("key");
delete jsonData[key.replace("_", ":")];
GenesysFilterUtil.submitJson(jsonData);
});
$("body").on("click", ".edit-fil", function () {
$(this).parent().parent().find(".filter-new").toggle("fast");
GenesysFilterUtil.showFilter($(this).parents(".filter-block"));
});
$("body").on("click", ".filtval", function (event) {
......@@ -373,10 +361,11 @@
value = GenesysFilterUtil.setCharAt(jsonVal, jsonVal.indexOf("{"), '{"');
value = GenesysFilterUtil.setCharAt(value, jsonVal.indexOf(":") + 1, '":');
}
if (value=="null") value=null;
GenesysFilterUtil.removeValue(value, key, jsonData);
if ($(this).parent().parent().find(".filter-new").is(":hidden")) {
if (! $(this).parents(".filter-block").hasClass("filter-edit")) {
GenesysFilterUtil.submitJson(jsonData);
}
......@@ -384,11 +373,7 @@
$('input[i-key=' + key + value + ']').prop('checked', false);
});
$(".autocomplete-filter").each(function () {
var t = $(this);
t.autocomplete({ delay: 200, minLength: 3, source: t.attr('x-source'), messages: { noResults: '', results: function () {
} } });
});
GenesysFilterUtil.registerAutocomplete("#allfilters");
});
</script>
</content>
......
src/main/webapp/html/css/custom.css
View file @ 091eac8f
......@@ -1307,14 +1307,27 @@ table.crop-details h4 {
/* Main column - Filters */
.nav .filter-toggler a {
background-color: #eeeeee;
}
#allfilters .filter-block {
background:#f8f7f5;
margin:0 0 5px 0;
margin:5px 0 0 0;
padding:10px;
}
#allfilters .nav {
margin: 0 0 0.5em 0;
#allfilters .filter-block .filter-new, #allfilters .filter-block .filter-apply-btn {
display: none;
}
#allfilters .filter-block.edit-filter .filter-new, #allfilters .filter-block.edit-filter .filter-apply-btn {
display: inherit;
}
#allfilters .edit-fil {
cursor: pointer;
font-weight: bold;
}
.filter-block input[type=checkbox] {
......@@ -1420,7 +1433,9 @@ html[dir="rtl"] #allfilters .filter-block .filter-name {
margin: 0 0 10px 0;
}
#allfilters .input-group {width:180px;}
#allfilters .input-group {
width:180px;
}
#allfilters .input-group-btn .btn {
background:#b4b3ae;
......@@ -1897,4 +1912,18 @@ html[dir="rtl"] ul.statistics .stats-number {
.modal-dialog {
width: 800;
}
\ No newline at end of file
}
/* Nav-pills messages */
.nav.nav-pills li.message {
display: block;
padding: 10px 15px;
position: relative;
overflow-x: hidden;
}
.nav.nav-pills li.right {
float: right;
}
src/main/webapp/html/js/crophub.js
View file @ 091eac8f
......@@ -192,6 +192,7 @@ GenesysFilter = {
//add filter with three checkboxes true/false/null values
filterBoolean: function (element, jsonData) {
var value = $(element).val();
if (value=="null") value=null;
var key = $(element).attr("id");
var checked = $(element).is(":checked");
......@@ -210,6 +211,7 @@ GenesysFilter = {
filterCrop: function (element, jsonData) {
var selectBox = document.getElementById("cropselector");
var value = selectBox.options[selectBox.selectedIndex].value;
if (value=="null") value=null;
var key = $(element).attr("i-key");
delete jsonData[key];
......@@ -227,7 +229,15 @@ GenesysFilter = {
};
GenesysFilterUtil = {
// Enable autocompleters
registerAutocomplete: function (container) {
$(container).find(".autocomplete-filter").each(function () {
var t = $(this);
console.log("Autocomplete " + t);
t.autocomplete({ delay: 200, minLength: 3, source: t.attr('x-source'), messages: { noResults: '', results: function () {
} } });
});
},
//replace chars
setCharAt: function (str, index, chr) {
if (index > str.length - 1) return str;
......@@ -255,6 +265,7 @@ GenesysFilterUtil = {
},
//form json array
collectData: function (key, value, jsonData) {
if (value=="null") value=null;
key = key.replace("_", ":");
var jsonValue = [];
var exist = jsonData[key] != null;
......@@ -269,36 +280,22 @@ GenesysFilterUtil = {
//add in html value of filter
appendHtml: function (key, value, element) {
var valueId = "#" + key + "_value";
var summaryViewId = "#" + key + "_summary";
if (value==null) value="null";
var div = "<div class='filtval complex' x-key='" + key + value + "' id='" + key + "'>" + value + "</div>";
$(element).parent().parent().parent().parent().parent().find(valueId).append(div);
$(element).parent().parent().parent().parent().parent().find(summaryViewId).append(div);
$(element).parents(".filter-block").find(".filter-values").append(div);
},
//remove value from json array
removeValue: function (value, key, jsonData) {
key = key.replace("_", ":")
var array = jsonData[key];
for (var val in array) {
var isJson = value.indexOf("{") > -1;
var jsonArray = array[val];
if (isJson) {
jsonArray = JSON.stringify(jsonArray);
}
if (jsonArray == value) {
array.splice(val, 1);
}
}
array.splice(array.indexOf(value), 1);
},
//add new filter
appendFilter: function (filter, filterId, jsonData) {
if ($(filterId).length != 0) {
console.log("Filter already loaded");
GenesysFilterUtil.showFilter(filterId);
return;
}
......@@ -309,11 +306,18 @@ GenesysFilterUtil = {
success: function (data) {
jsonData[filter] = [];
$("#allfilters").append(data);
GenesysFilterUtil.registerAutocomplete("#allfilters");
GenesysFilterUtil.showFilter(filterId);
},
error: function (error) {
console.log(error);
}
});
},
showFilter: function(filterEl) {
var fe=$(filterEl);
fe.toggleClass("edit-filter");
fe.find(".filter-values").parent().toggleClass("col-lg-9").toggleClass("col-lg-4");
}
};
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment