flyout working

6 files changed, 37 insertions, 24 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 4d6acb95a..f20f36d63 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
new file mode 100644
index 000000000..6bd614c8b
--- /dev/null
+++ b/src/client/views/.DS_Store
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ca7896088..f88bf9c14 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -30,8 +30,8 @@
         cursor: ew-resize;
     }
     #linkButton {
-        height: 25px;
-        width: 25px;
+        height: 20px;
+        width: 20px;
         margin-top: 10px;
         border-radius: 50%;
         opacity: 0.6;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 67031ee0f..f9db766af 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -8,7 +8,9 @@ import { NumberField } from "../../fields/NumberField";
 import { props } from "bluebird";
 import { DragManager } from "../util/DragManager";
 import { LinkMenu } from "./nodes/LinkMenu";
-
+const higflyout = require("@hig/flyout");
+const { anchorPoints } = higflyout;
+const Flyout = higflyout.default;
 
 @observer
 export class DocumentDecorations extends React.Component {
@@ -62,6 +64,7 @@ export class DocumentDecorations extends React.Component {
         // let linkMenu = new LinkMenu(SelectionManager.SelectedDocuments()[0]);
         // linkMenu.Hidden = false;
         console.log("down");
+
         e.stopPropagation();
         document.removeEventListener("pointermove", this.onLinkButtonMoved)
         document.addEventListener("pointermove", this.onLinkButtonMoved);
@@ -181,6 +184,9 @@ export class DocumentDecorations extends React.Component {
             document.removeEventListener("pointerup", this.onPointerUp);
         }
     }
+    // buttonOnPointerUp = (e: React.PointerEvent): void => {
+    //     e.stopPropagation();
+    // }
 
     render() {
         var bounds = this.Bounds;
@@ -207,7 +213,17 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="linkButton" onPointerDown={this.onLinkButtonDown} ref={this._linkButton}></div>
+
+                <Flyout
+                    anchorPoint={anchorPoints.RIGHT_TOP}
+                    content={
+                        <LinkMenu docView={SelectionManager.SelectedDocuments()[0]}>
+                        </LinkMenu>
+                    }
+
+                >
+                    <div id="linkButton" onPointerDown={this.onLinkButtonDown} ref={this._linkButton}></div>
+                </Flyout>
 
             </div >
         )
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index 141d1fbf1..fac6ba2b5 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -1,14 +1,15 @@
 #menu-container {
-    width: 180px;
-    height: 250px;
+    width: 100%;
+    height: auto;
     display: flex;
     flex-direction: column;
-    background: red;
 }
 
 #search-bar {
     width: 100%;
-    margin: 2%;
+    padding: 5px;
+    margin-bottom: 10px;
+    font-size: 12px;
 }
 
 #link-list {
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 2394852b2..9e01de4cd 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -8,28 +8,24 @@ import { NumberField } from "../../../fields/NumberField";
 import { props } from "bluebird";
 import { DragManager } from "../../util/DragManager";
 import { DocumentView } from "./DocumentView";
+import { Document } from "../../../fields/Document";
 
+interface Props {
+    docView: DocumentView | undefined;
+}
 
 @observer
-export class LinkMenu extends React.Component {
-    static Instance: LinkMenu
-    @observable private _docView: DocumentView;
-    @observable private _hidden = true;
-
-    constructor(docView: DocumentView) {
-        super(docView);
-        this._docView = docView;
-        LinkMenu.Instance = this;
-    }
+export class LinkMenu extends React.Component<Props> {
+    // @observable private _hidden = true;
 
-    @computed
-    public get Hidden() { return this._hidden; }
-    public set Hidden(value: boolean) { this._hidden = value; }
+    // @computed
+    // public get Hidden() { return this._hidden; }
+    // public set Hidden(value: boolean) { this._hidden = value; }
 
     render() {
-        if (this.Hidden) {
-            return (null);
-        }
+        // if (this.Hidden) {
+        //     return (null);
+        // }
 
         return (
             <div id="menu-container">