From 8dc4d7a7b11188e939563beb1253c766414cc015 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Fri, 7 Jun 2019 16:12:19 -0400
Subject: shes CUTE

---
 src/client/views/SearchBox.scss | 17 ++++++++++++-
 src/client/views/SearchBox.tsx  | 55 +++++++++--------------------------------
 2 files changed, 28 insertions(+), 44 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index eff47393b..02b8f6a96 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -49,7 +49,7 @@
 #header {
     text-transform: uppercase;
     letter-spacing: 2px;
-    font-size: 100%;
+    font-size: 25;
     height: 40px;
 }
 
@@ -77,6 +77,21 @@
     }
 }
 
+.toggle-title{
+    display: flex;
+    align-items: center;
+    color: $light-color;
+    text-transform: uppercase;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 5px;
+
+    .toggle-option{
+        width: 100px;
+        text-align: center;
+    }
+}
+
 .toggle-bar{
     width: 100%;
     height: 50px;
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 7d2d8e547..3fca90522 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -38,9 +38,13 @@ export interface ToggleBarProps {
     //false = right, true = left
     // status: boolean;
     changeStatus(value: boolean): void;
+    optionOne: string;
+    optionTwo: string;
     //addDocTab(doc: Doc, location: string): void;
 }
 
+//TODO: justify content will align to specific side. Maybe do status passed in and out?
+
 @observer
 export class ToggleBar extends React.Component<ToggleBarProps>{
 
@@ -67,68 +71,33 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         }
         let totalWidth = (barwidth - togwidth - 10);
 
-        // this.timeline = anime.timeline({
-        //     autoplay: false,
-        //     loop: false,
-        //     direction: "normal",
-        //     complete:(anim: anime.AnimeInstance) => {
-        //         anim.pause();
-        //         console.log("finished!")
-        //     }
-        // });
-
-        // let test = anime({
-        //     targets: "",
-        //     opacity: 1
-        // })
-
         this.timeline.add({
             targets: this._toggleButton.current,
-            // autoplay: false,
             loop: false,
-            // direction: "normal",
             translateX: totalWidth,
             easing: "easeInOutQuad",
+            duration: 500
         });
     }
     
     @action.bound
     onclick() {
-        console.log("clicked")
         this._status = !this._status;
         this.timeline.play();
         this.timeline.reverse();
-        // if(this._status){
-        //     console.log("playing normally")
-        //     this.timeline.play()
-        // }
-        // else{
-        //     console.log("playing reverse")
-        //     this.timeline.reverse();
-        //     // this.timeline.pause()
-        //     // this.timeline.pause();
-        // }
-
     }
 
-    // @action.bound
-    // toggle = (animation: any, open: boolean) => {
-    //     if(open){
-    //         animation.play();
-    //         if(animation.reversed) {
-    //             animation.reverse();
-    //         }
-    //     } else{
-    //         animation.play();
-
-    //     }
-    // }
-
     render() {
         return (
+            <div>
+            <div className = "toggle-title">
+                <div className = "toggle-option">{this.props.optionOne}</div>
+                <div className = "toggle-option">{this.props.optionTwo}</div>
+            </div>
             <div className="toggle-bar" id="toggle-bar">
                 <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
             </div>
+            </div>
         );
     };
 }
@@ -331,7 +300,7 @@ export class SearchBox extends React.Component {
                         <div className="filter-form" id="header">Filter Search Results</div>
                         <div className="filter-form" id="option">
                             <div className="required-words">
-                                <ToggleBar changeStatus={this.handleWordQueryChange} />
+                                <ToggleBar optionOne = {"Include Any Keywords"} optionTwo = {"Include All Keywords"} changeStatus={this.handleWordQueryChange} />
                             </div>
                             <div className="type-of-node">
                                 temp for filtering by a type of node
-- 
cgit v1.2.3-70-g09d2