fixed linking issues with dragging & updating linking UI

9 files changed, 119 insertions, 84 deletions

diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index 157f3a4f2..171e7134f 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -59,6 +59,7 @@ $linkGap : 3px;
     align-items: center;
 }
 
+// depracated (now use .documentButtonBar-icon) for standard buttons
 .documentButtonBar-linker {
     height: 20px;
     width: 20px;
@@ -74,6 +75,26 @@ $linkGap : 3px;
     }
 }
 
+.documentButtonBar-icon {
+    height: 80%;
+    width: 80%;
+    font-size: 100%;
+    text-align: center;
+    border-radius: 50%;
+    pointer-events: auto;
+    background-color: $dark-gray;
+    border: none;
+    transition: 0.2s ease all;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        background-color: $black;
+    }
+}
+
 .documentButtonBar-linker:hover {
     cursor: pointer;
     transform: scale(1.05);
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 1e5380971..df1e6899d 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -110,7 +110,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
             <div
-                className="documentButtonBar-linker"
+                className="documentButtonBar-button"
                 style={{ animation }}
                 onClick={async () => {
                     await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
@@ -139,7 +139,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
 
         return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{title}</div></>}>
-            <div className="documentButtonBar-linker"
+            <div className="documentButtonBar-button"
                 style={{ backgroundColor: this.pullColor }}
                 onPointerEnter={action(e => {
                     if (e.altKey) {
@@ -188,8 +188,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={
             <div className="dash-tooltip">{"follow primary link on click"}</div>}>
-            <div className="documentButtonBar-linker"
-                style={{ color: targetDoc.isLinkButton ? "black" : "white", backgroundColor: targetDoc.isLinkButton ? "white" : "black" }}
+            <div className="documentButtonBar-icon"
+                style={{ color: targetDoc.isLinkButton ? "black" : "white" }}
                 onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false, false)))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="hand-point-right" />
             </div>
@@ -200,7 +200,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={
             <div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div>}>
-            <div className="documentButtonBar-linker"
+            <div className="documentButtonBar-icon"
                 style={{ color: "white" }}
                 onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
@@ -243,7 +243,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ margin: "auto", width: 17, transform: 'translate(0, 1px)' }} />;
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with current view"}</div></>}>
-            <div className="documentButtonBar-linker" onClick={() => this.pinWithView(targetDoc)}>
+            <div className="documentButtonBar-icon" onClick={() => this.pinWithView(targetDoc)}>
                 {presPinWithViewIcon}
             </div>
         </Tooltip>;
@@ -253,8 +253,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get shareButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Open Sharing Manager"}</div></>}>
-            <div className="documentButtonBar-linker" style={{ color: "white" }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="users" />
+            <div className="documentButtonBar-icon" style={{ color: "white" }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
+                <FontAwesomeIcon className="documentdecorations-icon" icon="users" />
             </div></Tooltip >;
     }
 
@@ -262,8 +262,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get menuButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`Open Context Menu`}</div></>}>
-            <div className="documentButtonBar-linker" style={{ color: "white", cursor: "pointer" }} onClick={e => this.openContextMenu(e)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="bars" />
+            <div className="documentButtonBar-icon" style={{ color: "white", cursor: "pointer" }} onClick={e => this.openContextMenu(e)}>
+                <FontAwesomeIcon className="documentdecorations-icon" icon="bars" />
             </div></Tooltip >;
     }
 
