weird thingsS

3 files changed, 47 insertions, 26 deletions

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 5e1389959..ed8dbbe51 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -15,6 +15,8 @@ import { Docs } 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 anime from 'animejs';
 
 library.add(faSearch);
 library.add(faObjectGroup);
@@ -54,6 +56,7 @@ export class SearchBox extends React.Component {
             this._resultsOpen = true;
             this._results = results;
         });
+
     }
 
     @action
@@ -216,15 +219,16 @@ export class SearchBox extends React.Component {
                             <div className="type-of-node">
                                 temp for filtering by a type of node
                                 <div className="icon-bar">
-                                    <FontAwesomeIcon icon={faFilePdf} size="2x" />
-                                    <FontAwesomeIcon icon={faChartBar} size="2x" />
-                                    <FontAwesomeIcon icon={faObjectGroup} size="2x" />
-                                    <FontAwesomeIcon icon={faImage} size="2x" />
-                                    <FontAwesomeIcon icon={faFilm} size="2x" />
-                                    <FontAwesomeIcon icon={faGlobeAsia} size="2x" />
-                                    <FontAwesomeIcon icon={faLink} size="2x" />
-                                    <FontAwesomeIcon icon={faMusic} size="2x" />
-                                    <FontAwesomeIcon icon={faStickyNote} size="2x" />
+                                    {/* hoping to ultimately animate a reorder when an icon is chosen */}
+                                    <FontAwesomeIcon style={{ order: 0 }} icon={faFilePdf} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 1 }} icon={faChartBar} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 2 }} icon={faObjectGroup} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 3 }} icon={faImage} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 4 }} icon={faFilm} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 5 }} icon={faGlobeAsia} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 6 }} icon={faLink} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 7 }} icon={faMusic} size="2x" />
+                                    <FontAwesomeIcon style={{ order: 8 }} icon={faStickyNote} size="2x" />
                                 </div>
                             </div>
                             <div className="filter-collection">
diff --git a/src/client/views/SearchItem.scss b/src/client/views/SearchItem.scss
index b6ee7deca..a6cd852b1 100644
--- a/src/client/views/SearchItem.scss
+++ b/src/client/views/SearchItem.scss
@@ -56,14 +56,18 @@
 
 .searchBox-instances {
     float: left;
-    opacity: 0;
+    // opacity: 0;
+    opacity: 1;
     width: 150px;
     transition: all 0.2s ease;
     color: black;
     transform-origin: top right;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
+    // -webkit-transform: scale(0);
+    // -ms-transform: scale(0);
+    // transform: scale(0);
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
     height: 100%
 }
 
@@ -85,7 +89,7 @@
 }
 
 .search-item:hover~.searchBox-instances,
-.searchBox-instances:hover {
+.searchBox-instances:hover,  .searchBox-instances:active{
     opacity: 1;
     background: $lighter-alt-accent;
     -webkit-transform: scale(1);
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 40b8cf2bf..16a2aa790 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -2,7 +2,7 @@ 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 } 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";
@@ -13,6 +13,7 @@ import { Id } from "../../new_fields/FieldSymbols";
 import { CollectionDockingView } from "./collections/CollectionDockingView";
 import { observer } from "mobx-react";
 import "./SearchItem.scss";
+import { CollectionViewType } from "./collections/CollectionBaseView";
 
 export interface SearchItemProps {
     doc: Doc;
@@ -54,25 +55,37 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
     }
 
     getOnClick({ col, target }: { col: Doc, target: Doc }) {
+        console.log("hello world")
         return () => {
             console.log("returning!")
-            // col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
-            // if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
-            //     const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2;
-            //     const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2;
-            //     col.panX = newPanX;
-            //     col.panY = newPanY;
-            // }
+            col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
+            if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
+                const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2;
+                const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2;
+                col.panX = newPanX;
+                col.panY = newPanY;
+            }
             // this.props.addDocTab(col, "inTab");
+            CollectionDockingView.Instance.AddRightSplit(col);
         };
     }
 
     render() {
         return (
-            < div className="parents">
+            < div className="parents" onClick = {() => {console.log("hello there")}}>
                 <p>Contexts:</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>)}
+                {this._docs.map(doc => <div className="collection"><a onPointerDown={(e: React.PointerEvent) => {
+                    console.log("pointerdown");
+                    e.preventDefault();
+                    e.stopPropagation()
+                    this.getOnClick(doc)
+                }}>{doc.col.title}</a></div>)}
+                {this._otherDocs.map(doc => <div className="collection"><a onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation()
+                    console.log("clicked");
+                    this.getOnClick(doc)
+                }}>{doc.col.title}</a></div>)}
             </div>
         );
     }
@@ -130,7 +143,7 @@ export class SearchItem extends React.Component<SearchItemProps> {
                             <div className="search-type" >{this.DocumentIcon()}</div>
                         </div>
                     </div>
-                        <div className="found">Where Found: (i.e. title, body, etc)</div>
+                    <div className="found">Where Found: (i.e. title, body, etc)</div>
                 </div>
                 <div className="searchBox-instances">
                     <SelectorContextMenu {...this.props} />