From 8264ac5484c0c7b5d47cb78ce60f5d6568e736d9 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 4 Jul 2020 17:25:10 -0500 Subject: redesigned editing menu, added link descriptions and popup on created --- src/client/views/linking/LinkEditor.tsx | 59 +++++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 7 deletions(-) (limited to 'src/client/views/linking/LinkEditor.tsx') diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 13b9a2459..4a6d9f2d3 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -1,14 +1,17 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, observable } from "mobx"; +import { action, observable, computed } from "mobx"; import { observer } from "mobx-react"; -import { Doc } from "../../../fields/Doc"; +import { Doc, Opt } from "../../../fields/Doc"; import { StrCast } from "../../../fields/Types"; import { Utils } from "../../../Utils"; import { LinkManager } from "../../util/LinkManager"; import './LinkEditor.scss'; import React = require("react"); +import { DocumentView } from "../nodes/DocumentView"; +import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; +import { EditableView } from "../EditableView"; library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus); @@ -281,27 +284,69 @@ interface LinkEditorProps { @observer export class LinkEditor extends React.Component { + + @observable description = StrCast(LinkManager.currentLink?.description); + + //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; + @action deleteLink = (): void => { LinkManager.Instance.deleteLink(this.props.linkDoc); this.props.showLinks(); } + @action + setDescripValue = (value: string) => { + if (LinkManager.currentLink) { + LinkManager.currentLink.description = value; + return true; + } + } + + @computed + get editDescription() { + return
+
+ Link Description:
+
+ StrCast(LinkManager.currentLink?.description)} + SetValue={value => { this.setDescripValue(value); return false; }} + contents={LinkManager.currentLink?.description} + placeholder={"(optional) enter link description"} + color={"rgb(88, 88, 88)"} + >
; + } + + @computed + get followingDropdown() { + return "choose follow behavior"; + } + render() { const destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); const groups = [this.props.linkDoc].map(groupDoc => { - return ; + return ; }); return !destination ? (null) : (
- {this.props.hideback ? (null) : }
-

editing link to: {destination.proto?.title ?? destination.title ?? "untitled"}

- + {this.props.hideback ? (null) : } +

editing link to: { + destination.proto?.title ?? destination.title ?? "untitled"}

+
- {groups.length > 0 ? groups :
There are currently no relationships associated with this link.
} + +
{this.editDescription}
+
{this.followingDropdown}
+ + {/* {groups.length > 0 ? groups :
There are currently no relationships associated with this link.
} */}
); -- cgit v1.2.3-70-g09d2 From 72fb84b1817c17667317c9e9aa6daea5ffc5acf5 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 5 Jul 2020 00:45:37 -0500 Subject: following dropdown UI --- .../views/collections/CollectionLinearView.tsx | 11 ++++-- src/client/views/linking/LinkEditor.scss | 46 ++++++++++++++++++++++ src/client/views/linking/LinkEditor.tsx | 44 ++++++++++++++++++++- src/client/views/linking/LinkMenu.tsx | 6 +-- 4 files changed, 100 insertions(+), 7 deletions(-) (limited to 'src/client/views/linking/LinkEditor.tsx') diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 35c28406a..c370415be 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -92,11 +92,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { @action changeDescriptionSetting = () => { - if (LinkDescriptionPopup.showDescriptions === "ON") { + if (LinkDescriptionPopup.showDescriptions) { + if (LinkDescriptionPopup.showDescriptions === "ON") { + LinkDescriptionPopup.showDescriptions = "OFF"; + LinkDescriptionPopup.descriptionPopup = false; + } else { + LinkDescriptionPopup.showDescriptions = "ON"; + } + } else { LinkDescriptionPopup.showDescriptions = "OFF"; LinkDescriptionPopup.descriptionPopup = false; - } else { - LinkDescriptionPopup.showDescriptions = "ON"; } } diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 14b2106d5..5f0e5e18a 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -51,6 +51,52 @@ } } +.linkEditor-followingDropdown { + padding-left: 6.5px; + padding-right: 6.5px; + padding-bottom: 3.5px; + + .linkEditor-followingDropdown-dropdown { + + .linkEditor-followingDropdown-header { + + border: 1px solid rgb(114, 162, 179); + border-radius: 4px; + background-color: lightblue; + padding-left: 2px; + padding-right: 2px; + color: grey; + text-decoration-color: grey; + + .linkEditor-followingDropdown-icon { + float: right; + } + } + + .linkEditor-followingDropdown-optionsList { + padding-left: 3px; + padding-right: 3px; + + .linkEditor-followingDropdown-option { + border: 0.25px dotted rgb(114, 162, 179); + background-color: lightblue; + padding-left: 2px; + padding-right: 2px; + color: grey; + text-decoration-color: grey; + font-size: 9px; + + &:hover { + background-color: rgb(141, 197, 216); + } + } + + } + } + + +} + .linkEditor-button, .linkEditor-addbutton { diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 4a6d9f2d3..fbdfda5b3 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -286,6 +286,10 @@ export class LinkEditor extends React.Component { @observable description = StrCast(LinkManager.currentLink?.description); + @observable openDropdown: boolean = false; + + @observable currentFollow: string = "Default"; + //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -318,9 +322,47 @@ export class LinkEditor extends React.Component { >; } + @action + changeDropdown = () => { + this.openDropdown = !this.openDropdown; + } + + @action + changeFollowBehavior = (follow: string) => { + this.openDropdown = false; + this.currentFollow = follow; + } + @computed get followingDropdown() { - return "choose follow behavior"; + return
+
+ Follow Behavior:
+
+
+ {this.currentFollow} + +
+ {this.openDropdown ? +
+
this.changeFollowBehavior("default")}> + Default +
+
this.changeFollowBehavior("Always open in right tab")}> + Always open in right tab +
+
this.changeFollowBehavior("Always open in new tab")}> + Always open in new tab +
+
+ : null} +
+
; } render() { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 8721b9f3d..c2e410b73 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -26,7 +26,7 @@ interface Props { export class LinkMenu extends React.Component { @observable private _editingLink?: Doc; - @observable private _linkMenuRef: Opt; + @observable private _linkMenuRef = React.createRef(); private _editorRef = React.createRef(); @action @@ -35,7 +35,7 @@ export class LinkMenu extends React.Component { LinkDocPreview.LinkInfo = undefined; - if (this._linkMenuRef && !!!this._linkMenuRef.contains(e.target as any)) { + if (this._linkMenuRef && !!!this._linkMenuRef.current?.contains(e.target as any)) { if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) { console.log("outside click"); DocumentLinksButton.EditLink = undefined; @@ -81,7 +81,7 @@ export class LinkMenu extends React.Component { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> + ref={this._linkMenuRef} style={{ left: this.props.location[0], top: this.props.location[1] }}> {!this._editingLink ? this.renderAllGroups(groups) : Date: Mon, 6 Jul 2020 14:06:02 -0500 Subject: implemented follow behavior options --- src/client/views/linking/LinkEditor.tsx | 9 +++++---- src/client/views/linking/LinkMenu.scss | 7 ++++++- src/client/views/linking/LinkMenuItem.scss | 4 ++++ src/client/views/linking/LinkMenuItem.tsx | 13 ++++++++++++- 4 files changed, 27 insertions(+), 6 deletions(-) (limited to 'src/client/views/linking/LinkEditor.tsx') diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index fbdfda5b3..3adf44339 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -288,7 +288,7 @@ export class LinkEditor extends React.Component { @observable description = StrCast(LinkManager.currentLink?.description); @observable openDropdown: boolean = false; - @observable currentFollow: string = "Default"; + @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default"; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -330,7 +330,8 @@ export class LinkEditor extends React.Component { @action changeFollowBehavior = (follow: string) => { this.openDropdown = false; - this.currentFollow = follow; + this.followBehavior = follow; + this.props.linkDoc.follow = follow; } @computed @@ -340,7 +341,7 @@ export class LinkEditor extends React.Component { Follow Behavior:
- {this.currentFollow} + {this.followBehavior} @@ -348,7 +349,7 @@ export class LinkEditor extends React.Component { {this.openDropdown ?
this.changeFollowBehavior("default")}> + onPointerDown={() => this.changeFollowBehavior("Default")}> Default
{ console.log("FOLLOWWW"); DocumentLinksButton.EditLink = undefined; LinkDocPreview.LinkInfo = undefined; - DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); + + if (this.props.linkDoc.follow) { + if (this.props.linkDoc.follow === "Default") { + DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); + } else if (this.props.linkDoc.follow === "Always open in right tab") { + this.props.addDocTab(this.props.sourceDoc, "onRight"); + } else if (this.props.linkDoc.follow === "Always open in new tab") { + this.props.addDocTab(this.props.sourceDoc, "inTab"); + } + } else { + DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); + } } @action -- cgit v1.2.3-70-g09d2 From 8f9a90eca5edf8bb3acbf6437534c26385316f3d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 7 Jul 2020 00:29:57 -0500 Subject: fixing bugs and adding consistency --- src/client/views/linking/LinkEditor.scss | 14 ++++++------- src/client/views/linking/LinkEditor.tsx | 33 ++++++++++++++++--------------- src/client/views/linking/LinkMenu.scss | 2 +- src/client/views/linking/LinkMenu.tsx | 17 ++++++++-------- src/client/views/linking/LinkMenuItem.tsx | 4 ++-- 5 files changed, 36 insertions(+), 34 deletions(-) (limited to 'src/client/views/linking/LinkEditor.tsx') diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 5f0e5e18a..406a38c26 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -41,9 +41,9 @@ } .linkEditor-description-input { - border: 1px solid rgb(114, 162, 179); + border: 1px solid grey; border-radius: 4px; - background-color: lightblue; + background-color: rgb(236, 236, 236); padding-left: 2px; padding-right: 2px; color: grey; @@ -60,9 +60,9 @@ .linkEditor-followingDropdown-header { - border: 1px solid rgb(114, 162, 179); + border: 1px solid grey; border-radius: 4px; - background-color: lightblue; + background-color: rgb(236, 236, 236); padding-left: 2px; padding-right: 2px; color: grey; @@ -78,8 +78,8 @@ padding-right: 3px; .linkEditor-followingDropdown-option { - border: 0.25px dotted rgb(114, 162, 179); - background-color: lightblue; + border: 0.25px dotted grey; + background-color: rgb(236, 236, 236); padding-left: 2px; padding-right: 2px; color: grey; @@ -87,7 +87,7 @@ font-size: 9px; &:hover { - background-color: rgb(141, 197, 216); + background-color: rgb(211, 210, 210); } } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 3adf44339..93aae0852 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -12,6 +12,7 @@ import React = require("react"); import { DocumentView } from "../nodes/DocumentView"; import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; import { EditableView } from "../EditableView"; +import { RefObject } from "react"; library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus); @@ -346,22 +347,21 @@ export class LinkEditor extends React.Component { icon={this.openDropdown ? "chevron-up" : "chevron-down"} size={"sm"} onPointerDown={this.changeDropdown} />
- {this.openDropdown ? -
-
this.changeFollowBehavior("Default")}> - Default +
+
this.changeFollowBehavior("Default")}> + Default
-
this.changeFollowBehavior("Always open in right tab")}> - Always open in right tab +
this.changeFollowBehavior("Always open in right tab")}> + Always open in right tab
-
this.changeFollowBehavior("Always open in new tab")}> - Always open in new tab +
this.changeFollowBehavior("Always open in new tab")}> + Always open in new tab
-
- : null} +
; } @@ -377,9 +377,10 @@ export class LinkEditor extends React.Component { return !destination ? (null) : (
- {this.props.hideback ? (null) : } +

editing link to: { destination.proto?.title ?? destination.title ?? "untitled"}