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