following dropdown UI

4 files changed, 100 insertions, 7 deletions

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}