more settings ui + huge bugfixes with document dragging and selection

3 files changed, 28 insertions, 15 deletions

diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index bea8cc0a7..4f94139d9 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -123,16 +123,19 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     selected = {
         opacity: 1,
-        backgroundColor: "rgb(128, 128, 128)"
+        backgroundColor: "#121721",
+        //backgroundColor: "rgb(128, 128, 128)"
     };
 
     notSelected = {
         opacity: 0.2,
+        backgroundColor: "#121721",
     };
 
     hoverStyle = {
         opacity: 1,
-        backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
+        backgroundColor: "rgb(128, 128, 128)"
+        //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
     };
 
     @action.bound
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 1b36912d1..1559efe09 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -44,6 +44,10 @@
 
         &.searchBox-filter {
             align-self: stretch;
+            button:hover{
+                transform:scale(1.0);
+                background:"#121721";
+            }
         }
 
         &.searchBox-submit {
@@ -88,7 +92,7 @@
 
 .filter-form {
     position: relative;
-    background: black;
+    background: #121721;
     flex-direction: column;
     transform-origin: top;
     transition: height 0.3s ease, display 0.6s ease;
@@ -112,6 +116,8 @@
 
         .filter-item {
             position: relative;
+            border:1px solid grey;
+            border-radius: 16px;
 
         }
     }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 2e7e95b60..ae8261861 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -22,8 +22,11 @@ import { FieldView } from '../nodes/FieldView';
 
 library.add(faTimes);
 
+export interface SearchProps {
+    id:string;
+}
 @observer
-export class SearchBox extends React.Component {
+export class SearchBox extends React.Component<SearchProps> {
 
     @observable private _searchString: string = "";
     @observable private _resultsOpen: boolean = false;
@@ -260,7 +263,7 @@ export class SearchBox extends React.Component {
         }
         //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
         //return Docs.Create.SearchDocument(docs, { _width: 200, _height: 400, searchText: this._searchString, title: `Search Docs: "${this._searchString}"` });
-        return Docs.Create.QueryDocument({
+        return Docs.Create.QueryDocument({_autoHeight: true, title: "-typed text-"
         });
     }
 
@@ -376,10 +379,10 @@ export class SearchBox extends React.Component {
     handleNodeChange = () => {
         this._nodeStatus = !this._nodeStatus;
         if (this._nodeStatus){
-            this.expandSection("node")
+            this.expandSection(`node${this.props.id}`)
         }
         else{
-            this.collapseSection("node")
+            this.collapseSection(`node${this.props.id}`)
         }
     }
 
@@ -392,11 +395,11 @@ export class SearchBox extends React.Component {
     handleFilterChange=() =>{
         this._filterOpen=!this._filterOpen;
         if (this._filterOpen){
-            this.expandSection("filterhead");
-            document.getElementById("filterhead")!.style.padding="5";        
+            this.expandSection(`filterhead${this.props.id}`);
+            document.getElementById(`filterhead${this.props.id}`)!.style.padding="5";        
         }
         else{
-            this.collapseSection("filterhead");
+            this.collapseSection(`filterhead${this.props.id}`);
                     
 
         }
@@ -411,6 +414,7 @@ export class SearchBox extends React.Component {
 
 
     collapseSection(thing:string) {
+        let id = this.props.id;
         let element= document.getElementById(thing)!;
         // get the height of the element's inner content, regardless of its actual size
         var sectionHeight = element.scrollHeight;
@@ -430,7 +434,7 @@ export class SearchBox extends React.Component {
           // have the element transition to height: 0
           requestAnimationFrame(function() {
             element.style.height = 0 + 'px';
-            thing == "filterhead"? document.getElementById("filterhead")!.style.padding="0" : null;
+            thing == `filterhead${id}`? document.getElementById(`filterhead${id}`)!.style.padding="0" : null;
           });
         });
         
@@ -478,7 +482,7 @@ export class SearchBox extends React.Component {
     render() {
 
         return (
-            <div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
+            <div className="searchBox-container">
                 <div className="searchBox-bar">
                     <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => this._searchString ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
@@ -489,13 +493,13 @@ export class SearchBox extends React.Component {
                     <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
                 </div>
 
-                <div id="filterhead" className="filter-form" >
-                    <div id="filterhead2" className="filter-header" style={this._filterOpen ? { } : { }}>
+                <div id={`filterhead${this.props.id}`} className="filter-form" >
+                    <div id={`filterhead2${this.props.id}`} className="filter-header" style={this._filterOpen ? { } : { }}>
                         <button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button>
                         <button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button>
                         <button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button>
                     </div>
-                    <div id="node" className="filter-body" style={this._nodeStatus ? {  } : { }}>
+                    <div id={`node${this.props.id}`} className="filter-body" style={this._nodeStatus ? {  } : { }}>
                         <IconBar />
                     </div>
                     <div style={this._keyStatus ? { display: "flex" } : { display: "none" }}>