things appear to be working

3 files changed, 228 insertions, 179 deletions

diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index 41bd83dc1..2cde14aa7 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -18,8 +18,8 @@
 }
 
 .type-icon {
-    height: 50px;
-    width: 50px;
+    height: 45px;
+    width: 45px;
     color: $light-color;
     border-radius: 50%;
     display: flex;
@@ -30,22 +30,22 @@
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     font-size: 2em;
-    position: absolute;
+    // position: absolute;
 }
 
-.ban-icon {
-    width: 50px;
-    height: 50px;
-    color: $alt-accent;
-    opacity: 0;
-    position: absolute;
-    float: right;
-
-    .fontawesome-icon {
-        height: 100%;
-        width: 100%;
-    }
-}
+// .ban-icon {
+//     width: 50px;
+//     height: 50px;
+//     color: $alt-accent;
+//     opacity: 0;
+//     position: absolute;
+//     float: right;
+
+//     .fontawesome-icon {
+//         height: 100%;
+//         width: 100%;
+//     }
+// }
 
 // .type-icon.selected.add {
 //     background-color: $alt-accent;
@@ -63,8 +63,8 @@
 // }
 
 .fontawesome-icon {
-    height: 28px;
-    width: 28px;
+    height: 24px;
+    width: 24px;
 }
 
 .filter-description{
@@ -73,7 +73,7 @@
 
 .type-icon:hover {
     transform: scale(1.1);
-    background-color: $alt-accent;
+    background-color: $darker-alt-accent;
     opacity: 1;
 
     +.filter-description {
@@ -95,9 +95,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 50px;
-    height: 50px;
-    position: relative;
+    width: 45px;
+    height: 60px;
+    // position: relative;
 }
 
 .filter-description {
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index fca6c01d7..b4656f4c5 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -5,7 +5,7 @@ import "./SearchBox.scss";
 import "./IconBar.scss";
 import * as anime from 'animejs';
 import { DocTypes } from '../../documents/Documents';
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library, icon } from '@fortawesome/fontawesome-svg-core';
 import * as _ from "lodash";
@@ -40,10 +40,12 @@ export class IconBar extends React.Component<IconBarProps> {
     
     allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
     @observable typesToFind: string[];
-    @observable selectedItems: string[] = [];
+    // @observable selectedItems: string[] = [];
     @observable public ResetClicked: boolean = false;
+    @observable public SelectAllClicked: boolean = false;
     public Reset: number = 0;
-    @observable activeType = "none";
+    public Select: number = 0;
+    // @observable activeType = "none";
 
     constructor(props: IconBarProps) {
         super(props);
@@ -63,49 +65,62 @@ export class IconBar extends React.Component<IconBarProps> {
 
     @action.bound
     resetSelf = () => {
-        // this.ResetClicked = true;
-        this.typesToFind = this.allIcons;
-        this.selectedItems = [];
-        this.activeType = "none";
-        console.log("resetting")
+        this.ResetClicked = true;
+        this.typesToFind = [];
+        // this.selectedItems = [];
+        // this.activeType = "none";
+        // console.log("resetting")
     }
 
     @action.bound
-    getActiveType() {
-        return this.activeType;
+    selectAll = () => {
+        this.SelectAllClicked = true;
+        this.typesToFind = this.allIcons;
     }
 
-    @action.bound
-    updateActiveType(type: string) {
-        this.resetSelf();
-        this.activeType = type;
-    }
+    // @action.bound
+    // getActiveType() {
+    //     return this.activeType;
+    // }
 
-    @action.bound
-    updateSelectedList(type: string){
-        if(this.selectedItems.indexOf(type) === -1){
-            this.selectedItems.push(type);
-        }
-        else{
-            _.pull(this.selectedItems, type);
-        }
-    }
+    // @action.bound
+    // updateActiveType(type: string) {
+    //     this.resetSelf();
+    //     this.activeType = type;
+    // }
+
+    // @action.bound
+    // updateSelectedList(type: string){
+    //     if(this.selectedItems.indexOf(type) === -1){
+    //         this.selectedItems.push(type);
+    //     }
+    //     else{
+    //         _.pull(this.selectedItems, type);
+    //     }
+    // }
 
     render() {
         return (
             <div>
                 <div className="filter icon-title">Filter by type of node</div>
                 <div className="filter icon-bar">
+                <div className="filter type-outer">
+                        <div className={"type-icon none not-selected"}
+                            onClick={this.selectAll}>
+                            <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
+                        </div>
+                        <div className="filter-description">Select All</div>
+                    </div>
+                    {this.allIcons.map((type: string) =>
+                        <IconButton type={type} active={this.typesToFind.indexOf(type) !== -1} getList={this.getList} updateList={this.updateList} />
+                    )}
                     <div className="filter type-outer">
                         <div className={"type-icon none not-selected"}
                             onClick={this.resetSelf}>
-                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+                            <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
                         </div>
                         <div className="filter-description">Clear</div>
                     </div>
-                    {this.allIcons.map((type: string) =>
-                        <IconButton getActiveType = {this.getActiveType} updateSelectedList= {this.updateSelectedList} type={type} changeActiveType = {this.updateActiveType} active={this.selectedItems.indexOf(type) !== -1} getList={this.getList} updateList={this.updateList} />
-                    )}
                 </div>
             </div>
         );
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 129348b91..71f1b7f0f 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -28,22 +28,23 @@ interface IconButtonProps {
     type: string;
     getList(): string[];
     updateList(list: string[]): void;
-    updateSelectedList(type: string): void;
+    // updateSelectedList(type: string): void;
     active: boolean;
-    getActiveType(): string;
-    changeActiveType(value: string): void;
+    // getActiveType(): string;
+    // changeActiveType(value: string): void;
 }
 
 @observer
 export class IconButton extends React.Component<IconButtonProps>{
 
     @observable isSelected: boolean = this.props.active;
-    @observable removeType = false;
+    // @observable removeType = false;
     @observable hover = false;
-    @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
-    @observable isAdded: boolean = (this.props.getActiveType() === "add");
+    // @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
+    // @observable isAdded: boolean = (this.props.getActiveType() === "add");
 
-    private _reactionDisposer?: IReactionDisposer;
+    private _resetReaction?: IReactionDisposer;
+    private _selectAllReaction?: IReactionDisposer;
 
     static Instance: IconButton;
     constructor(props: IconButtonProps) {
@@ -52,12 +53,11 @@ export class IconButton extends React.Component<IconButtonProps>{
     }
 
     componentDidMount = () => {
-        this._reactionDisposer = reaction(
+        this._resetReaction = reaction(
             () => IconBar.Instance.ResetClicked,
             () => {
                 if (IconBar.Instance.ResetClicked) {
-                    console.log("running")
-                    this.reset()
+                    this.reset();
                     IconBar.Instance.Reset++;
                     if (IconBar.Instance.Reset === 9) {
                         IconBar.Instance.Reset = 0;
@@ -65,39 +65,51 @@ export class IconButton extends React.Component<IconButtonProps>{
                     }
                 }
             },
-            {fireImmediately: true}
+        )
+        this._selectAllReaction = reaction(
+            () => IconBar.Instance.SelectAllClicked,
+            () => {
+                if (IconBar.Instance.SelectAllClicked) {
+                    this.select();
+                    IconBar.Instance.Select++;
+                    if (IconBar.Instance.Select === 9) {
+                        IconBar.Instance.Select = 0;
+                        IconBar.Instance.SelectAllClicked = false;
+                    }
+                }
+            },
         )
     }
 
-    @action
-    downKeyHandler = (e: KeyboardEvent) => {
-        if (e.key !== "Control") return;
-        this.removeType = true;
-        e.preventDefault();
-        e.stopPropagation();
-        document.body.style.cursor = "not-allowed";
-    }
-
-    @action
-    upKeyHandler = (e: KeyboardEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeType = false;
-        document.body.style.cursor = "default";
-
-    }
-
-    componentWillMount() {
-        document.removeEventListener("keydown", this.downKeyHandler);
-        document.addEventListener("keydown", this.downKeyHandler);
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.addEventListener("keyup", this.upKeyHandler);
-    }
-
-    componentWillUnMount() {
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.removeEventListener("keydown", this.downKeyHandler);
-    }
+    // @action
+    // downKeyHandler = (e: KeyboardEvent) => {
+    //     if (e.key !== "Control") return;
+    //     this.removeType = true;
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     document.body.style.cursor = "not-allowed";
+    // }
+
+    // @action
+    // upKeyHandler = (e: KeyboardEvent) => {
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     this.removeType = false;
+    //     document.body.style.cursor = "default";
+
+    // }
+
+    // componentWillMount() {
+    //     document.removeEventListener("keydown", this.downKeyHandler);
+    //     document.addEventListener("keydown", this.downKeyHandler);
+    //     document.removeEventListener("keyup", this.upKeyHandler);
+    //     document.addEventListener("keyup", this.upKeyHandler);
+    // }
+
+    // componentWillUnMount() {
+    //     document.removeEventListener("keyup", this.upKeyHandler);
+    //     document.removeEventListener("keydown", this.downKeyHandler);
+    // }
 
     @action.bound
     getIcon() {
@@ -127,96 +139,112 @@ export class IconButton extends React.Component<IconButtonProps>{
         }
     }
 
-    public getType(): string {
-        return this.props.type;
-    }
+    // public getType(): string {
+    //     return this.props.type;
+    // }
 
-    public getIsSelected(): boolean {
-        return this.isSelected;
-    }
+    // public getIsSelected(): boolean {
+    //     return this.isSelected;
+    // }
 
-    public getIsRemoved() {
-        return this.isRemoved;
-    }
+    // public getIsRemoved() {
+    //     return this.isRemoved;
+    // }
 
-    public getIsAdded() {
-        return this.isAdded;
-    }
+    // public getIsAdded() {
+    //     return this.isAdded;
+    // }
 
-    @action
+    @action.bound
     onClick = () => {
         let newList: string[] = this.props.getList();
 
-        if(this.removeType && this.props.getActiveType() !== "remove"){
-            this.props.changeActiveType("remove")
-            // console.log("resetting")
-        }
-        else if(!this.removeType && this.props.getActiveType() !== "add"){
-            this.props.changeActiveType("add");
-            // console.log("resetting")
-        }
-
-        //if it's not already selected
-        if (!this.isSelected) {
+        if(!this.isSelected){
             this.isSelected = true;
-            console.log("changing")
-
-            //if actions pertain to removal
-            if (this.removeType) {
-                this.isAdded = false;
-                if (!this.isRemoved) {
-                    _.pull(newList, this.props.type);
-                    this.isRemoved = true;
-                }
-                else {
-                    newList.push(this.props.type);
-                    this.isRemoved = false;
-                }
-            }
-            // if actions pertain to adding
-            else {
-                this.isRemoved = false;
-                if (!this.isAdded) {
-                    if (newList.length === 9) {
-                        newList = [];
-                        newList.push(this.props.type)
-                    } else {
-                        newList.push(this.props.type);
-                    }
-                    this.isAdded = true;
-                }
-                else {
-                    _.pull(newList, this.props.type);
-                    this.isAdded = false;
-                }
-            }
+            newList.push(this.props.type)
         }
-        //if it is selected already
-        else {
+        else{
             this.isSelected = false;
-            if (this.isAdded) {
-                this.isAdded = false;
-                _.pull(newList, this.props.type);
-            }
-            if (this.isRemoved) {
-                this.isRemoved = false;
-                newList.push(this.props.type)
-            }
-            this.props.changeActiveType("none")
+            _.pull(newList, this.props.type)
         }
-        this.props.updateList(newList)
-        console.log(this);
-        console.log(this.isAdded, this.isSelected)
+
+        this.props.updateList(newList);
     }
 
-    selectedAdded = {
+    // @action
+    // onClick2 = () => {
+    //     let newList: string[] = this.props.getList();
+
+    //     // if(this.removeType && this.props.getActiveType() !== "remove"){
+    //     //     this.props.changeActiveType("remove")
+    //     //     // console.log("resetting")
+    //     // }
+    //     // else if(!this.removeType && this.props.getActiveType() !== "add"){
+    //     //     this.props.changeActiveType("add");
+    //     //     // console.log("resetting")
+    //     // }
+
+    //     //if it's not already selected
+    //     if (!this.isSelected) {
+    //         this.isSelected = true;
+    //         console.log("changing")
+
+    //         //if actions pertain to removal
+    //         if (this.removeType) {
+    //             this.isAdded = false;
+    //             if (!this.isRemoved) {
+    //                 _.pull(newList, this.props.type);
+    //                 this.isRemoved = true;
+    //             }
+    //             else {
+    //                 newList.push(this.props.type);
+    //                 this.isRemoved = false;
+    //             }
+    //         }
+    //         // if actions pertain to adding
+    //         else {
+    //             this.isRemoved = false;
+    //             if (!this.isAdded) {
+    //                 if (newList.length === 9) {
+    //                     newList = [];
+    //                     newList.push(this.props.type)
+    //                 } else {
+    //                     newList.push(this.props.type);
+    //                 }
+    //                 this.isAdded = true;
+    //             }
+    //             else {
+    //                 _.pull(newList, this.props.type);
+    //                 this.isAdded = false;
+    //             }
+    //         }
+    //     }
+    //     //if it is selected already
+    //     else {
+    //         this.isSelected = false;
+    //         if (this.isAdded) {
+    //             this.isAdded = false;
+    //             _.pull(newList, this.props.type);
+    //         }
+    //         if (this.isRemoved) {
+    //             this.isRemoved = false;
+    //             newList.push(this.props.type)
+    //         }
+    //         this.props.changeActiveType("none")
+    //     }
+    //     this.props.updateList(newList)
+    //     console.log(this);
+    //     console.log(this.isAdded, this.isSelected)
+    // }
+
+    selected = {
         opacity: 1,
         backgroundColor: "#c2c2c5" //$alt-accent
     }
 
-    selectedRemoved = {
-        opacity: 0.2,
-    }
+    // selectedRemoved = {
+    //     opacity: 0.2,
+    // }
 
     notSelected = {
         opacity: 0.6,
@@ -224,23 +252,28 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     hoverStyle = {
         opacity: 1,
-        backgroundColor: "#c2c2c5" //$alt-accent
+        backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
     }
 
-    hoverRemoveStyle = {
-        opacity: 0.2,
-        backgroundColor: "transparent",
-    }
+    // hoverRemoveStyle = {
+    //     opacity: 0.2,
+    //     backgroundColor: "transparent",
+    // }
 
-    banStyle = {
-        opacity: 1,
-    }
+    // banStyle = {
+    //     opacity: 1,
+    // }
 
     @action.bound
     public reset() {
         this.isSelected = false;
-        this.isAdded = false;
-        this.isRemoved = false;
+        // this.isAdded = false;
+        // this.isRemoved = false;
+    }
+
+    @action.bound
+    public select() {
+        this.isSelected = true;
     }
 
     @action
@@ -287,16 +320,17 @@ export class IconButton extends React.Component<IconButtonProps>{
                 onMouseLeave={this.onMouseLeave}
                 onClick={this.onClick}>
                 <div className="type-icon" id={this.props.type + "-icon"}
-                    style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle :
-                        !this.isSelected ? this.notSelected :
-                            this.isAdded ? this.selectedAdded :
-                                this.isRemoved ? this.selectedRemoved : this.notSelected}
+                    // style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle :
+                    //     !this.isSelected ? this.notSelected :
+                    //         this.isAdded ? this.selectedAdded :
+                    //             this.isRemoved ? this.selectedRemoved : this.notSelected}
+                    style = {this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
                 >
                     {this.getFA()}
                 </div>
-                <div className="ban-icon"
+                {/* <div className="ban-icon"
                     style={this.hover ? (this.removeType ? this.banStyle : { opacity: 0 }) : (this.isSelected ? this.isRemoved ? this.banStyle : { opacity: 0 } : { opacity: 0 })}>
-                    <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div>
+                    <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div> */}
                 <div className="filter-description">{this.props.type}</div>
             </div>
         );