7 files changed, 120 insertions, 13 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e69485b9a..220f7017e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -204,6 +204,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         let sourceDoc: Document = sourceDocView.props.Document;
         let destDoc: Document = this.props.Document;
+        if (this.props.isTopMost) {
+            return;
+        }
         let linkDoc: Document = new Document();
 
         linkDoc.Set(KeyStore.Title, new TextField("New Link"));
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index e69de29bb..3ae8ed666 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -0,0 +1,39 @@
+.link-container {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    border-top: 0.5px solid #bababa;
+}
+
+.info-container {
+    width: 60%;
+    padding-top: 10px;
+    padding-left: 5px;
+    display: flex;
+    flex-direction: column
+}
+
+.link-name {
+    font-size: 11px;
+}
+
+.doc-name {
+    font-size: 8px;
+}
+
+.button-container {
+    width: 40%;
+    display: flex;
+    flex-direction: row;
+}
+
+.button {
+    height: 15px;
+    width: 15px;
+    margin: 8px 5px;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: auto;
+    background-color: #2B6091;
+}
+\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index e69de29bb..d6cb1f612 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -0,0 +1,62 @@
+import { observable, computed, action } from "mobx";
+import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
+import { observer } from "mobx-react";
+import './LinkBox.scss'
+import { KeyStore } from '../../../fields/KeyStore'
+import { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+
+interface Props {
+    linkDoc: Document;
+    linkName: String;
+    // pairedDoc: Document;
+}
+
+@observer
+export class LinkBox extends React.Component<Props> {
+
+    onViewButtonPressed = (e: React.PointerEvent): void => {
+        console.log("view down");
+        e.stopPropagation();
+    }
+
+    onEditButtonPressed = (e: React.PointerEvent): void => {
+        console.log("edit down");
+        e.stopPropagation();
+    }
+
+    onDeleteButtonPressed = (e: React.PointerEvent): void => {
+        console.log("delete down");
+        e.stopPropagation();
+        let linkToDoc: Document = this.props.linkDoc.GetData(KeyStore.LinkedToDocs, ListField, [])[0];
+        let linkFromDoc: Document = this.props.linkDoc.GetData(KeyStore.LinkedFromDocs, ListField, [])[0];
+
+        // let linkToDocFromDocs: Document[] = linkToDoc.GetData(KeyStore.LinkedFromDocs, ListField, []);
+        // linkToDocFromDocs.
+    }
+
+    render() {
+
+        return (
+            <div className="link-container">
+                <div className="info-container">
+                    <div className="link-name">
+                        <p>{this.props.linkName}</p>
+                    </div>
+                    {/* <div className="doc-name">
+                        <p>{this.props.pairedDoc.Title}</p>
+                    </div> */}
+                </div>
+
+                <div className="button-container">
+                    <div className="button" onPointerDown={this.onViewButtonPressed}></div>
+                    <div className="button" onPointerDown={this.onEditButtonPressed}></div>
+                    <div className="button" onPointerDown={this.onDeleteButtonPressed}></div>
+                </div>
+            </div>
+        )
+    }
+}
+\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.scss
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.tsx
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index fac6ba2b5..af5b84ec6 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -13,8 +13,8 @@
 }
 
 #link-list {
+    margin-top: 5px;
     width: 100%;
     height: 100px;
     overflow-y: scroll;
-    background: black;
 }
 \ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 9e01de4cd..4a1f49864 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -4,38 +4,41 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { observer } from "mobx-react";
 import './LinkMenu.scss'
 import { KeyStore } from '../../../fields/KeyStore'
-import { NumberField } from "../../../fields/NumberField";
 import { props } from "bluebird";
-import { DragManager } from "../../util/DragManager";
 import { DocumentView } from "./DocumentView";
+import { LinkBox } from "./LinkBox"
 import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { TextField } from "../../../fields/TextField";
 
 interface Props {
-    docView: DocumentView | undefined;
+    docView: DocumentView;
 }
 
 @observer
 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; }
 
     render() {
-        // if (this.Hidden) {
-        //     return (null);
-        // }
+        //get list of links from document
+        let linkFrom: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []);
+        let linkTo: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []);
 
         return (
             <div id="menu-container">
                 <input id="search-bar" type="text" placeholder="Search..."></input>
                 <div id="link-list">
 
+                    {linkTo.map(link => {
+                        let name = link.GetData(KeyStore.Title, TextField, new String);
+                        return <LinkBox linkDoc={link} linkName={name} />
+                    })}
+
+                    {linkFrom.map(link => {
+                        return <LinkBox linkDoc={link} linkName={name} />
+                    })}
                 </div>
 
             </div>
         )
     }
-
 }
 \ No newline at end of file