search is working rip my previous progress

3 files changed, 35 insertions, 20 deletions

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 72a0d4b72..4c60710da 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -73,6 +73,7 @@
     margin-right: 72px;
 
     .search-item {
+        float: right;
         position: relative;
         z-index: 1000;
         pointer-events: auto;
@@ -103,7 +104,7 @@
     }
 
     .search-item:hover {
-        transition: all 0.1s;
+        transition: all 0.2s;
         background: $lighter-alt-accent;
     }
 
@@ -140,26 +141,42 @@
 
 
     .searchBox-instances {
-        display: block;
-        background: $lighter-alt-accent;
-        opacity: 0;
+        float: left;
+        display: inline-block;
+        opacity: 1;
         width: 150px;
         transition: all 0.2s ease;
         color: black;
-        transform: translateX(150px);
+        transform-origin: top right;
+        -webkit-transform: scale(0);
+        -ms-transform: scale(0);
+        transform: scale(0);
+        height: 100%
     }
 
+    .collection{
+        border-color: $darker-alt-accent;
+        border-bottom-style: solid;
+    }
 
     .search-overview {
         display: flex;
+        flex-direction: row-reverse;
         justify-content: flex-end;
         height: 70px;
     }
 
-    .search-overview:hover {
-        .searchBox-instances {
-            transform: translateX(0px);
-            opacity: 1;
-        }
+    .parents{
+        background: $light-color-secondary;
+        padding: 10px;
     }
+
+    .search-item:hover~.searchBox-instances, .searchBox-instances:hover {
+        opacity: 1;
+        background: $lighter-alt-accent;
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+
 }
\ No newline at end of file
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index ba67363fb..052c14acb 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -40,7 +40,6 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
     }
 
     async fetchDocuments() {
-        console.log("fetching");
         let aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc);
         const docs = await SearchUtil.Search(`data_l:"${this.props.doc[Id]}"`, true);
         const map: Map<Doc, Doc> = new Map;
@@ -48,7 +47,6 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
         allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index])));
         docs.forEach(doc => map.delete(doc));
         runInAction(() => {
-            console.log("action running")
             this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc }));
             this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target }));
         });
@@ -70,12 +68,11 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
 
     render() {
         return (
-            <>
+            < div className="parents">
                 <p>Contexts:</p>
-                    {this._docs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
-                    {this._otherDocs.length ? <hr></hr> : null}
-                    {this._otherDocs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
-            </>
+                    {this._docs.map(doc => <div className = "collection"><a  onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+                    {this._otherDocs.map(doc =><div className = "collection"><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+            </div>
         );
     }
 }
@@ -124,9 +121,6 @@ export class SearchItem extends React.Component<SearchItemProps> {
     render() {
         return (
             <div className="search-overview">
-                <div className="searchBox-instances">
-                    <SelectorContextMenu {...this.props} />
-                </div>
                 <div className="search-item" ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} >
                     <div className="main-search-info">
                         <div className="search-title" id="result" >{this.props.doc.title}</div>
@@ -139,6 +133,9 @@ export class SearchItem extends React.Component<SearchItemProps> {
                         <div className="found">Where Found: (i.e. title, body, etc)</div>
                     </div>
                 </div>
+                <div className="searchBox-instances">
+                    <SelectorContextMenu {...this.props} />
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 838d4d9ac..cfbf4aab8 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -9,6 +9,7 @@ $main-accent: #aaaaa3;
 //$alt-accent: #59dff7;
 $alt-accent: #c2c2c5;
 $lighter-alt-accent: rgb(207, 220, 240);
+$darker-alt-accent: rgb(178, 206, 248);
 $intermediate-color: #9c9396;
 $dark-color: #121721;
 // fonts