From 99564dfde417fe3fbdc8a13b43f73d34438f363c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 13 Dec 2019 11:10:11 -0500
Subject: fixed flyouts a bit more

---
 .../views/collections/ParentDocumentSelector.scss  | 12 ++++++--
 .../views/collections/ParentDocumentSelector.tsx   | 35 +++++-----------------
 2 files changed, 18 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index 5d2245292..0ea3e015d 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -8,7 +8,7 @@
     }
 }
 .parentDocumentSelector-flyout {
-    position: absolute;
+    position: relative;
     z-index: 9999;
     background-color: #eeeeee;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
@@ -17,6 +17,10 @@
 
     padding: 10px;
     border-radius: 3px;
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    border-radius: 3px;
 
     hr {
         height: 1px;
@@ -29,7 +33,11 @@
     }
 }
 .parentDocumentSelector-button {
-    pointer-events: all;
+    pointer-events: all; 
+    position: relative;
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 .parentDocumentSelector-metadata {
     pointer-events: auto;
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index b2f5c92b5..5208f65c4 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -80,30 +80,16 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
 
 @observer
 export class ParentDocSelector extends React.Component<SelectorProps> {
-    @observable hover = false;
-
-    @action
-    onMouseLeave = () => {
-        this.hover = false;
-    }
-
-    @action
-    onMouseEnter = () => {
-        this.hover = true;
-    }
-
     render() {
         let flyout = (
-            <div className="parentDocumentSelector-flyout" style={{ position: "relative", display: "inline-block", height: "100%", width: "100%", }} title=" ">
+            <div className="parentDocumentSelector-flyout" style={{}} title=" ">
                 <SelectorContextMenu {...this.props} />
             </div>
         );
-        return <div title="Drag(create link) Tap(view links)" className="parentDocumentSelector-linkFlyout">
+        return <div title="Drag(create link) Tap(view links)" onPointerDown={e => e.stopPropagation()} className="parentDocumentSelector-linkFlyout">
             <Flyout anchorPoint={anchorPoints.RIGHT_TOP}
                 content={flyout}>
-                <span className="parentDocumentSelector-button" style={{ position: "relative", display: "inline-block", paddingLeft: "5px", paddingRight: "5px" }}
-                    onMouseEnter={this.onMouseEnter}
-                    onMouseLeave={this.onMouseLeave}>
+                <span className="parentDocumentSelector-button" >
                     <p>^</p>
                 </span>
             </Flyout>
@@ -116,13 +102,9 @@ export class ButtonSelector extends React.Component<{ Document: Doc, Stack: any
     @observable hover = false;
 
     @action
-    onMouseLeave = () => {
-        this.hover = false;
-    }
-
-    @action
-    onMouseEnter = () => {
-        this.hover = true;
+    onPointerDown = (e: React.PointerEvent) => {
+        this.hover = !this.hover;
+        e.stopPropagation();
     }
 
     render() {
@@ -130,15 +112,14 @@ export class ButtonSelector extends React.Component<{ Document: Doc, Stack: any
         if (this.hover) {
             const view = DocumentManager.Instance.getDocumentView(this.props.Document);
             flyout = !view ? (null) : (
-                <div className="ParentDocumentSelector-flyout" title=" " onMouseLeave={this.onMouseLeave}>
+                <div className="ParentDocumentSelector-flyout" title=" ">
                     <DocumentButtonBar views={[view]} stack={this.props.Stack} />
                 </div>
             );
         }
         return (
             <span className="buttonSelector"
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}>
+                onPointerDown={this.onPointerDown}>
                 {this.hover ? (null) : <FontAwesomeIcon icon={faEdit} size={"sm"} />}
                 {flyout}
             </span>
-- 
cgit v1.2.3-70-g09d2