Merge branch 'master' into data-visualization-sarah

1 files changed, 25 insertions, 11 deletions

diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index ad6deeefb..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)));
@@ -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>