cleaned up searchBox. fixed parentdocument context menu placement.

7 files changed, 84 insertions, 131 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index db2a3c298..a1196ee1c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -386,7 +386,7 @@ export class MainView extends React.Component {
                     getScale={returnOne}>
                 </DocumentView>
             </div>
-            <div style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "auto" }}>
+            <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "visible" }}>
                 <DocumentView
                     Document={sidebarContent}
                     DataDoc={undefined}
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 422d01cee..24aa6ddfa 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -11,7 +11,7 @@ import { CollectionViewType } from "./CollectionView";
 import { DocumentButtonBar } from "../DocumentButtonBar";
 import { DocumentManager } from "../../util/DocumentManager";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faChevronCircleUp } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { MetadataEntryMenu } from "../MetadataEntryMenu";
 import { DocumentView } from "../nodes/DocumentView";
@@ -86,11 +86,11 @@ export class ParentDocSelector extends React.Component<SelectorProps> {
                 <SelectorContextMenu {...this.props} />
             </div>
         );
-        return <div title="Drag(create link) Tap(view links)" onPointerDown={e => e.stopPropagation()} className="parentDocumentSelector-linkFlyout">
-            <Flyout anchorPoint={anchorPoints.RIGHT_TOP}
+        return <div title="Tap to View Contexts/Metadata" onPointerDown={e => e.stopPropagation()} className="parentDocumentSelector-linkFlyout">
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                 content={flyout}>
                 <span className="parentDocumentSelector-button" >
-                    <p>^</p>
+                    <FontAwesomeIcon icon={faChevronCircleUp} size={"lg"} />
                 </span>
             </Flyout>
         </div>;
@@ -124,7 +124,7 @@ export class ButtonSelector extends React.Component<{ Document: Doc, Stack: any
             </div>
         );
         return <span title="Tap for menu" onPointerDown={e => e.stopPropagation()} className="buttonSelector">
-            <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={flyout} stylesheet={this.customStylesheet}>
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout} stylesheet={this.customStylesheet}>
                 <FontAwesomeIcon icon={faEdit} size={"sm"} />
             </Flyout>
         </span>;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 63c17b1f6..29e7edd97 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -742,7 +742,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
         const highlightColors = ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"];
         const highlightStyles = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"];
-        const highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc.viewType !== CollectionViewType.Linear;
+        let highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc.viewType !== CollectionViewType.Linear;
+        highlighting = highlighting && this.props.focus !== emptyFunction;  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
         return <div className={`documentView-node${this.topMost ? "-topmost" : ""}`} ref={this._mainCont} onKeyDown={this.onKeyDown}
             onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
             onPointerEnter={e => Doc.BrushDoc(this.props.Document)} onPointerLeave={e => Doc.UnBrushDoc(this.props.Document)}
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 4eb992d36..0825580b7 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -70,8 +70,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    overflow: hidden;
-    overflow-y: auto;
+    overflow: visible;
 
     .no-result {
         width: 500px;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 2f28ebf76..dd1ac7421 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -353,7 +353,8 @@ export class SearchBox extends React.Component {
                 </div>
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
-                    height: this.resFull ? "auto" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
+                    height: this.resFull ? "auto" : this.resultHeight,
+                    overflow: "visibile" // this.resFull ? "auto" : "visible"
                 }} ref={this.resultsRef}>
                     {this._visibleElements}
                 </div>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 82ff96700..469f062b2 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -1,22 +1,14 @@
 @import "../globalCssVariables";
 
