From a63200e21d6304ef347a5a123839cd06ac04ec72 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 12:28:25 -0500
Subject: menu button fix and link greyed out

---
 src/client/views/nodes/DocumentLinksButton.tsx | 18 ++++++++++++------
 src/client/views/nodes/FontIconBox.scss        | 24 ++++++++++++++----------
 src/client/views/nodes/FontIconBox.tsx         | 12 ++++++------
 3 files changed, 32 insertions(+), 22 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 9395ac961..31efaaaa6 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -4,7 +4,7 @@ import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../fields/Doc";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils";
+import { emptyFunction, returnFalse, setupMoveUpEvents, emptyPath } from "../../../Utils";
 import { DocUtils } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { LinkManager } from "../../util/LinkManager";
@@ -202,9 +202,15 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     link : links.length}
 
             </div>
-            {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
-                style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
-                onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e.screenX, e.screenY)} /> : (null)}
+            {this.props.InMenu && !this.props.StartLink &&
+                DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
+                    style={{
+                        width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px",
+                        backgroundColor: DocumentLinksButton.StartLink ? "" : "grey",
+                        border: DocumentLinksButton.StartLink ? "" : "none"
+                    }}
+                    onPointerDown={DocumentLinksButton.StartLink ? this.completeLink : emptyFunction}
+                    onClick={e => DocumentLinksButton.StartLink ? this.finishLinkClick(e.screenX, e.screenY) : emptyFunction} /> : (null)}
             {DocumentLinksButton.StartLink === this.props.View && this.props.InMenu && this.props.StartLink ? <div className={"documentLinksButton-startLink"}
                 style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
                 onPointerDown={this.clearLinks} onClick={this.clearLinks}
@@ -212,10 +218,10 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         </div>;
 
         return (!links.length) && !this.props.AlwaysOn ? (null) :
-            this.props.InMenu ?
+            this.props.InMenu && (this.props.StartLink || DocumentLinksButton.StartLink) ?
                 <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                     {linkButton}
-                </Tooltip> : !!!DocumentLinksButton.EditLink ?
+                </Tooltip> : !!!DocumentLinksButton.EditLink && !this.props.InMenu ?
                     <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                         {linkButton}
                     </Tooltip> :
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 31bc471de..5bdafd857 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,5 +1,3 @@
-
-
 .fontIconBox-label {
     color: white;
     margin-right: 4px;
@@ -12,30 +10,36 @@
     border-radius: 8px;
     margin-top: -8px;
     padding: 0;
-     width: 100%;
+    width: 100%;
 }
 
 .menuButton-round {
     border-radius: 100%;
+
     .fontIconBox-label {
         margin-left: -10px; // button padding is 10px;
-        bottom:0;
+        bottom: 0;
         position: absolute;
     }
 }
+
 .menuButton-square {
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 5px;
+
     .fontIconBox-label {
         border-radius: 0px;
         margin-top: 0px;
         border-radius: "inherit";
     }
 }
-.menuButton, .menuButton-round, .menuButton-square{
+
+.menuButton,
+.menuButton-round,
+.menuButton-square {
     width: 100%;
-    height:100%;
+    height: 100%;
     pointer-events: all;
     touch-action: none;
 
@@ -43,10 +47,10 @@
         touch-action: none;
         border-radius: 8px;
 
-        &:hover {
-            background: rgb(61, 61, 61);
-            cursor: pointer;
-        }
+        // &:hover {
+        //     background: rgb(61, 61, 61);
+        //     cursor: pointer;
+        // }
     }
 
     .menuButton-icon-square {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 3561d22b6..eff5a4160 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,7 +12,6 @@ import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -66,11 +65,12 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const shape = StrCast(this.layoutDoc.iconShape, "round");
         const button = <>
             <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
-                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, }}>
-                {<FontAwesomeIcon className={`menuButton-icon-${shape}`}
-                    icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
-                    size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
-                {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
+                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor }}>
+                <div className="menuButton-wrap">
+                    {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
+                        size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
+                    {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
+                </div>
             </button>
         </>;
         return !this.layoutDoc.toolTip ? button :
-- 
cgit v1.2.3-70-g09d2