1 files changed, 82 insertions, 26 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bb73df75c..8995aa78b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -52,6 +52,7 @@ import { DocumentManager } from '../util/DocumentManager';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { LinkMenu } from './linking/LinkMenu';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
+import { SearchBox } from './search/SearchBox';
 import { TaskCompletionBox } from './nodes/TaskCompletedBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
@@ -77,6 +78,8 @@ export class MainView extends React.Component {
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
     @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
+    @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; }
+
 
     public isPointerDown = false;
 
@@ -159,10 +162,24 @@ export class MainView extends React.Component {
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
+            //SearchBox.Instance.closeSearch();
         }
         if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) {
             TimelineMenu.Instance.closeMenu();
         }
+        if (targets && targets.length && SearchBox.Instance._searchbarOpen) {
+            let check = false;
+            targets.forEach((thing) => {
+                if (thing.className.toString() === "collectionSchemaView-table" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") {
+                    check = true;
+                }
+            });
+            if (check === false) {
+                SearchBox.Instance.closeSearch();
+            }
+        }
+
+
     });
 
     globalPointerUp = () => this.isPointerDown = false;
@@ -306,6 +323,39 @@ export class MainView extends React.Component {
             }
         }
     }
+
+    @computed get search() {
+        return <DocumentView Document={this.searchDoc!}
+            DataDoc={undefined}
+            LibraryPath={emptyPath}
+            addDocument={undefined}
+            addDocTab={this.addDocTabFunc}
+            pinToPres={emptyFunction}
+            rootSelected={returnTrue}
+            onClick={undefined}
+            backgroundColor={this.defaultBackgroundColors}
+            removeDocument={undefined}
+            ScreenToLocalTransform={Transform.Identity}
+            ContentScaling={returnOne}
+            NativeHeight={returnZero}
+            NativeWidth={returnZero}
+            PanelWidth={this.getPWidth}
+            PanelHeight={this.getPHeight}
+            renderDepth={0}
+            focus={emptyFunction}
+            parentActive={returnTrue}
+            whenActiveChanged={emptyFunction}
+            bringToFront={emptyFunction}
+            docFilters={returnEmptyFilter}
+            ContainingCollectionView={undefined}
+            ContainingCollectionDoc={undefined}
+        />;
+    }
+
+
+
+
+
     @computed get mainDocView() {
         return <DocumentView Document={this.mainContainer!}
             DataDoc={undefined}
@@ -333,6 +383,7 @@ export class MainView extends React.Component {
             ContainingCollectionDoc={undefined}
         />;
     }
+
     @computed get dockingContent() {
         TraceMobx();
         const mainContainer = this.mainContainer;
@@ -466,34 +517,39 @@ export class MainView extends React.Component {
         const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
-            <div className="mainView-mainContent" style={{
-                color: this.darkScheme ? "rgb(205,205,205)" : "black",
-                //change to times 2 for both pinned
-                height,
-                width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
-            }} >
-                <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
-                    <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
-                        <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
-                            style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
-                            <span title="library View Dragger" style={{
-                                width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
-                                //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
-                                position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
-                                top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
-                            }} />
-                        </div>
-                        <div className="mainView-libraryFlyout" style={{
-                            //transformOrigin: this._flyoutTranslate ? "" : "left center",
-                            transition: this._flyoutTranslate ? "" : "width .5s",
-                            //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
-                            boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
-                        }}>
-                            {this.flyout}
-                            {this.expandButton}
+            <div>
+                <div style={{ height: "32px", width: "100%", backgroundColor: "black" }}>
+                    {this.search}
+                </div>
+                <div className="mainView-mainContent" style={{
+                    color: this.darkScheme ? "rgb(205,205,205)" : "black",
+                    //change to times 2 for both pinned
+                    height,
+                    width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
+                }} >
+                    <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
+                        <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
+                            <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
+                                style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
+                                <span title="library View Dragger" style={{
+                                    width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
+                                    //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
+                                    position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
+                                    top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
+                                }} />
+                            </div>
+                            <div className="mainView-libraryFlyout" style={{
+                                //transformOrigin: this._flyoutTranslate ? "" : "left center",
+                                transition: this._flyoutTranslate ? "" : "width .5s",
+                                //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
+                                boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
+                            }}>
+                                {this.flyout}
+                                {this.expandButton}
+                            </div>
                         </div>
+                        {this.dockingContent}
                     </div>
-                    {this.dockingContent}
                 </div>
             </div>);
     }