-.search-overview {
+.searchItem-overview {
     display: flex;
     flex-direction: reverse;
     justify-content: flex-end;
     z-index: 0;
 }
-.link-count {
-     background: black;
-    border-radius: 20px;
-    color: white;
-    width: 15px;
-    text-align: center;
-    margin-top: 5px;
-}
 
 .searchBox-placeholder,
-.search-overview .search-item {
+.searchItem-overview .searchItem {
     width: 100%;
     background: $light-color-secondary;
     border-color: $intermediate-color;
@@ -26,19 +18,19 @@
     max-height: 150px;
     height: auto;
     z-index: 0;
-    display: inline-block;
-    overflow: auto;
+    display: flex;
+    overflow: visible;
 
-    .main-search-info {
+    .searchItem-body {
         display: flex;
         flex-direction: row;
         width: 100%;
 
-        .search-title-container {
+        .searchItem-title-container {
             width: 100%;
             overflow: hidden;
 
-            .search-title {
+            .searchItem-title {
                 text-transform: uppercase;
                 text-align: left;
                 width: 100%;
@@ -46,75 +38,28 @@
             }
         }
 
-        .search-info {
+        .searchItem-info {
             display: flex;
             justify-content: flex-end;
 
-            .link-container.item {
-                margin-left: auto;
-                margin-right: auto;
-                height: 26px;
-                width: 26px;
-                border-radius: 13px;
-                background: $dark-color;
-                color: $light-color-secondary;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                -webkit-transition: all 0.2s ease-in-out;
-                -moz-transition: all 0.2s ease-in-out;
-                -o-transition: all 0.2s ease-in-out;
-                transition: all 0.2s ease-in-out;
-                transform-origin: top right;
-                overflow: hidden;
-                position: relative;
-
-
-                .link-extended {
-                    // display: none;
-                    visibility: hidden;
-                    opacity: 0;
-                    position: relative;
-                    z-index: 500;
-                    overflow: hidden;
-                    -webkit-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                    -moz-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                    -o-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                    transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                    // transition-delay: 1s;
-                }
-
-            }
-
-            .link-container.item:hover {
-                width: 70px;
-            }
-
-            .link-container.item:hover .link-count {
-                opacity: 0;
-            }
-
-            .link-container.item:hover .link-extended {
-                opacity: 1;
-                visibility: visible;
-                // display: inline;
-            }
-
             .icon-icons {
                 width: 50px
             }
 
             .icon-live {
                 width: 175px;
+                height: 0px;
             }
 
+            .icon-icons {
+                height:auto;
+            }
             .icon-icons,
             .icon-live {
-                height: auto;
                 margin: auto;
-                overflow: hidden;
+                overflow: visible;
 
-                .search-type {
+                .searchItem-type {
                     display: inline-block;
                     width: 100%;
                     position: absolute;
@@ -133,11 +78,11 @@
                     }
                 }
 
-                .search-type:hover+.search-label {
+                .searchItem-type:hover+.searchItem-label {
                     opacity: 1;
                 }
 
-                .search-label {
+                .searchItem-label {
                     font-size: 10;
                     position: relative;
                     right: 0px;
@@ -151,8 +96,6 @@
             }
 
             .icon-live:hover {
-                height: 175px;
-
                 .pdfBox-cont {
                     img {
                         width: 100% !important;
@@ -161,42 +104,44 @@
             }
         }
 
-        .search-info:hover {
+        .searchItem-info:hover {
             width: 60%;
         }
     }
 }
 
-.search-item:hover~.searchBox-instances,
+.searchItem:hover~.searchBox-instances,
 .searchBox-instances:hover,
 .searchBox-instances:active {
     opacity: 1;
     background: $lighter-alt-accent;
-    width:150px
 }
 
-.search-item:hover {
+.searchItem:hover {
     transition: all 0.2s;
     background: $lighter-alt-accent;
 }
 
-.search-highlighting {
+.searchItem-highlighting {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: pre;
 }
 
 .searchBox-instances {
-    float: left;
     opacity: 1;
-    width: 0px;
+    width:40px;
+    height:40px;
+    background: gray;
     transition: all 0.2s ease;
     color: black;
     overflow: hidden;
+    right:-100;
+    display:inline-block;
 }
 
 
-.search-overview:hover {
+.searchItem-overview:hover {
     z-index: 1;
 }
 
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 673cb7937..32ba5d19d 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -17,11 +17,11 @@ import { SEARCH_THUMBNAIL_SIZE } from "../../views/globalCssVariables.scss";
 import { CollectionViewType } from "../collections/CollectionView";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { ContextMenu } from "../ContextMenu";
-import { DocumentView } from "../nodes/DocumentView";
 import { SearchBox } from "./SearchBox";
 import "./SearchItem.scss";
 import "./SelectorContextMenu.scss";
 import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
+import { ButtonSelector, ParentDocSelector } from "../collections/ParentDocumentSelector";
 
 export interface SearchItemProps {
     doc: Doc;
@@ -188,24 +188,12 @@ export class SearchItem extends React.Component<SearchItemProps> {
                                     layoutresult.indexOf(DocumentType.HIST) !== -1 ? faChartBar :
                                         layoutresult.indexOf(DocumentType.WEB) !== -1 ? faGlobeAsia :
                                             faCaretUp;
-        return <div onPointerDown={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} >
+        return <div onClick={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} >
             <FontAwesomeIcon icon={button} size="2x" />
         </div>;
     }
 
     collectionRef = React.createRef<HTMLDivElement>();
-    startDocDrag = () => {
-        const doc = this.props.doc;
-        const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
-        if (isProto) {
-            return Doc.MakeDelegate(doc);
-        } else {
-            return Doc.MakeAlias(doc);
-        }
-    }
-
-    @computed
-    get linkCount() { return DocListCast(this.props.doc.links).length; }
 
     @action
     pointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); }
@@ -258,43 +246,62 @@ export class SearchItem extends React.Component<SearchItemProps> {
         ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
     }
 
+    _downX = 0;
+    _downY = 0;
+    _target: any;
     onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
         e.stopPropagation();
-        const doc = Doc.IsPrototype(this.props.doc) ? Doc.MakeDelegate(this.props.doc) : this.props.doc;
-        DragManager.StartDocumentDrag([e.currentTarget], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY);
+        this._target = e.currentTarget;
+        document.removeEventListener("pointermove", this.onPointerMoved);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPointerMoved);
+        document.addEventListener("pointerup", this.onPointerUp);
+    }
+    onPointerMoved = (e: PointerEvent) => {
+        if (Math.abs(e.clientX - this._downX) > Utils.DRAG_THRESHOLD ||
+            Math.abs(e.clientY - this._downY) > Utils.DRAG_THRESHOLD) {
+            console.log("DRAGGIGNG");
+            document.removeEventListener("pointermove", this.onPointerMoved);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            const doc = Doc.IsPrototype(this.props.doc) ? Doc.MakeDelegate(this.props.doc) : this.props.doc;
+            DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY);
+        }
+    }
+    onPointerUp = (e: PointerEvent) => {
+        document.removeEventListener("pointermove", this.onPointerMoved);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    @computed
+    get contextButton() {
+        return <ParentDocSelector Views={DocumentManager.Instance.DocumentViews} Document={this.props.doc} addDocTab={(doc, data, where) => CollectionDockingView.AddRightSplit(doc, data)} />;
     }
 
     render() {
         const doc1 = Cast(this.props.doc.anchor1, Doc);
         const doc2 = Cast(this.props.doc.anchor2, Doc);
-        return (
-            <div className="search-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
-                <div className="search-item" onPointerDown={this.nextHighlight} onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc} id="result"
-                    onClick={this.onClick}>
-                    <div className="main-search-info">
-                        <div title="Drag as document" onPointerDown={this.onPointerDown} style={{ marginRight: "7px" }}> <FontAwesomeIcon icon="file" size="lg" />
-                            <div className="link-container item">
-                                <div className="link-count" title={`${this.linkCount + " links"}`}>{this.linkCount}</div>
-                            </div>
-                        </div>
-                        <div className="search-title-container">
-                            <div className="search-title">{StrCast(this.props.doc.title)}</div>
-                            <div className="search-highlighting">{this.props.highlighting.length ? "Matched fields:" + this.props.highlighting.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}</div>
-                            {this.props.lines.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="search-highlighting">`${l}`</div>)}
-                        </div>
-                        <div className="search-info" style={{ width: this._useIcons ? "15%" : "100%" }}>
-                            <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
-                                <div className="search-type" title="Click to Preview">{this.DocumentIcon()}</div>
-                                <div className="search-label">{this.props.doc.type ? this.props.doc.type : "Other"}</div>
-                            </div>
-                        </div>
+        return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
+            <div className="searchItem" onPointerDown={this.nextHighlight} onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
+                <div className="searchItem-body" onClick={this.onClick}>
+                    <div className="searchItem-title-container">
+                        <div className="searchItem-title">{StrCast(this.props.doc.title)}</div>
+                        <div className="searchItem-highlighting">{this.props.highlighting.length ? "Matched fields:" + this.props.highlighting.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}</div>
+                        {this.props.lines.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="searchItem-highlighting">`${l}`</div>)}
                     </div>
                 </div>
-                <div className="searchBox-instances">
+                <div className="searchItem-info" style={{ width: this._useIcons ? "30px" : "100%" }}>
+                    <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
+                        <div className="searchItem-type" title="Click to Preview" onPointerDown={this.onPointerDown}>{this.DocumentIcon()}</div>
+                        <div className="searchItem-label">{this.props.doc.type ? this.props.doc.type : "Other"}</div>
+                    </div>
+                </div>
+                <div className="searchItem-context" title="Drag as document">
                     {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc.type === DocumentType.LINK ? <LinkContextMenu doc1={doc1} doc2={doc2} /> :
-                        <SelectorContextMenu {...this.props} />}
+                        this.contextButton}
                 </div>
             </div>
-        );
+        </div>;
     }
 } 
\ No newline at end of file