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.scss | 48 ++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 9 deletions(-)

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

diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index e3ce69cd7..a71b2dbba 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -4,19 +4,38 @@
     // border-top: 0.5px solid $main-accent; 
     position: relative;
     display: flex;
-    font-size: 12px;
 
 
     .linkMenu-name {
         position: relative;
 
-        p {
-            padding: 4px 6px;
-            line-height: 12px;
-            border-radius: 5px;
-            overflow-wrap: break-word;
-            user-select: none;
+        .linkMenu-text {
+
+            padding: 4px 2px;
+
+            .linkMenu-destination-title {
+                text-decoration: none;
+                color: rgb(46, 82, 160);
+                font-size: 14px;
+                padding-bottom: 2px;
+            }
+
+            .linkMenu-description {
+                text-decoration: none;
+                font-style: italic;
+                color: rgb(95, 97, 102);
+                font-size: 10px;
+            }
+
+            p {
+                //padding: 4px 2px;
+                line-height: 12px;
+                border-radius: 5px;
+                overflow-wrap: break-word;
+                user-select: none;
+            }
         }
+
     }
 
     .linkMenu-item-content {
@@ -32,19 +51,30 @@
     }
 
     &:hover {
+
         .linkMenu-item-buttons {
             display: flex;
         }
 
         .linkMenu-item-content {
+
+            .linkMenu-destination-title {
+                text-decoration: underline;
+                color: rgb(15, 57, 148);
+            }
+
             &.expand-two p {
                 width: calc(100% - 52px);
-                background-color: lightgray;
+                //text-decoration: underline;
+                //color: rgb(15, 57, 148);
+                //background-color: lightgray;
             }
 
             &.expand-three p {
                 width: calc(100% - 84px);
-                background-color: lightgray;
+                //text-decoration: underline;
+                //color: rgb(15, 57, 148);
+                //background-color: lightgray;
             }
         }
     }
-- 
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.scss')

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.scss')

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