diff options
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 62 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentLinksButton.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentLinksButton.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 2 |
4 files changed, 6 insertions, 62 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 106b7163e..49c15f764 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -113,48 +113,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get view0() { return this.props.views()?.[0]; } - @action - onLinkButtonMoved = (e: PointerEvent) => { - if (this._linkButton.current !== null) { - const linkDrag = UndoManager.StartBatch("Drag Link"); - this.view0 && DragManager.StartLinkDrag(this._linkButton.current, this.view0.props.Document, e.pageX, e.pageY, { - dragComplete: dropEv => { - const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop - if (this.view0 && linkDoc) { - !linkDoc.linkRelationship && (Doc.GetProto(linkDoc).linkRelationship = "hyperlink"); - - // we want to allow specific views to handle the link creation in their own way (e.g., rich text makes text hyperlinks) - // the dragged view can regiser a linkDropCallback to be notified that the link was made and to update their data structures - // however, the dropped document isn't so accessible. What we do is set the newly created link document on the documentView - // The documentView passes a function prop returning this link doc to its descendants who can react to changes to it. - dropEv.linkDragData?.linkDropCallback?.(dropEv.linkDragData); - runInAction(() => this.view0!._link = linkDoc); - setTimeout(action(() => this.view0!._link = undefined), 0); - } - linkDrag?.end(); - }, - hideSource: false - }); - return true; - } - return false; - } - - - onLinkButtonDown = (e: React.PointerEvent): void => { - setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, (e, doubleTap) => { - if (doubleTap) { - if (!DocumentLinksButton.StartLink) { - runInAction(() => DocumentLinksButton.StartLink = this.view0); - } else { - DocumentLinksButton.StartLink !== this.view0 && this.view0 && - DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.view0.props.Document }, "long drag"); - } - } - }); - } - - @computed get considerGoogleDocsPush() { const targetDoc = this.view0?.props.Document; @@ -245,22 +203,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV } @computed - get linkButton() { - const view0 = this.view0; - const linkCount = view0 && DocListCast(view0.props.Document.links).length; - return !view0 ? (null) : - <div className="documentButtonBar-button"> - <div title="Drag(create link) Tap(view links)" className="documentButtonBar-linkFlyout" ref={this._linkButton}> - <div className={"documentButtonBar-linkButton-" + (linkCount ? "nonempty" : "empty")} - style={{ backgroundColor: "lightBlue", color: "black", border: DocumentLinksButton.StartLink ? "solid red 2px" : "" }} - onPointerDown={this.onLinkButtonDown} > - {linkCount ? linkCount : <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />} - </div> - </div> - </div>; - } - - @computed get metadataButton() { const view0 = this.view0; return !view0 ? (null) : <div title="Show metadata panel" className="documentButtonBar-linkFlyout"> @@ -328,7 +270,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; return <div className="documentButtonBar"> - {this.linkButton} + <div className="documentButtonBar-button"> + <DocumentLinksButton View={this.view0!} /> + </div> <div className="documentButtonBar-button"> {this.templateButton} </div> diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 79364ab8e..484f8c469 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -6,7 +6,6 @@ .documentLinksButton-startLink { height: 20px; width: 20px; - left: -15px; position: absolute; border-radius: 50%; opacity: 0.9; diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index fc314ae8b..ef900fff6 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -16,6 +16,7 @@ export const Flyout = higflyout.default; interface DocumentLinksButtonProps { View: DocumentView; + Offset?: number[]; } @observer export class DocumentLinksButton extends React.Component<DocumentLinksButtonProps, {}> { @@ -80,7 +81,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp get linkButton() { const links = DocListCast(this.props.View.props.Document.links); return !links.length || links[0].hidden ? (null) : - <div title="Drag(create link) Tap(view links)" ref={this._linkButton}> + <div title="Drag(create link) Tap(view links)" ref={this._linkButton} style={{ position: "absolute", left: this.props.Offset?.[0] }}> <div className={"documentLinksButton"} style={{ backgroundColor: DocumentLinksButton.StartLink ? "transparent" : "" }} onPointerDown={this.onLinkButtonDown} onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 4cb08bab3..8f139e39e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1047,7 +1047,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu onClick={this.onClickHandler} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.showLinks ? this.anchors : (null)} - {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.props.dontRegisterView ? (null) : <DocumentLinksButton View={this} />} + {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.props.dontRegisterView ? (null) : <DocumentLinksButton View={this} Offset={[-15, 0]} />} </div> ); } |