end of day 6/10 eek

12 files changed, 100 insertions, 93 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b3a0fde8d..307f23df1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -23,7 +23,7 @@ import "./Main.scss";
 import { MainOverlayTextBox } from './MainOverlayTextBox';
 import { DocumentView } from './nodes/DocumentView';
 import { PreviewCursor } from './PreviewCursor';
-import { SearchBox } from './SearchBox';
+import { SearchBox } from './search/SearchBox';
 import { SelectionManager } from '../util/SelectionManager';
 import { FieldResult, Field, Doc, Opt, DocListCast } from '../../new_fields/Doc';
 import { Cast, FieldValue, StrCast, PromiseValue } from '../../new_fields/Types';
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 7853544d5..c1a6ca44e 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -12,7 +12,7 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { VideoBox } from "../nodes/VideoBox";
 import { NumCast, Cast, StrCast } from "../../../new_fields/Types";
 import { VideoField } from "../../../new_fields/URLField";
-import { SearchBox } from "../SearchBox";
+import { SearchBox } from "../search/SearchBox";
 import { DocServer } from "../../DocServer";
 import { Docs, DocUtils } from "../../documents/Documents";
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 9ec941eff..658f18f6a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -14,7 +14,7 @@ import { Transform } from "../../../util/Transform";
 import { undoBatch } from "../../../util/UndoManager";
 import { InkingCanvas } from "../../InkingCanvas";
 import { PreviewCursor } from "../../PreviewCursor";
-import { SearchBox } from "../../SearchBox";
+import { SearchBox } from "../../search/SearchBox";
 import { Templates } from "../../Templates";
 import { CollectionViewType } from "../CollectionBaseView";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index aa29a7170..b1fd54df1 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -15,7 +15,7 @@ import { Utils } from '../../../Utils';
 import { DocServer } from "../../DocServer";
 import { DocComponent } from "../DocComponent";
 import { InkingControl } from "../InkingControl";
-import { SearchBox } from "../SearchBox";
+import { SearchBox } from "../search/SearchBox";
 import { Annotation } from './Annotation';
 import { positionSchema } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/search/IconBar.scss
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/search/IconBar.tsx
diff --git a/src/client/views/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 91d17d001..91d17d001 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 812876d14..0dd32d4fa 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -7,19 +7,20 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import * as rp from 'request-promise';
 import { SearchItem } from './SearchItem';
-import { DocServer } from '../DocServer';
-import { Doc } from '../../new_fields/Doc';
-import { Id } from '../../new_fields/FieldSymbols';
-import { SetupDrag } from '../util/DragManager';
-import { Docs, DocTypes } from '../documents/Documents';
-import { RouteStore } from '../../server/RouteStore';
-import { NumCast } from '../../new_fields/Types';
-import { SearchUtil } from '../util/SearchUtil';
+import { DocServer } from '../../DocServer';
+import { Doc } from '../../../new_fields/Doc';
+import { Id } from '../../../new_fields/FieldSymbols';
+import { SetupDrag } from '../../util/DragManager';
+import { Docs, DocTypes } from '../../documents/Documents';
+import { RouteStore } from '../../../server/RouteStore';
+import { NumCast } from '../../../new_fields/Types';
+import { SearchUtil } from '../../util/SearchUtil';
 import * as anime from 'animejs';
-import { updateFunction } from '../../new_fields/util';
+import { updateFunction } from '../../../new_fields/util';
 import * as _ from "lodash";
 // import "./globalCssVariables.scss";
 import { findDOMNode } from 'react-dom';
+import { ToggleBar } from './ToggleBar';
 
 // import * as anime from '../../../node_modules/@types';
 // const anime = require('lib/anime.js');
