Commit c401f678 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Refactored the invalid syntax visuals, added possibility to collapse the...

Refactored the invalid syntax visuals, added possibility to collapse the currently shown tab, restyled the seach filter selected with AutoCompleteMultiselectTextfield, disabled panel fading based on hover, made the filter panel on the left update the search automatically, now the initial view loads all results by default.
parent 196bffa4
Pipeline #97356 skipped with stage
This diff is collapsed.
...@@ -151,7 +151,6 @@ ...@@ -151,7 +151,6 @@
} }
#flagging-form-popup button{ #flagging-form-popup button{
/*width: 200px;*/
margin: 20px 0 10px; margin: 20px 0 10px;
background-color: #EEE; background-color: #EEE;
color: #777; color: #777;
...@@ -393,8 +392,10 @@ div.title span.unfolded::before{ ...@@ -393,8 +392,10 @@ div.title span.unfolded::before{
justify-content: center; /*space-between;*/ justify-content: center; /*space-between;*/
} }
.search-query-wrapper{ .search-query-wrapper{
position: relative;
flex-grow: 14; flex-grow: 14;
background-color: white; border: 2px solid #E56400; background-color: white;
border: 2px solid #E56400;
padding: 8px 6px; padding: 8px 6px;
} }
...@@ -426,13 +427,7 @@ div.title span.unfolded::before{ ...@@ -426,13 +427,7 @@ div.title span.unfolded::before{
.add-buttons{ .add-buttons{
display: inline-block; display: inline-block;
width: 100%; width: 100%;
/*background-color: #DDD;
padding: 20px 0;
*/
margin: 20px 0 0; margin: 20px 0 0;
} }
.bool-buttons button{ .bool-buttons button{
...@@ -444,30 +439,33 @@ div.title span.unfolded::before{ ...@@ -444,30 +439,33 @@ div.title span.unfolded::before{
.tab-buttons button{ .tab-buttons button{
display: inline-block; display: inline-flex;
background-color: #DDD;/*EEE;*/ align-items: center;
width: 115px; justify-content: space-between;
padding: 10px 30px; border-right: 1px solid #BBB;
margin: 0 10px; background-color: #CFCFCF;
width: 140px;
padding: 15px 20px;
font-size: .9em; font-size: .9em;
color: #777; color: #666;
border: 1px solid #777;
text-align: center; text-align: center;
} }
.tab-buttons button:last-child {
border-right: none;
}
.tab-buttons button#add-tab-selected{ .tab-buttons button#add-tab-selected{
background-color: #DDD;
color: #E56400; color: #E56400;
border-color: #E56400;
font-weight: bold; font-weight: bold;
} }
.tab-buttons button:disabled{ .tab-buttons button:disabled{
color: #BBB; color: #AAA;
border-color: #BBB;
cursor: default; cursor: default;
} }
.triangle-container{ .triangle-container{
width: 115px; width: 115px;
display: inline-block; display: inline-block;
...@@ -500,12 +498,12 @@ div.title span.unfolded::before{ ...@@ -500,12 +498,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: 40px 0; padding: 20px 0;
} }
.FormulaBox input, .MaterialNameBox input{ .FormulaBox input, .MaterialNameBox input{
...@@ -521,7 +519,7 @@ div.title span.unfolded::before{ ...@@ -521,7 +519,7 @@ div.title span.unfolded::before{
.FormulaBox input{ .FormulaBox input{
box-sizing: border-box; box-sizing: border-box;
width: 450px; width: 580px;
} }
/* /*
...@@ -553,6 +551,8 @@ div.title span.unfolded::before{ ...@@ -553,6 +551,8 @@ div.title span.unfolded::before{
} }
.AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div { .AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div {
display: flex;
align-items: center;
padding: 2px 10px 2px 10px; padding: 2px 10px 2px 10px;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
...@@ -564,24 +564,29 @@ div.title span.unfolded::before{ ...@@ -564,24 +564,29 @@ div.title span.unfolded::before{
.AutocompleteMultiselectTextfield-selected-box{ .AutocompleteMultiselectTextfield-selected-box{
padding: 3px; padding-top: 5px;
} }
.selectedItemLabel{ .selectedItemLabel{
display: inline-block; display: inline-flex;
border-left: 1px solid #E56400;border-right: 1px solid #E56400; align-items: center;
color: #E56400; border-radius: 10px;
/*box-shadow: 1px 1px 2px #BBB;*/ border: 1px solid #E56400;
border-radius: 3px; height: 1.2rem;
padding: 1px 4px; padding: 4px 8px;
margin-right: 8px; margin-top: 3px; margin-right: 8px;
margin-top: 8px;
cursor: pointer; cursor: pointer;
} }
.selectedItemLabel>img{
margin-left: 0.5rem;
}
/* Material name autocomplete */ /* Material name autocomplete */
.material-name-autocomplete-textfield{ .material-name-autocomplete-textfield{
width: 450px; width: 580px;
} }
.material-name-autocomplete-dropdown{ .material-name-autocomplete-dropdown{
...@@ -592,7 +597,7 @@ div.title span.unfolded::before{ ...@@ -592,7 +597,7 @@ div.title span.unfolded::before{
/* Autocomplete multiselect */ /* Autocomplete multiselect */
.AutocompleteMultiselectTextfield-dropdown { .AutocompleteMultiselectTextfield-dropdown {
width: 210px; width: 200px;
background-color: white; background-color: white;
box-shadow: 0 1px 2px #E56400; box-shadow: 0 1px 2px #E56400;
} }
...@@ -626,6 +631,7 @@ div.title span.unfolded::before{ ...@@ -626,6 +631,7 @@ div.title span.unfolded::before{
/*background-color: white;*/ /*background-color: white;*/
} }
.filter-section-box input[type="text"]{ .filter-section-box input[type="text"]{
box-sizing: border-box;
width: 200px; width: 200px;
padding: 6px; padding: 6px;
border: 1px solid #DDD; border: 1px solid #DDD;
...@@ -771,7 +777,7 @@ img.remove-label{ cursor: pointer; } ...@@ -771,7 +777,7 @@ img.remove-label{ cursor: pointer; }
} }
#elementable table#pt-main{ #elementable table#pt-main{
padding-top: 25px; padding-top: 20px;
color: #333; border: 0; color: #333; border: 0;
} }
...@@ -847,10 +853,15 @@ img.remove-label{ cursor: pointer; } ...@@ -847,10 +853,15 @@ img.remove-label{ cursor: pointer; }
div#specialRows{margin: 20px 40px;} div#specialRows{margin: 20px 40px;}
.legend{ text-align: center; padding: 16px 0;} .legend {
text-align: center;
padding-top: 16px;
padding-bottom: 20px;
}
.legend div{ .legend div{
display: inline-block; color: black; display: inline-block; color: black;
padding: 2px 12px; margin: 4px 0; padding: 2px 12px;
margin: 4px 0;
} }
.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/ .MaterialList{ /*width: 690px; margin: 0 auto 80px;*/
...@@ -1373,6 +1384,35 @@ text.structure-viewer-legend-labels{ ...@@ -1373,6 +1384,35 @@ text.structure-viewer-legend-labels{
font-size: 16px; font-size: 16px;
} }
#syntax-error{
visibility: hidden;
display: flex;
align-items: center;
position: absolute;
height: 1.5rem;
color: white;
background-color: #E56400;
left: -2px;
bottom: 100%;
padding: 0.1rem 0.5rem;
}
.value-checkbox {
margin-right: 0.5rem;
}
.tab-buttons>button>img.search-fold-icon {
display: inline-block;
width: 15px;
height: 15px;
visibility: hidden;
pointer-events: none;
}
.tab-buttons>button#add-tab-selected>img.search-fold-icon {
visibility: visible;
}
/* /*
.tooltip { .tooltip {
visibility: hidden; visibility: hidden;
......
...@@ -260,15 +260,9 @@ PubSub.subscribe('show-search', search => { ...@@ -260,15 +260,9 @@ PubSub.subscribe('show-search', search => {
titleElement.innerHTML = 'NOMAD Encyclopedia - Search'; titleElement.innerHTML = 'NOMAD Encyclopedia - Search';
breadcrumb.setState('search', search); breadcrumb.setState('search', search);
if (search === undefined) {
//LoadingPopup.reset();
searchMod.showSearchPage();
} else if (search === 'results') {
searchMod.showResultsPage();
}
showModuleDOM(searchMod.element); showModuleDOM(searchMod.element);
searchMod.sendQuery();
}); });
......
...@@ -34,8 +34,8 @@ class AutocompleteMultiselectTextfield { ...@@ -34,8 +34,8 @@ class AutocompleteMultiselectTextfield {
this.element.innerHTML = ` this.element.innerHTML = `
<input type="text" placeholder="${placeholder}" /> <input type="text" placeholder="${placeholder}" />
<div class="AutocompleteMultiselectTextfield-selected-box"></div>
<div class="AutocompleteMultiselectTextfield-dropdown ${this.id}-autocomplete-multiselect-dropdown"></div> <div class="AutocompleteMultiselectTextfield-dropdown ${this.id}-autocomplete-multiselect-dropdown"></div>
<div class="AutocompleteMultiselectTextfield-selected-box"></div>
`; `;
this.input = this.element.querySelector('input'); this.input = this.element.querySelector('input');
...@@ -144,7 +144,7 @@ class AutocompleteMultiselectTextfield { ...@@ -144,7 +144,7 @@ class AutocompleteMultiselectTextfield {
function generateListItem(value, inputText, present) { function generateListItem(value, inputText, present) {
const listItem = document.createElement("div"); const listItem = document.createElement("div");
let innerHTML = `<input type="checkbox" data-value="${value}" ${present ? 'checked' : ''}>`; let innerHTML = `<input class="value-checkbox" type="checkbox" data-value="${value}" ${present ? 'checked' : ''}>`;
if (inputText){ if (inputText){
const pos = value.toUpperCase().indexOf(inputText.toUpperCase()); // console.log('pos', pos) const pos = value.toUpperCase().indexOf(inputText.toUpperCase()); // console.log('pos', pos)
innerHTML += innerHTML +=
...@@ -197,7 +197,14 @@ class AutocompleteMultiselectTextfield { ...@@ -197,7 +197,14 @@ class AutocompleteMultiselectTextfield {
const label = document.createElement('span'); const label = document.createElement('span');
label.className = 'selectedItemLabel'; label.className = 'selectedItemLabel';
label.dataset.value = value; label.dataset.value = value;
label.innerHTML = `${value} ❌`; const labelText = document.createElement('div');
labelText.textContent = `${value}`;
const labelImage = document.createElement('img');
labelImage.src = 'img/cross-maroon.svg'
labelImage.width = 10
labelImage.height = 10
label.appendChild(labelText);
label.appendChild(labelImage);
return label; return label;
} }
} }
......
...@@ -99,6 +99,7 @@ class MaterialList { ...@@ -99,6 +99,7 @@ class MaterialList {
reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0'); reqJson.search_by.restricted = (restrictedEl.checked ? '1' : '0');
console.log('SEARCHING: ', reqJson ); console.log('SEARCHING: ', reqJson );
document.querySelector('#syntax-error').style.visibility = 'hidden';
fetch(util.getSearchURL(), { fetch(util.getSearchURL(), {
method: 'POST', method: 'POST',
headers: {'Content-Type': 'application/json;charset=utf-8'}, headers: {'Content-Type': 'application/json;charset=utf-8'},
...@@ -115,17 +116,12 @@ class MaterialList { ...@@ -115,17 +116,12 @@ class MaterialList {
this.visible = true; this.visible = true;
this._render(); this._render();
/* Go to the material page straightaway - Not wanted fro now
if (result.results.length === 1){
const onlyMat = this.matMap.values().next().value[0];
util.setBrowserHashPath('material', onlyMat.material_id);
} */
LoadingPopup.hide();
}) })
.catch(error => { .catch(error => {
document.querySelector('.user-msg-box').innerHTML = 'Query expression NOT valid'; document.querySelector('#syntax-error').style.visibility = 'visible';
})
.finally(() => {
LoadingPopup.hide();
}); });
...@@ -144,16 +140,14 @@ class MaterialList { ...@@ -144,16 +140,14 @@ class MaterialList {
_render(){ _render(){
this.element.style.display = this.visible ? '' : 'none'; this.element.style.display = this.visible ? '' : 'none';
if (this.visible) {
if (this.visible){
this.noResultsBox.style.display = this.noResults ? '' : 'none'; this.noResultsBox.style.display = this.noResults ? '' : 'none';
this.matListWrapper.style.display = this.noResults ? 'none' : ''; this.matListWrapper.style.display = this.noResults ? 'none' : '';
this.matListContainer.updateList(this.matMap); this.matListContainer.updateList(this.matMap);
document.querySelector('.user-msg-box').innerHTML = this.noResults ? 'No search results' : 'See result list below'; //document.querySelector('.user-msg-box').innerHTML = this.noResults ? 'No search results' : 'See result list below';
}else } else {
document.querySelector('.user-msg-box').innerHTML = ''; //document.querySelector('.user-msg-box').innerHTML = '';
}
} }
......
...@@ -35,7 +35,9 @@ let FilterPanel = require('./FilterPanel.view.js'); ...@@ -35,7 +35,9 @@ let FilterPanel = require('./FilterPanel.view.js');
let SwitchComponent = require('../common/SwitchComponent.js'); let SwitchComponent = require('../common/SwitchComponent.js');
const REACTIVE_SEARCH = false; const REACTIVE_SEARCH_RIGHT = false; // Whether the right panel uses reactive search
const REACTIVE_SEARCH_LEFT = true; // Whether the left panel uses reactive search
const INVALIDATE_RESULTS = false; // Whether the search results are invalidated upon changing search criteria
function replaceDashes(s){ function replaceDashes(s){
return s.split('-').join('_'); return s.split('-').join('_');
...@@ -46,9 +48,8 @@ class NewSearchMod { ...@@ -46,9 +48,8 @@ class NewSearchMod {
constructor() { constructor() {
this.userGuidance = true; // can enabled/disabled this.userGuidance = true; // can enabled/disabled
this.searchFilters = []; this.searchFilters = [];
this.isVisible = true;
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.setAttribute("id",'search-module'); this.element.setAttribute("id",'search-module');
this.element.innerHTML= this.element.innerHTML=
...@@ -85,13 +86,9 @@ class NewSearchMod { ...@@ -85,13 +86,9 @@ class NewSearchMod {
<span class="tooltiptext">If selected, the query will return materials that have individual calculations matching all your search criteria.</span> <span class="tooltiptext">If selected, the query will return materials that have individual calculations matching all your search criteria.</span>
</div> </div>
</div> </div>
<div class="add-buttons" > <div class="add-buttons" >
<div class="tab-buttons" style="width: 70%; display: inline-block"> <div class="tab-buttons" style="width: 70%; display: inline-block">
<button class="element-add-btn" id="add-tab-selected" style="margin-left: 50px">Element</button> <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>
<button class="formula-add-btn" style="padding: 10px 20px;" >Formula</button>
<button class="name-add-btn" >Name</button>
</div> </div>
<div class="bool-buttons" style="width: 28%; display: inline-block" > <div class="bool-buttons" style="width: 28%; display: inline-block" >
OR <span id="and-or-switch" ></span> AND OR <span id="and-or-switch" ></span> AND
...@@ -101,32 +98,17 @@ class NewSearchMod { ...@@ -101,32 +98,17 @@ class NewSearchMod {
<!--<input type="checkbox" name="and-or" class="not-symbol-btn" />NOT--> <!--<input type="checkbox" name="and-or" class="not-symbol-btn" />NOT-->
</div> </div>
</div> </div>
<div class="add-box"> <div class="add-box">
<div style="width: 70%; display: inline-block;">
<div class="triangle-container" style="margin-left: 50px;">
<div class="triangle element-tri" style="visibility: visible"></div>
</div>
<div class="triangle-container" >
<div class="triangle formula-tri" style="visibility: hidden"></div>
</div>
<div class="triangle-container" >
<div class="triangle name-tri" style="visibility: hidden"></div>
</div>
</div>
<div class="add-panel"> <div class="add-panel">
</div> </div>
</div> </div>
<div class="results-panel"> <!-- style="display: none"--> <div class="results-panel"> <!-- style="display: none"-->
</div> </div>
</div> <!-- search-main-side --> </div> <!-- search-main-side -->
`; `;
this.filterSidePanel = this.element.querySelector('.search-filter-side'); this.filterSidePanel = this.element.querySelector('.search-filter-side');
this.addBox = this.element.querySelector('.add-box');
this.searchBox = new SearchBox(); this.searchBox = new SearchBox();
this.searchBox.setBoolOperator('AND'); this.searchBox.setBoolOperator('AND');
...@@ -147,16 +129,18 @@ class NewSearchMod { ...@@ -147,16 +129,18 @@ class NewSearchMod {
this.searchBox.setSearchQueryChangeListener( () => { this.searchBox.setSearchQueryChangeListener( () => {
REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch(); REACTIVE_SEARCH_RIGHT ? this.sendQuery() : null;
//REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
}); });
this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements'); this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
this.allowOtherElementsCheckbox.addEventListener( 'change', e => { this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch(); REACTIVE_SEARCH_RIGHT ? this.sendQuery() : null;
//REACTIVE_SEARCH_RIGHT ? this.sendQuery() : this.materialList.invalidateSearch();
}); });
this.restrictedCheckbox = this.element.querySelector('#restricted-search'); this.restrictedCheckbox = this.element.querySelector('#restricted-search');
this.restrictedCheckbox.addEventListener( 'change', e => { this.restrictedCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH ? this.sendQuery() : this.materialList.invalidateSearch(); REACTIVE_SEARCH_RIGHT ? this.sendQuery() : null;
//REACTIVE_SEARCH_RIGHT ? this.sendQuery() : 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
...@@ -164,12 +148,18 @@ class NewSearchMod { ...@@ -164,12 +148,18 @@ class NewSearchMod {
this.searchButton = this.searchBox.getSearchButtonElement(); this.searchButton = this.searchBox.getSearchButtonElement();
this.searchButton.addEventListener( 'click', e => { this.searchButton.addEventListener( 'click', e => {
this.sendQuery(); this.sendQuery();
this.addBox.style.display = 'none';
this.isVisible = false;
const icon = this.currentTabElement.querySelector('.search-fold-icon')
icon.src = "img/folded.png";
}); });
this.addButtonsBox= this.element.querySelector('.add-buttons'); this.addButtonsBox= this.element.querySelector('.add-buttons');
this.addElementButton = this.addButtonsBox.querySelector('.element-add-btn'); this.addElementButton = this.addButtonsBox.querySelector('.element-add-btn');
this.addFormulaButton = this.addButtonsBox.querySelector('.formula-add-btn'); this.addFormulaButton = this.addButtonsBox.querySelector('.formula-add-btn');
this.addMatNameButton = this.addButtonsBox.querySelector('.name-add-btn'); this.addMatNameButton = this.addButtonsBox.querySelector('.name-add-btn');
this.currentTabElement = this.addElementButton;
this.currentTab = 'element';
this.addPanel= this.element.querySelector('.add-panel'); this.addPanel= this.element.querySelector('.add-panel');
...@@ -229,14 +219,14 @@ class NewSearchMod { ...@@ -229,14 +219,14 @@ class NewSearchMod {
this.filterSidePanel.appendChild(this.filterPanel.element); this.filterSidePanel.appendChild(this.filterPanel.element);