diff options
Diffstat (limited to 'src/client/views/linking/LinkMenuItem.tsx')
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 50 |
1 files changed, 33 insertions, 17 deletions
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 85e97f95f..81dd0eb98 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -9,7 +9,8 @@ import { Doc } from '../../../fields/Doc'; import { Cast, DocCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { DocumentType } from '../../documents/DocumentTypes'; -import { DragManager } from '../../util/DragManager'; +import { DocumentManager } from '../../util/DocumentManager'; +import { DragManager, dropActionType } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; @@ -44,7 +45,7 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume const dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs); dragData.canEmbed = true; - dragData.dropAction = 'embed'; + dragData.dropAction = dropActionType.embed; DragManager.StartDocumentDrag([dragEle], dragData, downX, downY, undefined); } @@ -74,12 +75,21 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { return this._props.sourceDoc; } + onIconDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, returnFalse, () => { + const ancestor = DocumentManager.LinkCommonAncestor(this._props.linkDoc); + if (!ancestor?.ComponentView?.removeDocument?.(this._props.linkDoc)) { + ancestor?.ComponentView?.addDocument?.(this._props.linkDoc); + } + }); + }; + onEdit = (e: React.PointerEvent) => { setupMoveUpEvents( this, e, e => { - const dragData = new DragManager.DocumentDragData([this._props.linkDoc], 'embed'); + const dragData = new DragManager.DocumentDragData([this._props.linkDoc], dropActionType.embed); dragData.dropPropertiesToRemove = ['hidden']; DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y); return true; @@ -92,8 +102,8 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { DocumentViewInternal.addDocTabFunc(trail, OpenWhere.replaceRight); } else { SelectionManager.SelectView(this._props.docView, false); - LinkManager.currentLink = this._props.linkDoc === LinkManager.currentLink ? undefined : this._props.linkDoc; - LinkManager.currentLinkAnchor = LinkManager.currentLink ? this.sourceAnchor : undefined; + LinkManager.Instance.currentLink = this._props.linkDoc === LinkManager.Instance.currentLink ? undefined : this._props.linkDoc; + LinkManager.Instance.currentLinkAnchor = LinkManager.Instance.currentLink ? this.sourceAnchor : undefined; if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) { setTimeout(action(() => (SettingsManager.Instance.propertiesWidth = 250))); @@ -136,6 +146,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this._props.linkDoc)))); @observable _hover = false; + docView = () => this._props.docView; render() { const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp; @@ -158,7 +169,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { style={{ fontSize: this._hover ? 'larger' : undefined, fontWeight: this._hover ? 'bold' : undefined, - background: LinkManager.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + background: LinkManager.Instance.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, }}> <div className="linkMenu-item-content expand-two"> <div @@ -166,9 +177,14 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { className="linkMenu-name" //title="drag to view target. click to customize." onPointerDown={this.onLinkButtonDown}> <div className="linkMenu-item-buttons"> - <Tooltip title={<div className="dash-tooltip">Edit Link</div>}> - <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}> - <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /> + <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Edit Link</div>}> + <div className="linkMenu-icon-wrapper" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}> + <FontAwesomeIcon className="linkMenu-icon" icon="edit" size="sm" /> + </div> + </Tooltip> + <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Show/Hide Link</div>}> + <div title="click to show link" className="linkMenu-icon-wrapper" onPointerDown={this.onIconDown}> + <FontAwesomeIcon className="linkMenu-icon" icon={destinationIcon} size="sm" /> </div> </Tooltip> </div> @@ -179,7 +195,8 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { this._props.linkDoc && this._props.clearLinkEditor && LinkInfo.SetLinkInfo({ - docProps: this._props.docView._props, + DocumentView: this.docView, + styleProvider: this._props.docView._props.styleProvider, linkSrc: this._props.sourceDoc, linkDoc: this._props.linkDoc, showHeader: false, @@ -194,18 +211,17 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { </p> ) : null} <div className="linkMenu-title-wrapper"> - <div className="destination-icon-wrapper"> - <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" /> - </div> - <p className="linkMenu-destination-title"> - {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)} - </p> + <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Follow Link</div>}> + <p className="linkMenu-destination-title"> + {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)} + </p> + </Tooltip> </div> {!this._props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this._props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>} </div> <div className="linkMenu-item-buttons"> - <Tooltip title={<div className="dash-tooltip">Delete Link</div>}> + <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Delete Link</div>}> <div className="linkMenu-deleteButton" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}> <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /> </div> |