@@ -271,9 +271,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get moreButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${CurrentUserUtils.propertiesWidth > 0 ? "Close" : "Open"} Properties Panel`}</div></>}>
-            <div className="documentButtonBar-linker" style={{ color: "white", cursor: "e-resize" }} onClick={action(e =>
+            <div className="documentButtonBar-icon" style={{ color: "white", cursor: "e-resize" }} onClick={action(e =>
                 CurrentUserUtils.propertiesWidth = CurrentUserUtils.propertiesWidth > 0 ? 0 : 250)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="ellipsis-h"
+                <FontAwesomeIcon className="documentdecorations-icon" icon="ellipsis-h"
                 />
             </div></Tooltip >;
     }
@@ -286,7 +286,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                 <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                     content={<MetadataEntryMenu docs={this.props.views().filter(dv => dv).map(dv => dv!.props.Document)} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
                     <div className={"documentButtonBar-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
-                        {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+                        {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
                     </div>
                 </Flyout>
             </div></Tooltip>;
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 952d8d150..316f63240 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -336,7 +336,7 @@ $linkGap : 3px;
 }
 
 .documentdecorations-icon {
-    margin-top: 3px;
+    margin: 0px;
 }
 .templating-button,
 .docDecs-tagButton {
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index 86610ac20..913a65774 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -20,7 +20,7 @@
         }
 
         .bottomPopup-background {
-            background: $light-blue;
+            background: $medium-blue;
             display: flex;
             height: 35;
             transform: translate3d(6px, 0px, 0px);
@@ -30,7 +30,7 @@
         }
 
         .bottomPopup-text {
-            color: black;
+            color: $white;
             display: inline;
             white-space: nowrap;
             padding-left: 8px;
@@ -45,7 +45,7 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: #efefef;
+            background-color: $light-gray;
             border-radius: 3px;
             color: black;
             margin-right: 5px;
@@ -58,7 +58,7 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: #f3b6b6;
+            background-color: $close-red;
             border-radius: 3px;
             color: black;
         }
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index a9f33c4da..1b881ba43 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -11,7 +11,7 @@ $medium-blue: #4476F7;
 $pink: #E0217D;
 $yellow: #F5D747;
 
-$logout-red: #ca4444;
+$close-red: #e48282;
 
 $drop-shadow: "#32323215";
 
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 9bab72d55..b37b68249 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -44,25 +44,43 @@
 }
 
 .documentLinksButton {
-    background-color: black;
+    background-color: $dark-gray;
+    color: $white;
     font-weight: bold;
+    width: 80%;
+    height: 80%;
+    font-size: 100%;
+    transition: 0.2s ease all;
 
     &:hover {
-        transform: scale(1.05);
-        cursor: pointer;
+        background-color: $black;
+    }
+}
+
+.documentLinksButton.startLink {
+    background-color: $medium-blue;
+    color: $white;
+    font-weight: bold;
+    width: 80%;
+    height: 80%;
+    font-size: 100%;
+    transition: 0.2s ease all;
+
+    &:hover {
+        background-color: $black;
     }
 }
 
 .documentLinksButton-endLink {
     border: $medium-blue 2px dashed;
     color: $medium-blue;
+    background-color: none !important;
+    width: 80%;
+    height: 80%;
+    font-size: 100%;
+    transition: 0.2s ease all;
+
     &:hover {
-        background: $light-gray;
-        transform: scale(1.05);
-        cursor: pointer;
+        background-color: $light-blue;
     }
-}
-
-.documentLinksButton-startLink {
-    background-color: $medium-blue;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index cec06d2d4..482f551b5 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -68,6 +68,40 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         return false;
     }
 
+    onLinkMenuOpen = (e: React.PointerEvent): void => {
+        setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
+            if (doubleTap) {
+                const rootDoc = this.props.View.rootDoc;
+                const docid = Doc.CurrentUserEmail + Doc.GetProto(rootDoc)[Id] + "-pivotish";
+                DocServer.GetRefField(docid).then(async docx => {
+                    const rootAlias = () => {
+                        const rootAlias = Doc.MakeAlias(rootDoc);
+                        rootAlias.x = rootAlias.y = 0;
+                        return rootAlias;
+                    };
+                    let wid = rootDoc[WidthSym]();
+                    const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid);
+                    const docs = await DocListCastAsync(Doc.GetProto(target).data);
+                    if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target);
+                    DocListCast(rootDoc.links).forEach(link => {
+                        const other = LinkManager.getOppositeAnchor(link, rootDoc);
+                        const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
+                        if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
+                            const alias = Doc.MakeAlias(otherdoc);
+                            alias.x = wid;
+                            alias.y = 0;
+                            alias._lockedPosition = false;
+                            wid += otherdoc[WidthSym]();
+                            Doc.AddDocToList(Doc.GetProto(target), "data", alias);
+                        }
+                    });
+                    LightboxView.SetLightboxDoc(target);
+                });
+            }
+            else DocumentLinksButton.LinkEditorDocView = this.props.View;
+        }));
+    }
+
     @undoBatch
     onLinkButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
@@ -80,37 +114,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     DocumentLinksButton.StartLink = this.props.View.props.Document;
                     DocumentLinksButton.StartLinkView = this.props.View;
                 }
-            } else if (!this.props.InMenu) {
-                if (doubleTap) {
-                    const rootDoc = this.props.View.rootDoc;
-                    const docid = Doc.CurrentUserEmail + Doc.GetProto(rootDoc)[Id] + "-pivotish";
-                    DocServer.GetRefField(docid).then(async docx => {
-                        const rootAlias = () => {
-                            const rootAlias = Doc.MakeAlias(rootDoc);
-                            rootAlias.x = rootAlias.y = 0;
-                            return rootAlias;
-                        };
-                        let wid = rootDoc[WidthSym]();
-                        const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid);
-                        const docs = await DocListCastAsync(Doc.GetProto(target).data);
-                        if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target);
-                        DocListCast(rootDoc.links).forEach(link => {
-                            const other = LinkManager.getOppositeAnchor(link, rootDoc);
-                            const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
-                            if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
-                                const alias = Doc.MakeAlias(otherdoc);
-                                alias.x = wid;
-                                alias.y = 0;
-                                alias._lockedPosition = false;
-                                wid += otherdoc[WidthSym]();
-                                Doc.AddDocToList(Doc.GetProto(target), "data", alias);
-                            }
-                        });
-                        LightboxView.SetLightboxDoc(target);
-                    });
-                }
-                else DocumentLinksButton.LinkEditorDocView = this.props.View;
-            }
+            };
         }));
     }
 
@@ -126,7 +130,6 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 DocumentLinksButton.StartLink = this.props.View.props.Document;
                 DocumentLinksButton.StartLinkView = this.props.View;
             }
-
             //action(() => Doc.BrushDoc(this.props.View.Document));
         } else if (!this.props.InMenu) {
             DocumentLinksButton.LinkEditorDocView = this.props.View;
@@ -247,17 +250,19 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
 
     /**
      * gets the JSX of the link button (btn used to start/complete links) OR the link-view button (btn on bottom left of each linked node)
+     * 
+     * todo:glr / anh seperate functionality such as onClick onPointerDown of link menu button
      */
     @computed get linkButtonInner() {
-        const btnDim = this.props.InMenu ? "20px" : "30px";
+        const btnDim = "30px";
         const link = <img style={{ width: "22px", height: "16px" }} src={`/assets/${"link.png"}`} />;
-
+        const isActive = (DocumentLinksButton.StartLink === this.props.View.props.Document) && this.props.StartLink;
         return (!this.props.InMenu ?
-            <div className="documentLinksButton-cont" ref={this._linkButton}
+            <div className="documentLinksButton-cont"
                 style={{ left: this.props.Offset?.[0], top: this.props.Offset?.[1], right: this.props.Offset?.[2], bottom: this.props.Offset?.[3] }}
             >
                 <div className={"documentLinksButton"}
-                    onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
+                    onPointerDown={this.onLinkMenuOpen} onClick={this.onLinkClick}
                     style={{
                         backgroundColor: Colors.LIGHT_BLUE,
                         color: Colors.BLACK,
@@ -268,32 +273,23 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 </div>
             </div>
             :
-            <div className="documentLinksButton-menu">
+            <div className="documentLinksButton-menu" ref={this._linkButton}>
                 {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node
                     <div className={"documentLinksButton-endLink"}
-                        style={{
-                            width: btnDim, height: btnDim,
-                            backgroundColor: DocumentLinksButton.StartLink ? "" : Colors.LIGHT_GRAY,
-                            opacity: DocumentLinksButton.StartLink ? "" : "50%",
-                            border: DocumentLinksButton.StartLink ? "" : "none",
-                            cursor: DocumentLinksButton.StartLink ? "pointer" : "default"
-                        }}
                         onPointerDown={DocumentLinksButton.StartLink && this.completeLink}
                         onClick={e => DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}>
-                        {this.props.StartLink ?
-                            <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                            : link}
+                        <FontAwesomeIcon className="documentdecorations-icon" icon="link" />
                     </div>
                     : (null)
                 }
                 {
-                    this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again
-                        <div className={'documentLinksButton' + (DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.StartLink) ? '-startLink' : ''} onPointerDown={this.clearLinks} onClick={this.clearLinks} style={{ width: btnDim, height: btnDim }}>
-                            {this.props.StartLink ?
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                                : link}
+                    this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again
+                        <div className={`documentLinksButton ${isActive ? `startLink` : ``}`} onPointerDown={isActive ? undefined : this.onLinkButtonDown} onClick={isActive ? this.clearLinks : this.onLinkClick}>
+                            <FontAwesomeIcon className="documentdecorations-icon" icon="link" />
                         </div>
-                        : (null)}
+                        :
+                        (null)
+                }
             </div>
         )
     }
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index ebdf030e7..ac6ec9b30 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -23,6 +23,7 @@
         .topBar-icon {
             cursor: pointer;
             font-size: 12px;
+            font-family: 'Roboto';
             width: fit-content;
             display: flex;
             justify-content: center;
@@ -91,7 +92,7 @@
             gap: 5px;
 
             .topBar-icon:hover {
-                background-color: $logout-red;
+                background-color: $close-red;
             }
 
             .topbar-lozenge-user,
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index bd9935333..05edb975c 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -12,7 +12,6 @@ import { Borders, Colors } from "../global/globalEnums";
 import "./TopBar.scss";
 
 /**
- * REACT TYPE: FUNCTIONAL
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
  * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. 
  */