migration of link properties to propertiesView

4 files changed, 44 insertions, 46 deletions

diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 8c4d756d2..07c20dae4 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -327,21 +327,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         <FontAwesomeIcon className="linkEditor-followingDropdown-icon" icon={this.openEffectDropdown ? 'chevron-up' : 'chevron-down'} size={'lg'} />
                     </div>
                     <div className="linkEditor-followingDropdown-optionsList" style={{ display: this.openEffectDropdown ? '' : 'none' }}>
-                        {[
-                            PresEffect.None,
-                            PresEffect.Zoom,
-                            PresEffect.Lightspeed,
-                            PresEffect.Fade,
-                            PresEffect.Flip,
-                            PresEffect.Rotate,
-                            PresEffect.Bounce,
-                            PresEffect.Roll,
-                            PresEffect.Left,
-                            PresEffect.Right,
-                            PresEffect.Center,
-                            PresEffect.Top,
-                            PresEffect.Bottom,
-                        ].map(effect => (
+                        {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
                             <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeEffect(effect.toString())}>
                                 {effect.toString()}
                             </div>
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 77c16a28f..80cf93ed8 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -1,4 +1,4 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
 
 .linkMenu {
     width: auto;
@@ -13,7 +13,6 @@
         border: 1px solid #e4e4e4;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
         background: white;
-        min-width: 170px;
         max-height: 230px;
         overflow-y: scroll;
         z-index: 10;
@@ -22,7 +21,7 @@
     .linkMenu-list {
         white-space: nowrap;
         overflow-x: hidden;
-        width: 240px;
+        width: 100%;
         scrollbar-color: white;
 
         &:last-child {
@@ -39,7 +38,6 @@
     border-bottom: 0.5px solid lightgray;
     //@extend: 5px 0;
 
-
     &:last-child {
         border-bottom: none;
     }
@@ -76,4 +74,4 @@
             display: none;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 8333aa374..2ca97a27d 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -1,7 +1,7 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
 
 .linkMenu-item {
-    // border-top: 0.5px solid $medium-gray; 
+    // border-top: 0.5px solid $medium-gray;
     position: relative;
     display: flex;
     border-top: 0.5px solid #cdcdcd;
@@ -14,7 +14,6 @@
 
     background-color: white;
 
-
     .linkMenu-name {
         position: relative;
         width: auto;
@@ -22,9 +21,7 @@
         display: flex;
 
         .linkMenu-text {
-
-            // padding: 4px 2px;
-            //display: inline;
+            width: 100%;
 
             .linkMenu-source-title {
                 text-decoration: none;
@@ -35,9 +32,7 @@
                 margin-left: 20px;
             }
 
-
             .linkMenu-title-wrapper {
-
                 display: flex;
                 align-items: center;
                 min-height: 20px;
@@ -59,7 +54,7 @@
 
                 .linkMenu-destination-title {
                     text-decoration: none;
-                    color: #4476F7;
+                    color: #4476f7;
                     font-size: 13px;
                     line-height: 0.9;
                     padding-bottom: 2px;
@@ -96,9 +91,7 @@
                 //overflow-wrap: break-word;
                 user-select: none;
             }
-
         }
-
     }
 
     .linkMenu-item-content {
@@ -114,7 +107,6 @@
     }
 
     &:hover {
-
         background-color: rgb(201, 239, 252);
 
         .linkMenu-item-buttons {
@@ -122,7 +114,6 @@
         }
 
         .linkMenu-item-content {
-
             .linkMenu-destination-title {
                 text-decoration: underline;
                 color: rgb(60, 90, 156);
@@ -135,10 +126,7 @@
 
 .linkMenu-item-buttons {
     //@extend: right;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
+    position: relative;
     display: none;
 
     .button {
@@ -172,4 +160,4 @@
             cursor: pointer;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 387e0e3d5..c3b5fa997 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,12 +1,12 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast } from '../../../fields/Doc';
-import { Cast, StrCast } from '../../../fields/Types';
+import { Cast, DocCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
-import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
@@ -16,6 +16,9 @@ import { DocumentView } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenuItem.scss';
 import React = require('react');
+import { SettingsManager } from '../../util/SettingsManager';
+import { SelectionManager } from '../../util/SelectionManager';
+import { undoBatch } from '../../util/UndoManager';
 
 interface LinkMenuItemProps {
     groupType: string;
@@ -76,8 +79,19 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         this._showMore = !this._showMore;
     }
 
-    onEdit = (e: React.PointerEvent): void => {
-        LinkManager.currentLink = this.props.linkDoc;
+    @computed get sourceAnchor() {
+        const ldoc = this.props.linkDoc;
+        if (this.props.sourceDoc !== ldoc.anchor1 && this.props.sourceDoc !== ldoc.anchor2) {
+            if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.anchor1).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.anchor1);
+            if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.anchor2).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.anchor2);
+        }
+        return this.props.sourceDoc;
+    }
+    @action
+    onEdit = (e: React.PointerEvent) => {
+        const sel = SelectionManager.Views();
+        LinkManager.currentLink = this.props.linkDoc === LinkManager.currentLink ? undefined : this.props.linkDoc;
+        LinkManager.currentLinkAnchor = this.sourceAnchor;
         setupMoveUpEvents(
             this,
             e,
@@ -88,7 +102,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                 return true;
             },
             emptyFunction,
-            () => this.props.showEditor(this.props.linkDoc)
+            action(() => {
+                if ((SettingsManager.propertiesWidth ?? 0) < 100) {
+                    SettingsManager.propertiesWidth = 250;
+                }
+                //this.props.showEditor(this.props.linkDoc);
+            })
         );
     };
 
@@ -123,6 +142,8 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         );
     };
 
+    deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc))));
+
     render() {
         const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
 
@@ -141,7 +162,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                 : undefined;
 
         return (
-            <div className="linkMenu-item">
+            <div className="linkMenu-item" style={{ background: LinkManager.currentLink === this.props.linkDoc ? 'lightBlue' : undefined }}>
                 <div className={'linkMenu-item-content expand-two'}>
                     <div
                         ref={this._drag}
@@ -180,7 +201,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                         <div className="linkMenu-item-buttons" ref={this._buttonRef}>
                             <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" />
+                                    <FontAwesomeIcon className="fa-icon" icon="chevron-down" size="sm" />
+                                </div>
+                            </Tooltip>
+                            <Tooltip title={<div className="dash-tooltip">Delete Link</div>}>
+                                <div className="button" style={{ background: 'red' }} ref={this._editRef} onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
                                 </div>
                             </Tooltip>
                         </div>