Commit 05b297ee authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Restyled the composition search.

parent a8f851c5
This diff is collapsed.
...@@ -377,8 +377,8 @@ div.title span.unfolded::before{ ...@@ -377,8 +377,8 @@ div.title span.unfolded::before{
.search-filter-side{ .search-filter-side{
background-color: white;/* background-color: #DDD;*/ background-color: white;/* background-color: #DDD;*/
width: 220px; width: 260px;
padding: 16px; /*padding: 16px;*/
} }
...@@ -386,10 +386,12 @@ div.title span.unfolded::before{ ...@@ -386,10 +386,12 @@ div.title span.unfolded::before{
transition: opacity 0.8s; transition: opacity 0.8s;
} }
.search-box{ .search-box {
width: 742px; width: 742px;
display: flex; display: flex;
justify-content: center; /*space-between;*/ justify-content: center; /*space-between;*/
align-items: flex-start; /*space-between;*/
/*justify-content: center; [>space-between;<]*/
} }
.search-query-wrapper{ .search-query-wrapper{
position: relative; position: relative;
...@@ -397,6 +399,10 @@ div.title span.unfolded::before{ ...@@ -397,6 +399,10 @@ div.title span.unfolded::before{
background-color: white; background-color: white;
border: 2px solid #E56400; border: 2px solid #E56400;
padding: 8px 6px; padding: 8px 6px;
overflow-y: hidden;
overflow-x: hidden;
box-sizing: border-box;
min-height: 50px;
} }
.clean-btn{ .clean-btn{
...@@ -409,29 +415,33 @@ div.title span.unfolded::before{ ...@@ -409,29 +415,33 @@ div.title span.unfolded::before{
color: #E56400; color: #E56400;
} }
.search-btn{ .search-btn {
/*width: 94px;*/
display: block; display: block;
flex-grow: 1;
background-color: #E56400; background-color: #E56400;
color: white; color: white;
padding: 16px; padding: 10px;
flex: 0 0 100px;
box-sizing: border-box;
height: 50px;
} }
.search-query-symbol{ .search-query-symbol{
font-size: 1.3em; font-size: 1.0em;
font-weight: bold; font-weight: bold;
} }
.add-buttons{ .add-buttons{
display: inline-block; display: inline-block;
width: 100%; width: 100%;
margin: 20px 0 0; margin: 0px 0 0;
background-color: #CFCFCF;
} }
.bool-buttons {
color: #555;
}
.bool-buttons button{ .bool-buttons button{
color: #777;
border: 1px solid #777; border: 1px solid #777;
background-color: #EEE; background-color: #EEE;
text-align: center; text-align: center;
...@@ -447,13 +457,13 @@ div.title span.unfolded::before{ ...@@ -447,13 +457,13 @@ div.title span.unfolded::before{
width: 140px; width: 140px;
padding: 15px 20px; padding: 15px 20px;
font-size: .9em; font-size: .9em;
color: #666; color: #555;
text-align: center; text-align: center;
} }
.tab-buttons button:last-child { /*.tab-buttons button:last-child {*/
border-right: none; /*border-right: none;*/
} /*}*/
.tab-buttons button#add-tab-selected{ .tab-buttons button#add-tab-selected{
background-color: #DDD; background-color: #DDD;
...@@ -484,6 +494,11 @@ div.title span.unfolded::before{ ...@@ -484,6 +494,11 @@ div.title span.unfolded::before{
border-bottom: 25px solid #DDD; border-bottom: 25px solid #DDD;
} }
.add-panel {
padding: 20px 10px;
background-color: #DDD;
}
.add-panel button{ .add-panel button{
background-color: #EEE; background-color: #EEE;
color: #777; color: #777;
...@@ -498,12 +513,12 @@ div.title span.unfolded::before{ ...@@ -498,12 +513,12 @@ div.title span.unfolded::before{
/* Formula and Material name boxes */ /* Formula and Material name boxes */
.FormulaBox,.MaterialNameBox{ .FormulaBox,
.MaterialNameBox{
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: left; text-align: left;
background-color: #DDD; background-color: #DDD;
padding: 20px 0;
} }
.FormulaBox input, .MaterialNameBox input{ .FormulaBox input, .MaterialNameBox input{
...@@ -517,7 +532,7 @@ div.title span.unfolded::before{ ...@@ -517,7 +532,7 @@ div.title span.unfolded::before{
width: 100%; width: 100%;
} }
.FormulaBox input{ .FormulaBox input[type=text]{
box-sizing: border-box; box-sizing: border-box;
width: 580px; width: 580px;
} }
...@@ -630,8 +645,7 @@ div.title span.unfolded::before{ ...@@ -630,8 +645,7 @@ div.title span.unfolded::before{
/* equivalent to view-box */ /* equivalent to view-box */
.filter-section-box{ .filter-section-box{
margin-bottom: 30px; margin-bottom: 20px;
/*background-color: white;*/
} }
.filter-section-box input[type="text"]{ .filter-section-box input[type="text"]{
box-sizing: border-box; box-sizing: border-box;
...@@ -641,16 +655,18 @@ div.title span.unfolded::before{ ...@@ -641,16 +655,18 @@ div.title span.unfolded::before{
} }
.filter-section-title{ .filter-section-title{
display: flex;
align-items: center;
justify-content: center;
color: white; padding: 10px 0; color: white; padding: 10px 0;
font-size: 12pt; font-size: 12pt;
text-align: center;
background-color: #E56400; background-color: #E56400;
padding: 10px;
} }
.filter-quantity-box{ .filter-quantity-box {
margin-bottom: 12px; margin-bottom: 12px;
padding: 0px 0px 4px 4px ; padding: 5px 15px;
} }
.filter-quantity-box > * { .filter-quantity-box > * {
...@@ -710,7 +726,8 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777); ...@@ -710,7 +726,8 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
#searchbar #searchline{ text-align: center; } #searchbar #searchline{ text-align: center; }
.search-option { .search-option {
padding: 10px 0px; padding-top: 10px;
padding-bottom: 0;
font-size: 0.85em; font-size: 0.85em;
} }
...@@ -759,9 +776,7 @@ img.remove-label{ cursor: pointer; } ...@@ -759,9 +776,7 @@ img.remove-label{ cursor: pointer; }
#elementable{width:690px; position: relative; #elementable{width:690px; position: relative;
padding: 0 26px;
margin: 0 auto 0; margin: 0 auto 0;
background-color: #DDD;
} }
.element-info{position: absolute; .element-info{position: absolute;
...@@ -780,8 +795,8 @@ img.remove-label{ cursor: pointer; } ...@@ -780,8 +795,8 @@ img.remove-label{ cursor: pointer; }
} }
#elementable table#pt-main{ #elementable table#pt-main{
padding-top: 20px; color: #333;
color: #333; border: 0; border: 0;
} }
#elementable table#pt-laac{ #elementable table#pt-laac{
...@@ -1416,6 +1431,20 @@ text.structure-viewer-legend-labels{ ...@@ -1416,6 +1431,20 @@ text.structure-viewer-legend-labels{
visibility: visible; visibility: visible;
} }
.composition {
}
#composition-title {
box-sizing: border-box;
height: 50px;
width: 120px;
}
.restricted-search-option {
margin-top: -20px;
margin-bottom: 10px;
}
/* /*
.tooltip { .tooltip {
visibility: hidden; visibility: hidden;
......
...@@ -240,6 +240,11 @@ class ElemenTable{ ...@@ -240,6 +240,11 @@ class ElemenTable{
</div>`;//'<div id="group-selectors">'; </div>`;//'<div id="group-selectors">';
tempHtml += `<div class="perm-tooltip search-option" style="margin-right: 10px">
<input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked>
<label for="allow-other-elements" class="perm-tooltip">Allow other elements</label>
<span class="tooltiptext">If selected, the returned materials may also contain other elements.</span>
</div>`;
tempHtml+= '</div>'; // ptWrapper tempHtml+= '</div>'; // ptWrapper
this.element.innerHTML= tempHtml; this.element.innerHTML= tempHtml;
......
...@@ -109,9 +109,31 @@ class FilterPanel { ...@@ -109,9 +109,31 @@ class FilterPanel {
this.fields.push(functionalTypeField) this.fields.push(functionalTypeField)
methodGroupBox.append(functionalTypeField.element); methodGroupBox.append(functionalTypeField.element);
const codeField = new AutocompleteField('Code', 'code_name'); const codeField = new AutocompleteField('Code', 'code_name');
this.fields.push(codeField) this.fields.push(codeField);
methodGroupBox.append(codeField.element); methodGroupBox.append(codeField.element);
// Restricted search checkbox: cannot be set as innerHTML
const container = document.createElement('div');
container.className = "filter-quantity-box";
const a = document.createElement('div');
a.className = "perm-tooltip search-option restricted-search-option";
const b = document.createElement('input');
b.id = "restricted-search";
b.name = "restricted-search";
b.type = "checkbox";
const c = document.createElement('label');
c["for"] = "restricted-search";
c.className = "perm-tooltip";
c.textContent = "Restrict to individual calculations";
const d = document.createElement('span');
d.className = "tooltiptext";
d.textContent = "If selected, the query will return materials that have individual calculations simultaneously matching your methodology and properties criteria."
a.append(b);
a.append(c);
a.append(d);
container.append(a);
this.element.append(container);
InfoSys.addToInfoSystem(this.element); InfoSys.addToInfoSystem(this.element);
// The value change event in fields is handled at container level (event delegation pattern) // The value change event in fields is handled at container level (event delegation pattern)
...@@ -132,8 +154,7 @@ class FilterPanel { ...@@ -132,8 +154,7 @@ class FilterPanel {
createPropsGroupBox(title){ createPropsGroupBox(title){
const element = document.createElement('div'); const element = document.createElement('div');
element.className = 'filter-section-box'; element.className = 'filter-section-box';
element.innerHTML = '<div class="filter-section-title">'+title+'</div>'; element.innerHTML = '<div class="filter-section-title"><div>'+title+'</div></div>';
return element; return element;
} }
...@@ -144,14 +165,16 @@ class FilterPanel { ...@@ -144,14 +165,16 @@ class FilterPanel {
this.fields.forEach( field => { this.fields.forEach( field => {
const values = field.getValues(); const values = field.getValues();
if (Array.isArray(values)){ console.log("===============")
console.log(values)
if (Array.isArray(values) && values.length > 0){
values.forEach( value => filterMap.set(value.fieldId, value.value)) values.forEach( value => filterMap.set(value.fieldId, value.value))
}else{ } else if (values && values.value && values.value.length > 0) {
if (values && values.value.length > 0) filterMap.set(values.fieldId, values.value);
filterMap.set(values.fieldId, values.value)
} }
}); });
//console.log('FilterPanel getValues:', filterMap); console.log("FILTERMAP")
console.log(filterMap)
return filterMap; return filterMap;
} }
......
...@@ -95,8 +95,9 @@ class MaterialList { ...@@ -95,8 +95,9 @@ class MaterialList {
if (page) reqJson.search_by = { page: page} if (page) reqJson.search_by = { page: page}
// Add the restricted option from the checkbox // Add the restricted option from the checkbox
let restrictedEl = document.getElementById('restricted-search'); //let restrictedEl = document.getElementById('restricted-search');
reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0'); //reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0');
reqJson.search_by.restricted = '0';
console.log('SEARCHING: ', reqJson ); console.log('SEARCHING: ', reqJson );
document.querySelector('#syntax-error').style.visibility = 'hidden'; document.querySelector('#syntax-error').style.visibility = 'hidden';
......
...@@ -57,28 +57,18 @@ class NewSearchMod { ...@@ -57,28 +57,18 @@ class NewSearchMod {
<div class="search-filter-side"> <div class="search-filter-side">
</div> </div>
<div class="search-main-side"> <div class="search-main-side">
<div class="search-box-placeholder" > </div> <div class="composition">
<div style="display: flex"> <div class="search-box-placeholder" > </div>
<div class="perm-tooltip search-option" style="margin-right: 10px"> <div class="add-buttons" >
<input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked> <div class="tab-buttons" style="width: 70%; display: inline-block">
<label for="allow-other-elements" class="perm-tooltip">Allow other elements</label> <button class="element-add-btn" id="add-tab-selected">Element<img class="search-fold-icon" src="img/unfolded.png"></button><button class="formula-add-btn">Formula<img class="search-fold-icon" src="img/unfolded.png"></button><button class="name-add-btn">Name<img class="search-fold-icon" src="img/unfolded.png"></button>
<span class="tooltiptext">If selected, the returned materials may also contain other elements.</span> </div>
</div> <div class="bool-buttons" style="width: 28%; display: inline-block" >
<div class="perm-tooltip search-option"> OR <span id="and-or-switch" ></span> AND
<input id="restricted-search" name="restricted-search" type="checkbox" > <button class="not-button">NOT</button>
<label for="restricted-search" class="perm-tooltip">Restrict to individual calculations</label> <button class="open-parentheses" >(</button>
<span class="tooltiptext">If selected, the query will return materials that have individual calculations matching all your search criteria.</span> <button class="close-parentheses">)</button>
</div> </div>
</div>
<div class="add-buttons" >
<div class="tab-buttons" style="width: 70%; display: inline-block">
<button class="element-add-btn" id="add-tab-selected">Element<img class="search-fold-icon" src="img/unfolded.png"></button><button class="formula-add-btn">Formula<img class="search-fold-icon" src="img/unfolded.png"></button><button class="name-add-btn">Name<img class="search-fold-icon" src="img/unfolded.png"></button>
</div>
<div class="bool-buttons" style="width: 28%; display: inline-block" >
OR <span id="and-or-switch" ></span> AND
<button class="not-button">NOT</button>
<button class="open-parentheses" >(</button>
<button class="close-parentheses">)</button>
</div> </div>
</div> </div>
<div class="add-box"> <div class="add-box">
...@@ -114,14 +104,6 @@ class NewSearchMod { ...@@ -114,14 +104,6 @@ class NewSearchMod {
this.searchBox.setSearchQueryChangeListener( () => { this.searchBox.setSearchQueryChangeListener( () => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch(); REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
}); });
this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
});
this.restrictedCheckbox = this.element.querySelector('#restricted-search');
this.restrictedCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
});
/* This button could be out of the search box because its functionality /* This button could be out of the search box because its functionality
is not part of it. It can also be removed eventually, if considered not necessary */ is not part of it. It can also be removed eventually, if considered not necessary */
...@@ -143,7 +125,7 @@ class NewSearchMod { ...@@ -143,7 +125,7 @@ class NewSearchMod {
this.addPanel= this.element.querySelector('.add-panel'); this.addPanel= this.element.querySelector('.add-panel');
let andOrSwitch = new SwitchComponent(util.IMAGE_DIR+'switch'); let andOrSwitch = new SwitchComponent(util.IMAGE_DIR+'switch_new');
this.element.querySelector('#and-or-switch').appendChild(andOrSwitch.element); this.element.querySelector('#and-or-switch').appendChild(andOrSwitch.element);
andOrSwitch.setListener( e => { andOrSwitch.setListener( e => {
this.searchBox.setBoolOperator( e ? 'AND' : 'OR'); this.searchBox.setBoolOperator( e ? 'AND' : 'OR');
...@@ -163,7 +145,7 @@ class NewSearchMod { ...@@ -163,7 +145,7 @@ class NewSearchMod {
this.searchBox.addParentheses(false); this.searchBox.addParentheses(false);
}); });
this.elementTable= new ElementTable(); this.elementTable = new ElementTable();
this.elementTable.setClickListener(elementArray => { this.elementTable.setClickListener(elementArray => {
this.searchBox.addElements(elementArray); this.searchBox.addElements(elementArray);
this.addMatNameButton.disabled = true; // Not always necessary but it simplifies the code this.addMatNameButton.disabled = true; // Not always necessary but it simplifies the code
...@@ -204,6 +186,10 @@ class NewSearchMod { ...@@ -204,6 +186,10 @@ class NewSearchMod {
this.addPanel.appendChild(this.elementTable.element); this.addPanel.appendChild(this.elementTable.element);
this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
});
this._events(); this._events();
} }
...@@ -284,7 +270,9 @@ class NewSearchMod { ...@@ -284,7 +270,9 @@ class NewSearchMod {
sendQuery() { sendQuery() {
//**** The optimade query must be formed from the search box and the properties selected //**** The optimade query must be formed from the search box and the properties selected
const searchBoxOptimadeQuery = this.searchBox.getOptimadeQuery(this.allowOtherElementsCheckbox.checked); const allowOtherElements = document.getElementById('allow-other-elements').checked;
console.log(allowOtherElements)
const searchBoxOptimadeQuery = this.searchBox.getOptimadeQuery(allowOtherElements);
const propsOptimadeQuery = getOptimadeQueryFromProps(this.filterPanel.getValues()); const propsOptimadeQuery = getOptimadeQueryFromProps(this.filterPanel.getValues());
const sep = (searchBoxOptimadeQuery !== '' && propsOptimadeQuery !== '' ? ' AND ' : ''); const sep = (searchBoxOptimadeQuery !== '' && propsOptimadeQuery !== '' ? ' AND ' : '');
//console.log(searchBoxOptimadeQuery) //console.log(searchBoxOptimadeQuery)
...@@ -508,8 +496,17 @@ class FormulaBox { ...@@ -508,8 +496,17 @@ class FormulaBox {
this.element.className = 'FormulaBox';// this.element.setAttribute("id",'formula-box'); this.element.className = 'FormulaBox';// this.element.setAttribute("id",'formula-box');
this.element.innerHTML= this.element.innerHTML=
` `
<input type="text" placeholder="Add formula to the search query above"> <div style="display: flex; flex-direction: column">
<button class="adding-formula-btn" disabled> Add to query </button> <div style="display: flex; flex-direction: row">
<input type="text" placeholder="Add formula to the search query above">
<button class="adding-formula-btn" disabled> Add to query </button>
</div>
<div class="perm-tooltip search-option" style="margin-right: 10px">
<input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked>
<label for="allow-other-elements" class="perm-tooltip">Allow other elements</label>
<span class="tooltiptext">If selected, the returned materials may also contain other elements.</span>
</div>
</div>
`; `;
this.formulaTextField = this.element.querySelector('input'); this.formulaTextField = this.element.querySelector('input');
this.formulaButton = this.element.querySelector('.adding-formula-btn'); this.formulaButton = this.element.querySelector('.adding-formula-btn');
......
...@@ -31,8 +31,6 @@ let Formula = require('./Formula.js'); ...@@ -31,8 +31,6 @@ let Formula = require('./Formula.js');
//// local utility functions //// local utility functions
function getTagHtml(tag, isFormula){ function getTagHtml(tag, isFormula){
return `<span class="search-label" data-el="${tag}" > return `<span class="search-label" data-el="${tag}" >
<img src="img/tag.svg" height="16px" class="remove-label"
style="vertical-align: bottom"/>
${isFormula ? util.getSubscriptedFormula(tag) : tag} ${isFormula ? util.getSubscriptedFormula(tag) : tag}
<img src="img/cross.svg" height="6px" class="remove-label" <img src="img/cross.svg" height="6px" class="remove-label"
style="vertical-align: middle; padding: 4px 3px 6px 5px;" /> style="vertical-align: middle; padding: 4px 3px 6px 5px;" />
...@@ -64,13 +62,15 @@ class SearchBox{ ...@@ -64,13 +62,15 @@ class SearchBox{
this.element.className = 'search-box'; this.element.className = 'search-box';
this.element.innerHTML = ` this.element.innerHTML = `
<button class="search-btn">Composition</button> <div id="composition-title" class="filter-section-title" style>
<div>Composition</div>
</div>
<div class="search-query-wrapper" > <div class="search-query-wrapper" >
<div id="syntax-error"> <div id="syntax-error">
<div>Invalid query syntax</div> <div>Invalid query syntax</div>
</div> </div>
<div class="search-query-box" style="float: left;"></div> <div class="search-query-box" style="float: left;"></div>
<button class="clean-btn" style="float: right;">Clear all</button> <button class="clean-btn" style="float: right;">Clear</button>
</div> </div>
<!-- this button should be out of the search box because its functionality <!-- this button should be out of the search box because its functionality
is not part of the search box, it's general for the search module is not part of the search box, it's general for the search module
......
Markdown is supported
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