From 13e6b075154001ce33845a72454e3cd039a92670 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 24 Mar 2020 19:03:19 -0700
Subject: reaally  pretty  drop down menu functionality : )

---
 src/client/views/SearchDocBox.tsx      |   2 +-
 src/client/views/search/IconBar.scss   |   3 +-
 src/client/views/search/SearchBox.scss |  14 ++++-
 src/client/views/search/SearchBox.tsx  | 109 +++++++++++++++++++++++++++++++--
 4 files changed, 118 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx
index 5a76a882f..c57f9e737 100644
--- a/src/client/views/SearchDocBox.tsx
+++ b/src/client/views/SearchDocBox.tsx
@@ -411,7 +411,7 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
                 <ContentFittingDocumentView {...this.props}
                     Document={this.content}
                     getTransform={this.props.ScreenToLocalTransform}>
-                    s</ContentFittingDocumentView>
+                    </ContentFittingDocumentView>
                 <div
                     style={{
                         position: "absolute",
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index c6dc2a6cd..013dcd57e 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -2,8 +2,9 @@
 
 .icon-bar {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-evenly;
-    height: 35px;
+    height: auto;
     width: 100%;
     flex-direction: row-reverse;
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 176ed646d..1b36912d1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -91,9 +91,10 @@
     background: black;
     flex-direction: column;
     transform-origin: top;
-    border-bottom: solid grey 1px;
-    padding: 5px;
-    transition: height 0.5s ease, display 0.5s ease;
+    transition: height 0.3s ease, display 0.6s ease;
+    height:0px;
+    overflow:hidden;
+
 
     .filter-header {
         display: flex;
@@ -104,6 +105,9 @@
         transform-origin: top;
         justify-content: space-evenly;
         margin-bottom: 5px;
+        overflow:hidden;
+        transition:height 0.3s ease-out;
+
 
 
         .filter-item {
@@ -121,6 +125,10 @@
         padding-top: 5px;
         margin-left: 10px;
         margin-right: 10px;
+        overflow:hidden;
+        transition:height 0.3s ease-out;
+        height:0px;
+
     }
 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4f0ca5709..2e7e95b60 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, observable, runInAction, IReactionDisposer, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as rp from 'request-promise';
@@ -59,17 +59,23 @@ export class SearchBox extends React.Component {
 
         SearchBox.Instance = this;
         this.resultsScrolled = this.resultsScrolled.bind(this);
+        //reaction(()=>document.getElementById("node")?.scrollHeight,()=>{console.log("longer")})
+
     }
 
+    private _reactionDisposer?: IReactionDisposer;
+
     componentDidMount = () => {
         if (this.inputRef.current) {
             this.inputRef.current.focus();
             runInAction(() => {
                 this._searchbarOpen = true;
             });
+
         }
     }
 
+
     @action
     getViews = async (doc: Doc) => {
         const results = await SearchUtil.GetViewsOfDocument(doc);
@@ -369,6 +375,12 @@ export class SearchBox extends React.Component {
     @action.bound
     handleNodeChange = () => {
         this._nodeStatus = !this._nodeStatus;
+        if (this._nodeStatus){
+            this.expandSection("node")
+        }
+        else{
+            this.collapseSection("node")
+        }
     }
 
     @action.bound
@@ -376,8 +388,95 @@ export class SearchBox extends React.Component {
         this._keyStatus = !this._keyStatus;
     }
 
+    @action.bound  
+    handleFilterChange=() =>{
+        this._filterOpen=!this._filterOpen;
+        if (this._filterOpen){
+            this.expandSection("filterhead");
+            document.getElementById("filterhead")!.style.padding="5";        
+        }
+        else{
+            this.collapseSection("filterhead");
+                    
+
+        }
+    }
+    // @observable
+    // private menuHeight= 0;
+
+    @computed
+    get menuHeight(){
+        return document.getElementById("hi")?.clientHeight;
+    }
+
+
+    collapseSection(thing:string) {
+        let element= document.getElementById(thing)!;
+        // get the height of the element's inner content, regardless of its actual size
+        var sectionHeight = element.scrollHeight;
+        
+        // temporarily disable all css transitions
+        var elementTransition = element.style.transition;
+        element.style.transition = '';
+        
+        // on the next frame (as soon as the previous style change has taken effect),
+        // explicitly set the element's height to its current pixel height, so we 
+        // aren't transitioning out of 'auto'
+        requestAnimationFrame(function() {
+          element.style.height = sectionHeight + 'px';
+          element.style.transition = elementTransition;
+          
+          // on the next frame (as soon as the previous style change has taken effect),
+          // have the element transition to height: 0
+          requestAnimationFrame(function() {
+            element.style.height = 0 + 'px';
+            thing == "filterhead"? document.getElementById("filterhead")!.style.padding="0" : null;
+          });
+        });
+        
+        // mark the section as "currently collapsed"
+        element.setAttribute('data-collapsed', 'true');
+      }
+      
+      expandSection(thing:string) {
+        console.log("expand");
+        let element= document.getElementById(thing)!;
+        // get the height of the element's inner content, regardless of its actual size
+        var sectionHeight = element.scrollHeight;
+        
+        // have the element transition to the height of its inner content
+        let  temp = element.style.height;
+        element.style.height = sectionHeight + 'px';
+      
+        // when the next css transition finishes (which should be the one we just triggered)
+        element.addEventListener('transitionend', function handler(e) {
+          // remove this event listener so it only gets triggered once
+          console.log("autoset");
+          element.removeEventListener('transitionend', handler);
+          
+          // remove "height" from the element's inline styles, so it can return to its initial value
+          element.style.height="auto";
+          //element.style.height = undefined;
+        });
+        
+        // mark the section as "currently not collapsed"
+        element.setAttribute('data-collapsed', 'false');
+        
+      }
+
+      autoset(thing: string){
+        let element= document.getElementById(thing)!;
+        console.log("autoset");
+        element.removeEventListener('transitionend', function(e){});
+        
+        // remove "height" from the element's inline styles, so it can return to its initial value
+        element.style.height="auto";
+        //element.style.height = undefined;
+
+      }
 
     render() {
+
         return (
             <div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
                 <div className="searchBox-bar">
@@ -387,16 +486,16 @@ export class SearchBox extends React.Component {
                     <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                         className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
-                    <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => runInAction(() => this._filterOpen = !this._filterOpen)}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
+                    <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
                 </div>
 
-                <div className="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
-                    <div className="filter-header" style={this._filterOpen ? {} : { display: "none" }}>
+                <div id="filterhead" className="filter-form" >
+                    <div id="filterhead2" 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 className="filter-body" style={this._nodeStatus ? { display: "flex" } : { display: "none" }}>
+                    <div id="node" className="filter-body" style={this._nodeStatus ? {  } : { }}>
                         <IconBar />
                     </div>
                     <div style={this._keyStatus ? { display: "flex" } : { display: "none" }}>
-- 
cgit v1.2.3-70-g09d2