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/documents/Documents.ts | 9 +-- src/client/util/LinkManager.ts | 6 +- src/client/views/EditableView.tsx | 6 +- src/client/views/GestureOverlay.tsx | 2 +- src/client/views/MainView.tsx | 2 + src/client/views/RecommendationsBox.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/linking/LinkEditor.scss | 48 ++++++++++++--- src/client/views/linking/LinkEditor.tsx | 59 +++++++++++++++--- src/client/views/linking/LinkMenu.scss | 13 +++- src/client/views/linking/LinkMenu.tsx | 15 +++-- src/client/views/linking/LinkMenuGroup.tsx | 6 +- src/client/views/linking/LinkMenuItem.scss | 48 ++++++++++++--- src/client/views/linking/LinkMenuItem.tsx | 23 ++++--- src/client/views/nodes/DocumentLinksButton.tsx | 52 ++++++++++------ src/client/views/nodes/DocumentView.tsx | 42 +++++++++---- src/client/views/nodes/LinkCreatedBox.tsx | 8 +-- src/client/views/nodes/LinkDescriptionPopup.scss | 62 +++++++++++++++++++ src/client/views/nodes/LinkDescriptionPopup.tsx | 70 ++++++++++++++++++++++ 22 files changed, 393 insertions(+), 88 deletions(-) create mode 100644 src/client/views/nodes/LinkDescriptionPopup.scss create mode 100644 src/client/views/nodes/LinkDescriptionPopup.tsx (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f81c25bab..11b80aef9 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -94,6 +94,7 @@ export interface DocumentOptions { label?: string; // short form of title for use as an icon label style?: string; page?: number; + description?: string; // added for links _viewScale?: number; isDisplayPanel?: boolean; // whether the panel functions as GoldenLayout "stack" used to display documents forceActive?: boolean; @@ -259,7 +260,7 @@ export namespace Docs { }], [DocumentType.LINK, { layout: { view: LinkBox, dataField: defaultDataKey }, - options: { _height: 150 } + options: { _height: 150, description: "" } }], [DocumentType.LINKDB, { data: new List(), @@ -864,15 +865,15 @@ export namespace DocUtils { export let ActiveRecordings: Doc[] = []; export function MakeLinkToActiveAudio(doc: Doc) { - DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline")); + DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "", "audio timeline")); } - export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) { + export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string) { const sv = DocumentManager.Instance.getDocumentView(source.doc); if (sv && sv.props.ContainingCollectionDoc === target.doc) return; if (target.doc === Doc.UserDoc()) return undefined; - const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView" }, id); + const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView", description }, id); linkDoc.layout_linkView = Cast(Cast(Doc.UserDoc()["template-button-link"], Doc, null).dragFactory, Doc, null); Doc.GetProto(linkDoc).title = ComputedField.MakeFunction('self.anchor1?.title +" (" + (self.linkRelationship||"to") +") " + self.anchor2?.title'); diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 749fabfcc..6da581f35 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -1,4 +1,4 @@ -import { Doc, DocListCast } from "../../fields/Doc"; +import { Doc, DocListCast, Opt } from "../../fields/Doc"; import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { Cast, StrCast } from "../../fields/Types"; @@ -23,6 +23,10 @@ import { Scripting } from "./Scripting"; export class LinkManager { private static _instance: LinkManager; + + + public static currentLink: Opt; + public static get Instance(): LinkManager { return this._instance || (this._instance = new this()); } diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 628db366f..25a87ab56 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -194,7 +194,11 @@ export class EditableView extends React.Component { ref={this._ref} style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }} onClick={this.onClick} placeholder={this.props.placeholder}> - {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + + {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} ); } diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 487467b2b..cdc468066 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -551,7 +551,7 @@ export default class GestureOverlay extends Touchable { else if (this._d1 !== doc && !LinkManager.Instance.doesLinkExist(this._d1, doc)) { // we don't want to create a link between ink strokes (doing so makes drawing a t very hard) if (this._d1.type !== "ink" && doc.type !== "ink") { - DocUtils.MakeLink({ doc: this._d1 }, { doc: doc }, "gestural link"); + DocUtils.MakeLink({ doc: this._d1 }, { doc: doc }, "gestural link", ""); actionPerformed = true; } } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 15f818d1f..68ea51456 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -61,6 +61,7 @@ import { LinkMenu } from './linking/LinkMenu'; import { LinkDocPreview } from './nodes/LinkDocPreview'; import { Fade } from '@material-ui/core'; import { LinkCreatedBox } from './nodes/LinkCreatedBox'; +import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; @observer export class MainView extends React.Component { @@ -608,6 +609,7 @@ export class MainView extends React.Component { + {LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? {
DocumentManager.Instance.jumpToDocument(doc, false)}>
-
DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "Recommender", undefined)}> +
DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "Recommender", "", undefined)}>
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 620b977fa..26c41f524 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -207,7 +207,7 @@ class TreeView extends React.Component { if (complete.linkDragData) { const sourceDoc = complete.linkDragData.linkSourceDocument; const destDoc = this.doc; - DocUtils.MakeLink({ doc: sourceDoc }, { doc: destDoc }, "tree link"); + DocUtils.MakeLink({ doc: sourceDoc }, { doc: destDoc }, "tree link", ""); e.stopPropagation(); } const docDragData = complete.docDragData; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 26abd2529..df21d6a28 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -147,7 +147,7 @@ export class CollectionView extends Touchable d instanceof Doc); first && (first.hidden = true); pushpinLink && (Doc.GetProto(pushpinLink).isPushpin = true); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b81e400b3..9bf425db2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -246,7 +246,7 @@ export class CollectionFreeFormView extends CollectionSubView { + + @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.
} */}
); diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 6468ccd3d..f827f25c2 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -11,12 +11,17 @@ position: absolute; z-index: 10; background: $link-color; - min-width: 150px + min-width: 150px; + border-radius: 5px; + padding-top: 6.5px; + padding-bottom: 6.5px; + padding-left: 6.5px; + padding-right: 2px; } .linkMenu-group { - border-bottom: 0.5px solid lightgray; - padding: 5px 0; + //border-bottom: 0.5px solid lightgray; + //@extend: 5px 0; &:last-child { @@ -26,9 +31,11 @@ .linkMenu-group-name { display: flex; + &:hover { p { background-color: lightgray; + } p.expand-one { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index c672511ac..8721b9f3d 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -11,6 +11,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { library } from "@fortawesome/fontawesome-svg-core"; import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; import { LinkDocPreview } from "../nodes/LinkDocPreview"; +import { isUndefined } from "util"; library.add(faTrash); @@ -26,18 +27,19 @@ export class LinkMenu extends React.Component { @observable private _editingLink?: Doc; @observable private _linkMenuRef: Opt; + private _editorRef = React.createRef(); @action onClick = (e: PointerEvent) => { LinkDocPreview.LinkInfo = undefined; - if (this._linkMenuRef?.contains(e.target as any)) { - DocumentLinksButton.EditLink = undefined; - } - if (this._linkMenuRef && !this._linkMenuRef.contains(e.target as any)) { - DocumentLinksButton.EditLink = undefined; + if (this._linkMenuRef && !!!this._linkMenuRef.contains(e.target as any)) { + if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) { + console.log("outside click"); + DocumentLinksButton.EditLink = undefined; + } } } @action @@ -82,7 +84,8 @@ export class LinkMenu extends React.Component { ref={(r) => this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> {!this._editingLink ? this.renderAllGroups(groups) : - this._editingLink = undefined)} /> + this._editingLink = undefined)} /> } ; } diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index 7892d381b..ec17776e3 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -26,6 +26,7 @@ export class LinkMenuGroup extends React.Component { private _drag = React.createRef(); private _table = React.createRef(); + private _menuRef = React.createRef(); onLinkButtonDown = (e: React.PointerEvent): void => { e.stopPropagation(); @@ -74,12 +75,13 @@ export class LinkMenuGroup extends React.Component { linkDoc={linkDoc} sourceDoc={this.props.sourceDoc} destinationDoc={destination} - showEditor={this.props.showEditor} />; + showEditor={this.props.showEditor} + menuRef={this._menuRef} />; } }); return ( -
+
{/*

{this.props.groupType}:

diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index e3ce69cd7..a71b2dbba 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -4,19 +4,38 @@ // border-top: 0.5px solid $main-accent; position: relative; display: flex; - font-size: 12px; .linkMenu-name { position: relative; - p { - padding: 4px 6px; - line-height: 12px; - border-radius: 5px; - overflow-wrap: break-word; - user-select: none; + .linkMenu-text { + + padding: 4px 2px; + + .linkMenu-destination-title { + text-decoration: none; + color: rgb(46, 82, 160); + font-size: 14px; + padding-bottom: 2px; + } + + .linkMenu-description { + text-decoration: none; + font-style: italic; + color: rgb(95, 97, 102); + font-size: 10px; + } + + p { + //padding: 4px 2px; + line-height: 12px; + border-radius: 5px; + overflow-wrap: break-word; + user-select: none; + } } + } .linkMenu-item-content { @@ -32,19 +51,30 @@ } &:hover { + .linkMenu-item-buttons { display: flex; } .linkMenu-item-content { + + .linkMenu-destination-title { + text-decoration: underline; + color: rgb(15, 57, 148); + } + &.expand-two p { width: calc(100% - 52px); - background-color: lightgray; + //text-decoration: underline; + //color: rgb(15, 57, 148); + //background-color: lightgray; } &.expand-three p { width: calc(100% - 84px); - background-color: lightgray; + //text-decoration: underline; + //color: rgb(15, 57, 148); + //background-color: lightgray; } } } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 04cd83ee0..891c6d263 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -26,6 +26,7 @@ interface LinkMenuItemProps { destinationDoc: Doc; showEditor: (linkDoc: Doc) => void; addDocTab: (document: Doc, where: string) => boolean; + menuRef: React.Ref; } // drag links and drop link targets (aliasing them if needed) @@ -77,6 +78,7 @@ export class LinkMenuItem extends React.Component { @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; } onEdit = (e: React.PointerEvent): void => { + LinkManager.currentLink = this.props.linkDoc; setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc)); } @@ -110,7 +112,8 @@ export class LinkMenuItem extends React.Component { document.removeEventListener("pointerup", this.onLinkButtonUp); document.addEventListener("pointerup", this.onLinkButtonUp); - if (this._buttonRef && this._buttonRef.current?.contains(e.target as any)) { + if (this._buttonRef && !!!this._buttonRef.current?.contains(e.target as any)) { + console.log("outside click"); LinkDocPreview.LinkInfo = undefined; } } @@ -174,18 +177,24 @@ export class LinkMenuItem extends React.Component { Location: [e.clientX, e.clientY + 20] }))} onPointerDown={this.onLinkButtonDown}> -

{StrCast(this.props.destinationDoc.title)}

+ +
+

+ {StrCast(this.props.destinationDoc.title)}

+ {this.props.linkDoc.description !== "" ?

+ {StrCast(this.props.linkDoc.description)}

: null}
+
{canExpand ?
this.toggleShowMore(e)}>
: <>} - {/*
-
*/} +
+
-
- -
+ {/*
+
*/}
{this._showMore ? this.renderMetadata() : <>} diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index bfd860f65..5d1a68af5 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -11,6 +11,8 @@ import { DocUtils } from "../../documents/Documents"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { LinkDocPreview } from "./LinkDocPreview"; import { LinkCreatedBox } from "./LinkCreatedBox"; +import { LinkDescriptionPopup } from "./LinkDescriptionPopup"; +import { LinkManager } from "../../util/LinkManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -54,6 +56,7 @@ export class DocumentLinksButton extends React.Component { setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { if (doubleTap && this.props.InMenu) { @@ -87,15 +90,22 @@ export class DocumentLinksButton extends React.Component { - LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 120; - LinkCreatedBox.linkCreated = true; - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + + if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) { + const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + LinkManager.currentLink = linkDoc; + runInAction(() => { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); + } } } })); @@ -109,15 +119,21 @@ export class DocumentLinksButton extends React.Component { - LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 120; - LinkCreatedBox.linkCreated = true; - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) { + const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + LinkManager.currentLink = linkDoc; + runInAction(() => { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); + } } } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index b38db9a1e..9a4d9ac53 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -43,6 +43,8 @@ import React = require("react"); import { DocumentLinksButton } from './DocumentLinksButton'; import { MobileInterface } from '../../../mobile/MobileInterface'; import { LinkCreatedBox } from './LinkCreatedBox'; +import { LinkDescriptionPopup } from './LinkDescriptionPopup'; +import { LinkManager } from '../../util/LinkManager'; library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight, fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, @@ -642,30 +644,46 @@ export class DocumentView extends DocComponent(Docu e.stopPropagation(); de.complete.annoDragData.linkedToDoc = true; + const linkDoc = DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link"); + LinkManager.currentLink = linkDoc; + runInAction(() => { LinkCreatedBox.popupX = de.x; - LinkCreatedBox.popupY = de.y; + LinkCreatedBox.popupY = de.y - 33; LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = de.x; + LinkDescriptionPopup.popupY = de.y; + LinkDescriptionPopup.descriptionPopup = true; + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); }); - - DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link"); } if (de.complete.linkDragData) { e.stopPropagation(); // const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true); // const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView); - runInAction(() => { - LinkCreatedBox.popupX = de.x; - LinkCreatedBox.popupY = de.y; - LinkCreatedBox.linkCreated = true; - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + if (de.complete.linkDragData.linkSourceDocument !== this.props.Document) { + const linkDoc = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument }, + { doc: this.props.Document }, `link`); + LinkManager.currentLink = linkDoc; + + de.complete.linkDragData.linkSourceDocument !== this.props.Document && + (de.complete.linkDragData.linkDocument = linkDoc); // TODODO this is where in text links get passed + runInAction(() => { + LinkCreatedBox.popupX = de.x; + LinkCreatedBox.popupY = de.y - 33; + LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = de.x; + LinkDescriptionPopup.popupY = de.y; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); + } - de.complete.linkDragData.linkSourceDocument !== this.props.Document && - (de.complete.linkDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument }, - { doc: this.props.Document }, `link`)); // TODODO this is where in text links get passed } } diff --git a/src/client/views/nodes/LinkCreatedBox.tsx b/src/client/views/nodes/LinkCreatedBox.tsx index d157d3fca..648ae23c8 100644 --- a/src/client/views/nodes/LinkCreatedBox.tsx +++ b/src/client/views/nodes/LinkCreatedBox.tsx @@ -11,8 +11,8 @@ import { Fade } from "@material-ui/core"; export class LinkCreatedBox extends React.Component<{}> { @observable public static linkCreated: boolean = false; - @observable public static popupX: number = 600; - @observable public static popupY: number = 250; + @observable public static popupX: number = 500; + @observable public static popupY: number = 150; @action public static changeLinkCreated = () => { @@ -23,8 +23,8 @@ export class LinkCreatedBox extends React.Component<{}> { return
Link Created
; } diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss new file mode 100644 index 000000000..474bd919b --- /dev/null +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -0,0 +1,62 @@ +.linkDescriptionPopup { + + display: flex; + + border: 1px solid rgb(100, 100, 100); + + width: auto; + position: absolute; + + height: auto; + z-index: 10000; + border-radius: 10px; + font-size: 12px; + //white-space: nowrap; + + background-color: rgba(250, 250, 250, 0.95); + padding-top: 9px; + padding-bottom: 9px; + padding-left: 9px; + padding-right: 9px; + + .linkDescriptionPopup-input { + float: left; + color: rgb(100, 100, 100); + } + + .linkDescriptionPopup-btn { + + float: right; + + + .linkDescriptionPopup-btn-dismiss { + background-color: white; + color: black; + display: inline; + right: 0; + border-radius: 10px; + border: 1px solid black; + padding: 3px; + font-size: 9px; + text-align: center; + position: relative; + transform: translateY(5px); + } + + .linkDescriptionPopup-btn-add { + background-color: black; + color: white; + display: inline; + right: 0; + border-radius: 10px; + border: 1px solid black; + padding: 3px; + font-size: 9px; + text-align: center; + position: relative; + transform: translateY(5px); + } + } + + +} \ No newline at end of file diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx new file mode 100644 index 000000000..078a738e7 --- /dev/null +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -0,0 +1,70 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./LinkDescriptionPopup.scss"; +import { observable, action } from "mobx"; +import { EditableView } from "../EditableView"; +import { LinkManager } from "../../util/LinkManager"; + + +@observer +export class LinkDescriptionPopup extends React.Component<{}> { + + @observable public static descriptionPopup: boolean = false; + @observable public static popupX: number = 700; + @observable public static popupY: number = 350; + @observable description: string = ""; + @observable popupRef = React.createRef(); + + @action + descriptionChanged = (e: React.ChangeEvent) => { + this.description = e.currentTarget.value; + } + + @action + setDescription = () => { + if (LinkManager.currentLink) { + LinkManager.currentLink.description = this.description; + } + LinkDescriptionPopup.descriptionPopup = false; + } + + @action + onDismiss = () => { + LinkDescriptionPopup.descriptionPopup = false; + } + + @action + onClick = (e: PointerEvent) => { + if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) { + LinkDescriptionPopup.descriptionPopup = false; + } + } + + @action + componentDidMount() { + document.addEventListener("pointerdown", this.onClick); + } + + componentWillUnmount() { + document.removeEventListener("pointerdown", this.onClick); + } + + render() { + return
+ this.descriptionChanged(e)}> + +
+
Dismiss
+
Add
+
+
; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 45fb8ba4be961f8b0b28cda05ceb5023f84cdb03 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 4 Jul 2020 23:51:30 -0500 Subject: descriptions toggle and UI cleanup --- src/client/views/collections/CollectionLinearView.scss | 12 ++++++++++++ src/client/views/collections/CollectionLinearView.tsx | 14 ++++++++++++++ src/client/views/nodes/DocumentLinksButton.tsx | 14 ++++++++------ src/client/views/nodes/LinkDescriptionPopup.scss | 13 ++++++++++--- src/client/views/nodes/LinkDescriptionPopup.tsx | 3 +++ 5 files changed, 47 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 5ada79a28..b8b72e756 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -35,6 +35,18 @@ font-size: 12.5px; } + .bottomPopup-descriptions { + display: inline; + white-space: nowrap; + padding-left: 8px; + padding-right: 8px; + vertical-align: middle; + background-color: lightgrey; + border-radius: 5.5px; + color: black; + margin-right: 5px; + } + .bottomPopup-exit { display: inline; white-space: nowrap; diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 7cbe5c19d..35c28406a 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -15,6 +15,7 @@ import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { LinkDescriptionPopup } from '../nodes/LinkDescriptionPopup'; type LinearDocument = makeInterface<[typeof documentSchema,]>; @@ -89,6 +90,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { DocumentLinksButton.StartLink = undefined; } + @action + changeDescriptionSetting = () => { + if (LinkDescriptionPopup.showDescriptions === "ON") { + LinkDescriptionPopup.showDescriptions = "OFF"; + LinkDescriptionPopup.descriptionPopup = false; + } else { + LinkDescriptionPopup.showDescriptions = "ON"; + } + } + render() { const guid = Utils.GenerateGuid(); const flexDir: any = StrCast(this.Document.flexDirection); @@ -155,6 +166,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { onPointerDown={e => e.stopPropagation()} > Creating link from: {DocumentLinksButton.StartLink.title} + Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"} + Exit diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 5d1a68af5..544f5fd7f 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -96,11 +96,11 @@ export class DocumentLinksButton extends React.Component { LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.popupY = e.screenY - 133; LinkCreatedBox.linkCreated = true; LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY; + LinkDescriptionPopup.popupY = e.screenY - 100; LinkDescriptionPopup.descriptionPopup = true; setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); @@ -124,12 +124,14 @@ export class DocumentLinksButton extends React.Component { LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.popupY = e.screenY - 133; LinkCreatedBox.linkCreated = true; - LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY; - LinkDescriptionPopup.descriptionPopup = true; + if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) { + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY - 100; + LinkDescriptionPopup.descriptionPopup = true; + } setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); }); diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index 474bd919b..54002fd1b 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -2,7 +2,7 @@ display: flex; - border: 1px solid rgb(100, 100, 100); + border: 1px solid rgb(170, 26, 26); width: auto; position: absolute; @@ -21,13 +21,19 @@ .linkDescriptionPopup-input { float: left; + background-color: rgba(250, 250, 250, 0.95); color: rgb(100, 100, 100); + border: none; + min-width: 160px; } .linkDescriptionPopup-btn { float: right; + justify-content: center; + vertical-align: middle; + .linkDescriptionPopup-btn-dismiss { background-color: white; @@ -40,7 +46,8 @@ font-size: 9px; text-align: center; position: relative; - transform: translateY(5px); + margin-right: 4px; + justify-content: center; } .linkDescriptionPopup-btn-add { @@ -54,7 +61,7 @@ font-size: 9px; text-align: center; position: relative; - transform: translateY(5px); + justify-content: center; } } diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index 078a738e7..3bb52d9fb 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -4,12 +4,14 @@ import "./LinkDescriptionPopup.scss"; import { observable, action } from "mobx"; import { EditableView } from "../EditableView"; import { LinkManager } from "../../util/LinkManager"; +import { LinkCreatedBox } from "./LinkCreatedBox"; @observer export class LinkDescriptionPopup extends React.Component<{}> { @observable public static descriptionPopup: boolean = false; + @observable public static showDescriptions: string = "ON"; @observable public static popupX: number = 700; @observable public static popupY: number = 350; @observable description: string = ""; @@ -37,6 +39,7 @@ export class LinkDescriptionPopup extends React.Component<{}> { onClick = (e: PointerEvent) => { if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) { LinkDescriptionPopup.descriptionPopup = false; + LinkCreatedBox.linkCreated = false; } } -- 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') 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') 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 e7326c10d2f94c11dedec1d0a280579ba8fa7af0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 6 Jul 2020 23:48:44 -0500 Subject: andy's UI changes --- src/client/views/linking/LinkMenu.scss | 4 +++- src/client/views/linking/LinkMenuItem.scss | 7 ++++--- src/client/views/linking/LinkMenuItem.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++++-- 4 files changed, 14 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 4b9f5641a..b0c729cda 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -3,6 +3,7 @@ .linkMenu { width: 100%; height: auto; + border: 1px solid black; &:hover { width: calc(auto + 26px); @@ -10,11 +11,12 @@ } .linkMenu-list { + border: 1px solid black; max-height: 200px; overflow-y: scroll; position: absolute; z-index: 10; - background: $link-color; + background: white; min-width: 150px; border-radius: 5px; padding-top: 6.5px; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 7fecc2820..67bf71fb9 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -16,7 +16,7 @@ .linkMenu-destination-title { text-decoration: none; - color: rgb(46, 82, 160); + color: rgb(85, 120, 196); font-size: 14px; padding-bottom: 2px; } @@ -62,8 +62,9 @@ .linkMenu-destination-title { text-decoration: underline; - color: rgb(15, 57, 148); - display: inline; + color: rgb(60, 90, 156); + //display: inline; + text-overflow: break; } &.expand-two p { diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 9f6b47375..bd4024902 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -201,7 +201,7 @@ export class LinkMenuItem extends React.Component {
: <>}
-
+
{/*
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 544f5fd7f..7fb447cab 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -146,10 +146,14 @@ export class DocumentLinksButton extends React.Component +
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') 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"}