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/LinkEditor.scss | 48 ++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 8 deletions(-)

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

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index b47c8976e..14b2106d5 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -7,34 +7,66 @@
     user-select: none;
 }
 
-.linkEditor-back {
+.linkEditor-button-back {
     margin-bottom: 6px;
+    border-radius: 10px;
+    width: 18px;
+    height: 18px;
+    padding: 0;
 }
 
 .linkEditor-info {
-    border-bottom: 0.5px solid $light-color-secondary; 
-    padding-bottom: 6px;
-    margin-bottom: 6px;
+    //border-bottom: 0.5px solid $light-color-secondary;
+    padding-bottom: 4px;
+    padding-top: 5px;
+    padding-left: 5px;
+    //margin-bottom: 6px;
     display: flex;
     justify-content: space-between;
 
     .linkEditor-linkedTo {
         width: calc(100% - 26px);
+        padding-left: 5px;
+        padding-right: 5px
+    }
+}
+
+.linkEditor-description {
+    padding-left: 6.5px;
+    padding-right: 6.5px;
+    padding-bottom: 3.5px;
+
+    .linkEditor-description-text {
+        text-decoration-color: grey;
+    }
+
+    .linkEditor-description-input {
+        border: 1px solid rgb(114, 162, 179);
+        border-radius: 4px;
+        background-color: lightblue;
+        padding-left: 2px;
+        padding-right: 2px;
+        color: grey;
+        text-decoration-color: grey;
     }
 }
 
-.linkEditor-button, .linkEditor-addbutton {
+
+.linkEditor-button,
+.linkEditor-addbutton {
     width: 18px;
     height: 18px;
     padding: 0;
     // font-size: 12px;
     border-radius: 10px;
 
+
     &:disabled {
         background-color: gray;
     }
 }
-.linkEditor-addbutton{
+
+.linkEditor-addbutton {
     margin-left: 0px;
 }
 
@@ -44,7 +76,7 @@
 }
 
 .linkEditor-group {
-    background-color: $light-color-secondary; 
+    background-color: $light-color-secondary;
     padding: 6px;
     margin: 3px 0;
     border-radius: 3px;
@@ -56,7 +88,7 @@
 
     .linkEditor-group-row-label {
         margin-right: 6px;
-        display:inline-block;
+        display: inline-block;
     }
 
     .linkEditor-metadata-row {
-- 
cgit v1.2.3-70-g09d2


From 72fb84b1817c17667317c9e9aa6daea5ffc5acf5 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 5 Jul 2020 00:45:37 -0500
Subject: following dropdown UI

---
 .../views/collections/CollectionLinearView.tsx     | 11 ++++--
 src/client/views/linking/LinkEditor.scss           | 46 ++++++++++++++++++++++
 src/client/views/linking/LinkEditor.tsx            | 44 ++++++++++++++++++++-
 src/client/views/linking/LinkMenu.tsx              |  6 +--
 4 files changed, 100 insertions(+), 7 deletions(-)

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

diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 35c28406a..c370415be 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -92,11 +92,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
 
     @action
     changeDescriptionSetting = () => {
-        if (LinkDescriptionPopup.showDescriptions === "ON") {
+        if (LinkDescriptionPopup.showDescriptions) {
+            if (LinkDescriptionPopup.showDescriptions === "ON") {
+                LinkDescriptionPopup.showDescriptions = "OFF";
+                LinkDescriptionPopup.descriptionPopup = false;
+            } else {
+                LinkDescriptionPopup.showDescriptions = "ON";
+            }
+        } else {
             LinkDescriptionPopup.showDescriptions = "OFF";
             LinkDescriptionPopup.descriptionPopup = false;
-        } else {
-            LinkDescriptionPopup.showDescriptions = "ON";
         }
     }
 
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 14b2106d5..5f0e5e18a 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -51,6 +51,52 @@
     }
 }
 
+.linkEditor-followingDropdown {
+    padding-left: 6.5px;
+    padding-right: 6.5px;
+    padding-bottom: 3.5px;
+
+    .linkEditor-followingDropdown-dropdown {
+
+        .linkEditor-followingDropdown-header {
+
+            border: 1px solid rgb(114, 162, 179);
+            border-radius: 4px;
+            background-color: lightblue;
+            padding-left: 2px;
+            padding-right: 2px;
+            color: grey;
+            text-decoration-color: grey;
+
+            .linkEditor-followingDropdown-icon {
+                float: right;
+            }
+        }
+
+        .linkEditor-followingDropdown-optionsList {
+            padding-left: 3px;
+            padding-right: 3px;
+
+            .linkEditor-followingDropdown-option {
+                border: 0.25px dotted rgb(114, 162, 179);
+                background-color: lightblue;
+                padding-left: 2px;
+                padding-right: 2px;
+                color: grey;
+                text-decoration-color: grey;
+                font-size: 9px;
+
+                &:hover {
+                    background-color: rgb(141, 197, 216);
+                }
+            }
+
+        }
+    }
+
+
+}
+
 
 .linkEditor-button,
 .linkEditor-addbutton {
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 4a6d9f2d3..fbdfda5b3 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -286,6 +286,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
 
 
     @observable description = StrCast(LinkManager.currentLink?.description);
+    @observable openDropdown: boolean = false;
+
+    @observable currentFollow: string = "Default";
+
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
@@ -318,9 +322,47 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 ></EditableView></div></div>;
     }
 
+    @action
+    changeDropdown = () => {
+        this.openDropdown = !this.openDropdown;
+    }
+
+    @action
+    changeFollowBehavior = (follow: string) => {
+        this.openDropdown = false;
+        this.currentFollow = follow;
+    }
+
     @computed
     get followingDropdown() {
-        return "choose follow behavior";
+        return <div className="linkEditor-followingDropdown">
+            <div className="linkEditor-followingDropdown-label">
+                Follow Behavior:</div>
+            <div className="linkEditor-followingDropdown-dropdown">
+                <div className="linkEditor-followingDropdown-header">
+                    {this.currentFollow}
+                    <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
+                        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>
+                        <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>
+                    </div>
+                    : null}
+            </div>
+        </div>;
     }
 
     render() {
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 8721b9f3d..c2e410b73 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -26,7 +26,7 @@ interface Props {
 export class LinkMenu extends React.Component<Props> {
 
     @observable private _editingLink?: Doc;
-    @observable private _linkMenuRef: Opt<HTMLDivElement | null>;
+    @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
     private _editorRef = React.createRef<HTMLDivElement>();
 
     @action
@@ -35,7 +35,7 @@ export class LinkMenu extends React.Component<Props> {
         LinkDocPreview.LinkInfo = undefined;
 
 
-        if (this._linkMenuRef && !!!this._linkMenuRef.contains(e.target as any)) {
+        if (this._linkMenuRef && !!!this._linkMenuRef.current?.contains(e.target as any)) {
             if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) {
                 console.log("outside click");
                 DocumentLinksButton.EditLink = undefined;
@@ -81,7 +81,7 @@ export class LinkMenu extends React.Component<Props> {
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
         return <div className="linkMenu-list"
-            ref={(r) => this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}>
+            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}
-- 
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/LinkEditor.scss')

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