@@ -84,7 +85,7 @@ export class IconBar extends React.Component<IconBarProps> {
         else {
             //turns "none" button off
             let noneDoc = document.getElementById(DocTypes.NONE)
-            if(noneDoc){
+            if (noneDoc) {
                 noneDoc.style.backgroundColor = "#121721";
             }
             if (oldIcons.includes(value)) {
@@ -156,74 +157,6 @@ export class IconBar extends React.Component<IconBarProps> {
     }
 }
 
-export interface ToggleBarProps {
-    //false = right, true = left
-    // status: boolean;
-    changeStatus(value: boolean): void;
-    optionOne: string;
-    optionTwo: string;
-}
-
-//TODO: justify content will align to specific side. Maybe do status passed in and out?
-@observer
-export class ToggleBar extends React.Component<ToggleBarProps>{
-
-    @observable _status: boolean = false;
-    @observable timeline: anime.AnimeTimelineInstance;
-    @observable _toggleButton: React.RefObject<HTMLDivElement>;
-
-    constructor(props: ToggleBarProps) {
-        super(props);
-        this._toggleButton = React.createRef();
-        this.timeline = anime.timeline({
-            autoplay: false,
-            direction: "reverse"
-        });
-    }
-
-    componentDidMount = () => {
-
-        let bar = document.getElementById("toggle-bar");
-        let tog = document.getElementById("toggle-button");
-        let barwidth = 0;
-        let togwidth = 0;
-        if (bar && tog) {
-            barwidth = bar.clientWidth;
-            togwidth = tog.clientWidth;
-        }
-        let totalWidth = (barwidth - togwidth - 10);
-
-        this.timeline.add({
-            targets: this._toggleButton.current,
-            loop: false,
-            translateX: totalWidth,
-            easing: "easeInOutQuad",
-            duration: 500
-        });
-    }
-
-    @action.bound
-    onclick() {
-        this._status = !this._status;
-        this.props.changeStatus(this._status);
-        this.timeline.play();
-        this.timeline.reverse();
-    }
-
-    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>
-        );
-    };
-}
 
 
 @observer
diff --git a/src/client/views/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 4c1d781e3..4c90643f9 100644
--- a/src/client/views/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "././globalCssVariables";
 
 .search-item {
     width: 500px;
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index acb7eeac4..9b4170f4c 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -2,19 +2,19 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Cast, NumCast } from "../../new_fields/Types";
+import { Cast, NumCast } from "../../../new_fields/Types";
 import { observable, runInAction } from "mobx";
-import { listSpec } from "../../new_fields/Schema";
-import { Doc } from "../../new_fields/Doc";
-import { DocumentManager } from "../util/DocumentManager";
-import { SetupDrag } from "../util/DragManager";
-import { SearchUtil } from "../util/SearchUtil";
-import { Id } from "../../new_fields/FieldSymbols";
-import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { listSpec } from "../../../new_fields/Schema";
+import { Doc } from "../../../new_fields/Doc";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SetupDrag } from "../../util/DragManager";
+import { SearchUtil } from "../../util/SearchUtil";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { observer } from "mobx-react";
 import "./SearchItem.scss";
-import { CollectionViewType } from "./collections/CollectionBaseView";
-import { DocTypes } from "../documents/Documents";
+import { CollectionViewType } from "../collections/CollectionBaseView";
+import { DocTypes } from "../../documents/Documents";
 
 export interface SearchItemProps {
     doc: Doc;
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/search/ToggleBar.scss
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
new file mode 100644
index 000000000..74aa5dd9a
--- /dev/null
+++ b/src/client/views/search/ToggleBar.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import * as anime from 'animejs';
+
+export interface ToggleBarProps {
+    //false = right, true = left
+    // status: boolean;
+    changeStatus(value: boolean): void;
+    optionOne: string;
+    optionTwo: string;
+}
+
+//TODO: justify content will align to specific side. Maybe do status passed in and out?
+@observer
+export class ToggleBar extends React.Component<ToggleBarProps>{
+
+    @observable _status: boolean = false;
+    @observable timeline: anime.AnimeTimelineInstance;
+    @observable _toggleButton: React.RefObject<HTMLDivElement>;
+
+    constructor(props: ToggleBarProps) {
+        super(props);
+        this._toggleButton = React.createRef();
+        this.timeline = anime.timeline({
+            autoplay: false,
+            direction: "reverse"
+        });
+    }
+
+    componentDidMount = () => {
+
+        let bar = document.getElementById("toggle-bar");
+        let tog = document.getElementById("toggle-button");
+        let barwidth = 0;
+        let togwidth = 0;
+        if (bar && tog) {
+            barwidth = bar.clientWidth;
+            togwidth = tog.clientWidth;
+        }
+        let totalWidth = (barwidth - togwidth - 10);
+
+        this.timeline.add({
+            targets: this._toggleButton.current,
+            loop: false,
+            translateX: totalWidth,
+            easing: "easeInOutQuad",
+            duration: 500
+        });
+    }
+
+    @action.bound
+    onclick() {
+        this._status = !this._status;
+        this.props.changeStatus(this._status);
+        this.timeline.play();
+        this.timeline.reverse();
+    }
+
+    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>
+        );
+    };
+}
\ No newline at end of file