From 8264ac5484c0c7b5d47cb78ce60f5d6568e736d9 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 4 Jul 2020 17:25:10 -0500
Subject: redesigned editing menu, added link descriptions and popup on created

---
 src/client/views/linking/LinkMenuItem.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

(limited to 'src/client/views/linking/LinkMenuItem.tsx')

diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 04cd83ee0..891c6d263 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -26,6 +26,7 @@ interface LinkMenuItemProps {
     destinationDoc: Doc;
     showEditor: (linkDoc: Doc) => void;
     addDocTab: (document: Doc, where: string) => boolean;
+    menuRef: React.Ref<HTMLDivElement>;
 }
 
 // drag links and drop link targets (aliasing them if needed)
@@ -77,6 +78,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
 
     onEdit = (e: React.PointerEvent): void => {
+        LinkManager.currentLink = this.props.linkDoc;
         setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
     }
 
@@ -110,7 +112,8 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         document.removeEventListener("pointerup", this.onLinkButtonUp);
         document.addEventListener("pointerup", this.onLinkButtonUp);
 
-        if (this._buttonRef && this._buttonRef.current?.contains(e.target as any)) {
+        if (this._buttonRef && !!!this._buttonRef.current?.contains(e.target as any)) {
+            console.log("outside click");
             LinkDocPreview.LinkInfo = undefined;
         }
     }
@@ -174,18 +177,24 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                             Location: [e.clientX, e.clientY + 20]
                         }))}
                         onPointerDown={this.onLinkButtonDown}>
