end of day 6/20, filter form not reopening correctly

5 files changed, 43 insertions, 11 deletions

diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 24c404892..9f0b75887 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -37,9 +37,6 @@ export class CheckBox extends React.Component<CheckBoxProps>{
             autoplay: false,
             direction: "normal",
         });
-
-        // console.log(this.props.getStatus())
-        // console.log(this.props.getStatus)
     }
 
     componentDidMount = () => {
@@ -71,7 +68,7 @@ export class CheckBox extends React.Component<CheckBoxProps>{
                         this.props.parent.resetCounter++;
                         if (this.props.parent.resetCounter === this.props.numCount) {
                             this.props.parent.resetCounter = 0;
-                            this.props.parent.resetCounter = false;
+                            this.props.parent.resetBoolean = false;
                         }
                     });
                 }
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
index 5e1f4effc..8d5ab96e7 100644
--- a/src/client/views/search/CollectionFilters.scss
+++ b/src/client/views/search/CollectionFilters.scss
@@ -16,4 +16,5 @@
     display: grid;
     grid-template-columns: 50% 50%;
     float: right;
+    opacity: 0;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index 8d1aa1294..a5e479567 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -7,6 +7,7 @@ import { Keys } from './SearchBox';
 import "./SearchBox.scss";
 import "./CollectionFilters.scss";
 import { FieldFilters } from './FieldFilters';
+import * as anime from 'animejs';
 
 interface CollectionFilterProps {
     collectionStatus: boolean;
@@ -23,27 +24,59 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
 
     @observable public resetBoolean = false;
     @observable public resetCounter: number = 0;
+    @observable collectionsSelected = this.props.collectionStatus;
+    @observable timeline: anime.AnimeTimelineInstance;
+    @observable ref: any;
 
-    constructor(props:CollectionFilterProps){
+    constructor(props: CollectionFilterProps) {
         super(props);
         CollectionFilters.Instance = this;
+        this.ref = React.createRef();
+
+        this.timeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "reverse",
+        });
+    }
+
+    componentDidMount = () => {
+        this.timeline.add({
+            targets: this.ref.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 1,
+        });
     }
 
+    @action.bound
     resetCollectionFilters() {
         this.resetBoolean = true;
     }
 
+    @action.bound
+    updateColStat(val: boolean) {
+        this.props.updateCollectionStatus(val);
+
+        if (this.collectionsSelected !== val) {
+            this.timeline.play();
+            this.timeline.reverse();
+        }
+
+        this.collectionsSelected = val;
+    }
+
     render() {
         return (
             <div>
                 <div className='collection-title'>Search in current collections</div>
                 <div className="collection-filters">
                     <div className="collection-filters main">
-                        <CheckBox default = {false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.props.updateCollectionStatus} originalStatus={this.props.collectionStatus} />
+                        <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} />
                     </div>
-                    <div className="collection-filters optional">
-                        <CheckBox default = {true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
-                        <CheckBox default = {true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
+                    <div className="collection-filters optional" ref={this.ref}>
+                        <CheckBox default={true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
+                        <CheckBox default={true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 486ec9a93..3b96e3922 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -84,7 +84,8 @@
 }
 
 .required-words{
-    height: 110px;
+    display: inline-block;
+    width: 100%;
 }
 
 .filter-div{
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 3a262709d..633a194fe 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -10,7 +10,7 @@
     padding: 5px;
 
     .toggle-option {
-        width: 100px;
+        width: 50%;
         text-align: center;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;