diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 25 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 3 | ||||
-rw-r--r-- | src/client/views/nodes/LinkBox.scss | 39 | ||||
-rw-r--r-- | src/client/views/nodes/LinkBox.tsx | 62 | ||||
-rw-r--r-- | src/client/views/nodes/LinkEditor.scss | 0 | ||||
-rw-r--r-- | src/client/views/nodes/LinkEditor.tsx | 0 | ||||
-rw-r--r-- | src/client/views/nodes/LinkMenu.scss | 2 | ||||
-rw-r--r-- | src/client/views/nodes/LinkMenu.tsx | 27 |
8 files changed, 134 insertions, 24 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 29a4bbcf1..22d34127d 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,4 +1,4 @@ -import { observable, computed } from "mobx"; +import { observable, computed, action } from "mobx"; import React = require("react"); import { SelectionManager } from "../util/SelectionManager"; import { observer } from "mobx-react"; @@ -197,6 +197,18 @@ export class DocumentDecorations extends React.Component { console.log("DocumentDecorations: Bounds Error") return (null); } + + let linkButton = null; + if (SelectionManager.SelectedDocuments().length > 0) { + linkButton = (<Flyout + anchorPoint={anchorPoints.RIGHT_TOP} + content={ + <LinkMenu docView={SelectionManager.SelectedDocuments()[0]}> + </LinkMenu> + }> + <div id="linkButton" onPointerDown={this.onLinkButtonDown} ref={this._linkButton}></div> + </Flyout>); + } return ( <div id="documentDecorations-container" style={{ width: (bounds.r - bounds.x + 40) + "px", @@ -214,16 +226,7 @@ export class DocumentDecorations extends React.Component { <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> - <Flyout - anchorPoint={anchorPoints.RIGHT_TOP} - content={ - <LinkMenu docView={SelectionManager.SelectedDocuments()[0]}> - </LinkMenu> - } - - > - <div id="linkButton" onPointerDown={this.onLinkButtonDown} ref={this._linkButton}></div> - </Flyout> + {linkButton} </div > ) 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 |