-                        <p >{StrCast(this.props.destinationDoc.title)}</p>
+
+                        <div className="linkMenu-text">
+                            <p className="linkMenu-destination-title"
+                                onPointerDown={this.followDefault}>
+                                {StrCast(this.props.destinationDoc.title)}</p>
+                            {this.props.linkDoc.description !== "" ? <p className="linkMenu-description">
+                                {StrCast(this.props.linkDoc.description)}</p> : null} </div>
+
                         <div className="linkMenu-item-buttons" ref={this._buttonRef} >
                             {canExpand ? <div title="Show more" className="button" onPointerDown={e => this.toggleShowMore(e)}>
                                 <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
 
-                            {/* <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
-                                <FontAwesomeIcon className="fa-icon" icon="pencil-alt" size="sm" /></div> */}
+                            <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
+                                <FontAwesomeIcon className="fa-icon" icon="pencil-alt" size="sm" /></div>
                             <div title="Delete link" className="button" onPointerDown={this.deleteLink}>
                                 <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
-                            <div title="Follow link" className="button" onPointerDown={this.followDefault} onContextMenu={this.onContextMenu}>
-                                <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" />
-                            </div>
+                            {/* <div title="Follow link" className="button" onPointerDown={this.followDefault} onContextMenu={this.onContextMenu}>
+                                <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div> */}
                         </div>
                     </div>
                     {this._showMore ? this.renderMetadata() : <></>}
-- 
cgit v1.2.3-70-g09d2


From f200719609743ffea8405d9ff159cf415ff0a833 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 6 Jul 2020 14:06:02 -0500
Subject: implemented follow behavior options

---
 src/client/views/linking/LinkEditor.tsx    |  9 +++++----
 src/client/views/linking/LinkMenu.scss     |  7 ++++++-
 src/client/views/linking/LinkMenuItem.scss |  4 ++++
 src/client/views/linking/LinkMenuItem.tsx  | 13 ++++++++++++-
 4 files changed, 27 insertions(+), 6 deletions(-)

(limited to 'src/client/views/linking/LinkMenuItem.tsx')

diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index fbdfda5b3..3adf44339 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -288,7 +288,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @observable description = StrCast(LinkManager.currentLink?.description);
     @observable openDropdown: boolean = false;
 
-    @observable currentFollow: string = "Default";
+    @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default";
 
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
@@ -330,7 +330,8 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @action
     changeFollowBehavior = (follow: string) => {
         this.openDropdown = false;
-        this.currentFollow = follow;
+        this.followBehavior = follow;
+        this.props.linkDoc.follow = follow;
     }
 
     @computed
@@ -340,7 +341,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 Follow Behavior:</div>
             <div className="linkEditor-followingDropdown-dropdown">
                 <div className="linkEditor-followingDropdown-header">
-                    {this.currentFollow}
+                    {this.followBehavior}
                     <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
                         icon={this.openDropdown ? "chevron-up" : "chevron-down"}
                         size={"sm"} onPointerDown={this.changeDropdown} />
@@ -348,7 +349,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 {this.openDropdown ?
                     <div className="linkEditor-followingDropdown-optionsList">
                         <div className="linkEditor-followingDropdown-option"
-                            onPointerDown={() => this.changeFollowBehavior("default")}>
+                            onPointerDown={() => this.changeFollowBehavior("Default")}>
                             Default
                         </div>
                         <div className="linkEditor-followingDropdown-option"
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index f827f25c2..4b9f5641a 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,6 +3,10 @@
 .linkMenu {
     width: 100%;
     height: auto;
+
+    &:hover {
+        width: calc(auto + 26px);
+    }
 }
 
 .linkMenu-list {
@@ -17,6 +21,7 @@
     padding-bottom: 6.5px;
     padding-left: 6.5px;
     padding-right: 2px;
+    //width: calc(auto + 50px);
 }
 
 .linkMenu-group {
@@ -39,7 +44,7 @@
             }
 
             p.expand-one {
-                width: calc(100% - 26px);
+                width: calc(100% + 26px);
             }
 
             .linkEditor-tableButton {
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index a71b2dbba..7fecc2820 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -12,6 +12,7 @@
         .linkMenu-text {
 
             padding: 4px 2px;
+            //display: inline;
 
             .linkMenu-destination-title {
                 text-decoration: none;
@@ -52,6 +53,7 @@
 
     &:hover {
 
+
         .linkMenu-item-buttons {
             display: flex;
         }
@@ -61,6 +63,7 @@
             .linkMenu-destination-title {
                 text-decoration: underline;
                 color: rgb(15, 57, 148);
+                display: inline;
             }
 
             &.expand-two p {
@@ -81,6 +84,7 @@
 }
 
 .linkMenu-item-buttons {
+    //@extend: right;
     position: absolute;
     top: 50%;
     right: 0;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 891c6d263..9f6b47375 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -150,7 +150,18 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         console.log("FOLLOWWW");
         DocumentLinksButton.EditLink = undefined;
         LinkDocPreview.LinkInfo = undefined;
-        DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
+
+        if (this.props.linkDoc.follow) {
+            if (this.props.linkDoc.follow === "Default") {
+                DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
+            } else if (this.props.linkDoc.follow === "Always open in right tab") {
+                this.props.addDocTab(this.props.sourceDoc, "onRight");
+            } else if (this.props.linkDoc.follow === "Always open in new tab") {
+                this.props.addDocTab(this.props.sourceDoc, "inTab");
+            }
+        } else {
+            DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
+        }
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From e7326c10d2f94c11dedec1d0a280579ba8fa7af0 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 6 Jul 2020 23:48:44 -0500
Subject: andy's UI changes

---
 src/client/views/linking/LinkMenu.scss         | 4 +++-
 src/client/views/linking/LinkMenuItem.scss     | 7 ++++---
 src/client/views/linking/LinkMenuItem.tsx      | 2 +-
 src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++++--
 4 files changed, 14 insertions(+), 7 deletions(-)

(limited to 'src/client/views/linking/LinkMenuItem.tsx')

diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 4b9f5641a..b0c729cda 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,6 +3,7 @@
 .linkMenu {
     width: 100%;
     height: auto;
+    border: 1px solid black;
 
     &:hover {
         width: calc(auto + 26px);
@@ -10,11 +11,12 @@
 }
 
 .linkMenu-list {
+    border: 1px solid black;
     max-height: 200px;
     overflow-y: scroll;
     position: absolute;
     z-index: 10;
-    background: $link-color;
+    background: white;
     min-width: 150px;
     border-radius: 5px;
     padding-top: 6.5px;
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 7fecc2820..67bf71fb9 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -16,7 +16,7 @@
 
             .linkMenu-destination-title {
                 text-decoration: none;
-                color: rgb(46, 82, 160);
+                color: rgb(85, 120, 196);
                 font-size: 14px;
                 padding-bottom: 2px;
             }
@@ -62,8 +62,9 @@
 
             .linkMenu-destination-title {
                 text-decoration: underline;
-                color: rgb(15, 57, 148);
-                display: inline;
+                color: rgb(60, 90, 156);
+                //display: inline;
+                text-overflow: break;
             }
 
             &.expand-two p {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 9f6b47375..bd4024902 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -201,7 +201,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                                 <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
 
                             <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
-                                <FontAwesomeIcon className="fa-icon" icon="pencil-alt" size="sm" /></div>
+                                <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
                             <div title="Delete link" className="button" onPointerDown={this.deleteLink}>
                                 <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
                             {/* <div title="Follow link" className="button" onPointerDown={this.followDefault} onContextMenu={this.onContextMenu}>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 544f5fd7f..7fb447cab 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -146,10 +146,14 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
     @computed
     get linkButton() {
         const links = DocListCast(this.props.View.props.Document.links);
+
+        const title = this.props.InMenu ? "Drag or tap to create links" : "Tap to view links";
+
         return (!links.length || links[0].hidden) && !this.props.AlwaysOn ? (null) :
-            <div title="Drag(create link) Tap(view links)" ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
+            <div title={title} ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
                 <div className={"documentLinksButton"} style={{
-                    backgroundColor: DocumentLinksButton.StartLink ? "transparent" : "",
+                    backgroundColor: DocumentLinksButton.StartLink ? "transparent" : this.props.InMenu ? "black" : "",
+                    color: this.props.InMenu ? "white" : "black",
                     width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold"
                 }}
                     onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
-- 
cgit v1.2.3-70-g09d2


From 8f9a90eca5edf8bb3acbf6437534c26385316f3d Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 7 Jul 2020 00:29:57 -0500
Subject: fixing bugs and adding consistency

---
 src/client/views/linking/LinkEditor.scss  | 14 ++++++-------
 src/client/views/linking/LinkEditor.tsx   | 33 ++++++++++++++++---------------
 src/client/views/linking/LinkMenu.scss    |  2 +-
 src/client/views/linking/LinkMenu.tsx     | 17 ++++++++--------
 src/client/views/linking/LinkMenuItem.tsx |  4 ++--
 5 files changed, 36 insertions(+), 34 deletions(-)

(limited to 'src/client/views/linking/LinkMenuItem.tsx')

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 5f0e5e18a..406a38c26 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -41,9 +41,9 @@
     }
 
     .linkEditor-description-input {
-        border: 1px solid rgb(114, 162, 179);
+        border: 1px solid grey;
         border-radius: 4px;
-        background-color: lightblue;
+        background-color: rgb(236, 236, 236);
         padding-left: 2px;
         padding-right: 2px;
         color: grey;
@@ -60,9 +60,9 @@
 
         .linkEditor-followingDropdown-header {
 
-            border: 1px solid rgb(114, 162, 179);
+            border: 1px solid grey;
             border-radius: 4px;
-            background-color: lightblue;
+            background-color: rgb(236, 236, 236);
             padding-left: 2px;
             padding-right: 2px;
             color: grey;
@@ -78,8 +78,8 @@
             padding-right: 3px;
 
             .linkEditor-followingDropdown-option {
-                border: 0.25px dotted rgb(114, 162, 179);
-                background-color: lightblue;
+                border: 0.25px dotted grey;
+                background-color: rgb(236, 236, 236);
                 padding-left: 2px;
                 padding-right: 2px;
                 color: grey;
@@ -87,7 +87,7 @@
                 font-size: 9px;
 
                 &:hover {
-                    background-color: rgb(141, 197, 216);
+                    background-color: rgb(211, 210, 210);
                 }
             }
 
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 3adf44339..93aae0852 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -12,6 +12,7 @@ import React = require("react");
 import { DocumentView } from "../nodes/DocumentView";
 import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
 import { EditableView } from "../EditableView";
+import { RefObject } from "react";
 
 library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus);
 
@@ -346,22 +347,21 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         icon={this.openDropdown ? "chevron-up" : "chevron-down"}
                         size={"sm"} onPointerDown={this.changeDropdown} />
                 </div>
-                {this.openDropdown ?
-                    <div className="linkEditor-followingDropdown-optionsList">
-                        <div className="linkEditor-followingDropdown-option"
-                            onPointerDown={() => this.changeFollowBehavior("Default")}>
-                            Default
+                <div className="linkEditor-followingDropdown-optionsList"
+                    style={{ display: this.openDropdown ? "" : "none" }}>
+                    <div className="linkEditor-followingDropdown-option"
+                        onPointerDown={() => this.changeFollowBehavior("Default")}>
+                        Default
                         </div>
-                        <div className="linkEditor-followingDropdown-option"
-                            onPointerDown={() => this.changeFollowBehavior("Always open in right tab")}>
-                            Always open in right tab
+                    <div className="linkEditor-followingDropdown-option"
+                        onPointerDown={() => this.changeFollowBehavior("Always open in right tab")}>
+                        Always open in right tab
                         </div>
-                        <div className="linkEditor-followingDropdown-option"
-                            onPointerDown={() => this.changeFollowBehavior("Always open in new tab")}>
-                            Always open in new tab
+                    <div className="linkEditor-followingDropdown-option"
+                        onPointerDown={() => this.changeFollowBehavior("Always open in new tab")}>
+                        Always open in new tab
                         </div>
-                    </div>
-                    : null}
+                </div>
             </div>
         </div>;
     }
@@ -377,9 +377,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         return !destination ? (null) : (
             <div className="linkEditor">
                 <div className="linkEditor-info">
-                    {this.props.hideback ? (null) : <button className="linkEditor-button-back"
-                        onPointerDown={this.props.showLinks}>
-                        <FontAwesomeIcon icon="arrow-left" size="sm" /></button>}
+                    <button className="linkEditor-button-back"
+                        style={{ display: this.props.hideback ? "none" : "" }}
+                        onClick={this.props.showLinks}>
+                        <FontAwesomeIcon icon="arrow-left" size="sm" /> </button>
                     <p className="linkEditor-linkedTo">editing link to: <b>{
                         destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
                     <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index b0c729cda..4b1a3f425 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,7 +3,7 @@
 .linkMenu {
     width: 100%;
     height: auto;
-    border: 1px solid black;
+    //border: 1px solid black;
 
     &:hover {
         width: calc(auto + 26px);
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index c2e410b73..8a7b12f48 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -80,13 +80,14 @@ export class LinkMenu extends React.Component<Props> {
     render() {
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
-        return <div className="linkMenu-list"
-            ref={this._linkMenuRef} style={{ left: this.props.location[0], top: this.props.location[1] }}>
-            {!this._editingLink ?
-                this.renderAllGroups(groups) :
-                <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
-                    showLinks={action(() => this._editingLink = undefined)} />
-            }
-        </div>;
+        return <div className="linkMenu" ref={this._linkMenuRef} >
+            <div className="linkMenu-list"
+                style={{ left: this.props.location[0], top: this.props.location[1] }}>
+                {!this._editingLink ?
+                    this.renderAllGroups(groups) :
+                    <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
+                        showLinks={action(() => this._editingLink = undefined)} />
+                }
+            </div> </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index bd4024902..6af474513 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -155,9 +155,9 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             if (this.props.linkDoc.follow === "Default") {
                 DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
             } else if (this.props.linkDoc.follow === "Always open in right tab") {
-                this.props.addDocTab(this.props.sourceDoc, "onRight");
+                this.props.addDocTab(this.props.destinationDoc, "onRight");
             } else if (this.props.linkDoc.follow === "Always open in new tab") {
-                this.props.addDocTab(this.props.sourceDoc, "inTab");
+                this.props.addDocTab(this.props.destinationDoc, "inTab");
             }
         } else {
             DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
-- 
cgit v1.2.3-70-g09d2