aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/nodes/LinkBox.tsx35
-rw-r--r--src/client/views/nodes/LinkEditor.scss15
-rw-r--r--src/client/views/nodes/LinkEditor.tsx35
-rw-r--r--src/client/views/nodes/LinkMenu.tsx64
4 files changed, 94 insertions, 55 deletions
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 25dc049b4..c7911f554 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -16,6 +16,7 @@ interface Props {
linkName: String;
pairedDoc: Document;
type: String;
+ showEditor: () => void
}
@observer
@@ -33,6 +34,8 @@ export class LinkBox extends React.Component<Props> {
onEditButtonPressed = (e: React.PointerEvent): void => {
console.log("edit down");
e.stopPropagation();
+
+ this.props.showEditor();
}
onDeleteButtonPressed = (e: React.PointerEvent): void => {
@@ -61,23 +64,23 @@ export class LinkBox extends React.Component<Props> {
render() {
return (
- <LinkEditor linkBox={this} linkDoc={this.props.linkDoc} />
- // <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.type}{this.props.pairedDoc.Title}</p>
- // </div>
- // </div>
+ //<LinkEditor linkBox={this} linkDoc={this.props.linkDoc} />
+ <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.type}{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>
+ <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
index 27446b2f2..cb191dc8c 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -7,16 +7,23 @@
.name-input {
margin-bottom: 10px;
+ padding: 5px;
font-size: 12px;
}
.description-input {
- height: 100px;
- font-size: 10px;
+ font-size: 12px;
+ padding: 5px;
+ margin-bottom: 10px;
}
.save-button {
- width: 100px;
- height: 30px;
+ width: 50px;
+ height: 20px;
background-color: #2B6091;
+ margin: 0 auto;
+ color: white;
+ text-align: center;
+ line-height: 20px;
+ font-size: 12px;
} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 405574598..3f7b4bf2d 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -2,38 +2,57 @@ import { observable, computed, action } from "mobx";
import React = require("react");
import { SelectionManager } from "../../util/SelectionManager";
import { observer } from "mobx-react";
-import './LinkBox.scss'
+import './LinkEditor.scss'
import { KeyStore } from '../../../fields/KeyStore'
import { props } from "bluebird";
import { DocumentView } from "./DocumentView";
import { Document } from "../../../fields/Document";
-import { ListField } from "../../../fields/ListField";
-import { DocumentManager } from "../../util/DocumentManager";
-import { LinkBox } from "./LinkBox";
+import { TextField } from "../../../fields/TextField";
+import { link } from "fs";
interface Props {
- linkBox: LinkBox;
linkDoc: Document;
+ showLinks: () => void;
}
@observer
export class LinkEditor extends React.Component<Props> {
+ @observable private _nameInput: string = this.props.linkDoc.GetText(KeyStore.Title, "");
+ @observable private _descriptionInput: string = this.props.linkDoc.GetText(KeyStore.LinkDescription, "");
+
+
onSaveButtonPressed = (e: React.PointerEvent): void => {
console.log("view down");
e.stopPropagation();
+ this.props.linkDoc.SetData(KeyStore.Title, this._nameInput, TextField);
+ this.props.linkDoc.SetData(KeyStore.LinkDescription, this._descriptionInput, TextField);
+
+ this.props.showLinks();
}
+
+
render() {
return (
<div className="edit-container">
- <input className="name-input" type="text" placeholder="Name..."></input>
- <input className="description-input" type="text" placeholder="Description"></input>
- <div className="save-button"></div>
+ <input onChange={this.onNameChanged} className="name-input" type="text" value={this._nameInput} placeholder="Name . . ."></input>
+ <textarea onChange={this.onDescriptionChanged} className="description-input" value={this._descriptionInput} placeholder="Description . . ."></textarea>
+ <div className="save-button" onPointerDown={this.onSaveButtonPressed}>SAVE</div>
</div>
)
}
+
+ @action
+ onNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this._nameInput = e.target.value;
+ }
+
+ @action
+ onDescriptionChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+ this._descriptionInput = e.target.value;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 577aba398..9a95a4f09 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -11,6 +11,7 @@ import { Document } from "../../../fields/Document";
import { ListField } from "../../../fields/ListField";
import { TextField } from "../../../fields/TextField";
import { FieldWaiting } from "../../../fields/Field";
+import { LinkEditor } from "./LinkEditor";
interface Props {
docView: DocumentView;
@@ -20,39 +21,48 @@ interface Props {
@observer
export class LinkMenu extends React.Component<Props> {
+ @observable private _editingLink?: Document;
+
render() {
//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, []);
+ if (this._editingLink === undefined) {
+ 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);
+ let doc = link.GetT(KeyStore.LinkedToDocs, Document);
+ if (doc && doc != FieldWaiting) {
+ return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={"Destination: "} />
+ } else {
+ return <div></div>
+ }
+
+ })}
+
+ {linkFrom.map(link => {
+ let name = link.GetData(KeyStore.Title, TextField, new String);
+ let doc = link.GetT(KeyStore.LinkedFromDocs, Document);
+ if (doc && doc != FieldWaiting) {
+ return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={"Source: "} />
+ } else {
+ return <div></div>
+ }
+ })}
+ </div>
- 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);
- let doc = link.GetT(KeyStore.LinkedToDocs, Document);
- if (doc && doc != FieldWaiting) {
- return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} type={"Destination: "} />
- } else {
- return <div></div>
- }
-
- })}
-
- {linkFrom.map(link => {
- let name = link.GetData(KeyStore.Title, TextField, new String);
- let doc = link.GetT(KeyStore.LinkedFromDocs, Document);
- if (doc && doc != FieldWaiting) {
- return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} type={"Source: "} />
- } else {
- return <div></div>
- }
- })}
</div>
+ )
+ } else {
+ return (
+ <LinkEditor linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor>
+ )
+ }
- </div>
- )
}
} \ No newline at end of file