diff options
Diffstat (limited to 'src/client/views/linking')
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.scss | 32 | ||||
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 38 |
2 files changed, 41 insertions, 29 deletions
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 44c74236f..66ddd6eca 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -18,6 +18,21 @@ align-items: center; display: flex; + .linkMenu-icon-wrapper { + //border: 0.5px solid rgb(161, 161, 161); + margin-right: 2px; + padding-right: 2px; + + .linkMenu-icon { + float: left; + width: 12px; + height: 12px; + padding: 1px; + margin-right: 3px; + // color: rgb(161, 161, 161); + } + } + .linkMenu-text { width: 100%; @@ -34,22 +49,6 @@ display: flex; align-items: center; min-height: 20px; - - .destination-icon-wrapper { - //border: 0.5px solid rgb(161, 161, 161); - margin-right: 2px; - padding-right: 2px; - - .destination-icon { - float: left; - width: 12px; - height: 12px; - padding: 1px; - margin-right: 3px; - // color: rgb(161, 161, 161); - } - } - .linkMenu-destination-title { text-decoration: none; font-size: 13px; @@ -111,7 +110,6 @@ //@extend: right; position: relative; display: flex; - opacity: 0; .linkMenu-deleteButton { width: 20px; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index dc4aee1ca..e694806a5 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -9,6 +9,7 @@ import { Doc } from '../../../fields/Doc'; import { Cast, DocCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { DocumentType } from '../../documents/DocumentTypes'; +import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; @@ -74,6 +75,15 @@ 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, @@ -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,7 +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; + docView = () => this._props.docView; render() { const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp; @@ -159,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 @@ -168,8 +178,13 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { 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" /> + <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 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> @@ -196,12 +211,11 @@ 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 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> |