From c3a147995564a10ae7650330aa11bbbb4fabdfda Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 7 Jul 2020 15:08:21 -0500
Subject: UI change to menu

---
 src/client/views/linking/LinkMenu.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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

diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 8a7b12f48..064c24f7a 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -29,6 +29,8 @@ export class LinkMenu extends React.Component<Props> {
     @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
     private _editorRef = React.createRef<HTMLDivElement>();
 
+    @observable private _numLinks: number = 0;
+
     @action
     onClick = (e: PointerEvent) => {
 
@@ -69,6 +71,9 @@ export class LinkMenu extends React.Component<Props> {
                     showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)}
                     addDocTab={this.props.addDocTab} />
             );
+            group.forEach((item) => {
+                this._numLinks++;
+            });
         });
 
         // if source doc has no links push message
@@ -77,12 +82,16 @@ export class LinkMenu extends React.Component<Props> {
         return linkItems;
     }
 
+    @action
     render() {
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
         return <div className="linkMenu" ref={this._linkMenuRef} >
             <div className="linkMenu-list"
-                style={{ left: this.props.location[0], top: this.props.location[1] }}>
+                style={{
+                    left: this.props.location[0], top: this.props.location[1],
+                    overflowY: this._numLinks > 4 ? "scroll" : "auto"
+                }}>
                 {!this._editingLink ?
                     this.renderAllGroups(groups) :
                     <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
-- 
cgit v1.2.3-70-g09d2


From 067fe1227d1acedb78dc3a1615c15ae936f3f677 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 7 Jul 2020 17:54:33 -0500
Subject: adding apply for descriptions, author, creation date

---
 package.json                               |  2 +-
 src/client/views/linking/LinkEditor.scss   | 83 +++++++++++++++++++++++-------
 src/client/views/linking/LinkEditor.tsx    | 68 +++++++++++++++++++-----
 src/client/views/linking/LinkMenu.scss     | 13 ++++-
 src/client/views/linking/LinkMenu.tsx      | 17 +++---
 src/client/views/linking/LinkMenuItem.scss |  2 +-
 src/client/views/linking/LinkMenuItem.tsx  |  3 ++
 7 files changed, 144 insertions(+), 44 deletions(-)

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

diff --git a/package.json b/package.json
index 62a554355..5a6c6f0b1 100644
--- a/package.json
+++ b/package.json
@@ -249,4 +249,4 @@
         "xoauth2": "^1.2.0",
         "xregexp": "^4.3.0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 406a38c26..937427e46 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -3,12 +3,12 @@
 .linkEditor {
     width: 100%;
     height: auto;
-    font-size: 12px; // TODO
+    font-size: 13px; // TODO
     user-select: none;
 }
 
 .linkEditor-button-back {
-    margin-bottom: 6px;
+    //margin-bottom: 6px;
     border-radius: 10px;
     width: 18px;
     height: 18px;
@@ -17,12 +17,13 @@
 
 .linkEditor-info {
     //border-bottom: 0.5px solid $light-color-secondary;
-    padding-bottom: 4px;
+    //padding-bottom: 1px;
     padding-top: 5px;
     padding-left: 5px;
     //margin-bottom: 6px;
     display: flex;
     justify-content: space-between;
+    color: black;
 
     .linkEditor-linkedTo {
         width: calc(100% - 26px);
@@ -31,30 +32,65 @@
     }
 }
 
+.linkEditor-moreInfo {
+    margin-left: 12px;
+    padding-left: 13px;
+    padding-right: 6.5px;
+    padding-bottom: 4px;
+    font-size: 9px;
+    //font-style: italic;
+    text-decoration-color: grey;
+}
+
 .linkEditor-description {
     padding-left: 6.5px;
     padding-right: 6.5px;
     padding-bottom: 3.5px;
 
-    .linkEditor-description-text {
-        text-decoration-color: grey;
+    .linkEditor-description-label {
+        text-decoration-color: black;
+        color: black;
     }
 
     .linkEditor-description-input {
-        border: 1px solid grey;
-        border-radius: 4px;
-        background-color: rgb(236, 236, 236);
-        padding-left: 2px;
-        padding-right: 2px;
-        color: grey;
-        text-decoration-color: grey;
+        display: flex;
+
+        .linkEditor-description-editing {
+            min-width: 85%;
+            //border: 1px solid grey;
+            //border-radius: 4px;
+            padding-left: 2px;
+            padding-right: 2px;
+            margin-right: 4px;
+            color: black;
+            text-decoration-color: grey;
+        }
+
+        .linkEditor-description-add-button {
+            display: inline;
+            /* float: right; */
+            border-radius: 9px;
+            font-size: 9px;
+            background-color: black;
+            /* padding: 3px; */
+            padding-top: 4px;
+            padding-left: 3px;
+            padding-bottom: 4px;
+            padding-right: 5px;
+            height: 80%;
+            color: white;
+        }
     }
 }
 
 .linkEditor-followingDropdown {
     padding-left: 6.5px;
     padding-right: 6.5px;
-    padding-bottom: 3.5px;
+    padding-bottom: 6px;
+
+    .linkEditor-followingDropdown-label {
+        color: black;
+    }
 
     .linkEditor-followingDropdown-dropdown {
 
@@ -62,11 +98,11 @@
 
             border: 1px solid grey;
             border-radius: 4px;
-            background-color: rgb(236, 236, 236);
+            //background-color: rgb(236, 236, 236);
             padding-left: 2px;
             padding-right: 2px;
-            color: grey;
-            text-decoration-color: grey;
+            text-decoration-color: black;
+            color: black;
 
             .linkEditor-followingDropdown-icon {
                 float: right;
@@ -77,17 +113,22 @@
             padding-left: 3px;
             padding-right: 3px;
 
+            &:last-child {
+                border-bottom: none;
+            }
+
             .linkEditor-followingDropdown-option {
-                border: 0.25px dotted grey;
-                background-color: rgb(236, 236, 236);
+                border: 0.25px solid grey;
+                //background-color: rgb(236, 236, 236);
                 padding-left: 2px;
                 padding-right: 2px;
                 color: grey;
                 text-decoration-color: grey;
                 font-size: 9px;
+                border-top: none;
 
                 &:hover {
-                    background-color: rgb(211, 210, 210);
+                    background-color: rgb(187, 220, 231);
                 }
             }
 
@@ -98,6 +139,10 @@
 }
 
 
+
+
+
+
 .linkEditor-button,
 .linkEditor-addbutton {
     width: 18px;
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 014d57ed0..7af11bca1 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, computed } from "mobx";
+import { action, observable, computed, toJS } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, Opt } from "../../../fields/Doc";
-import { StrCast } from "../../../fields/Types";
+import { StrCast, DateCast } from "../../../fields/Types";
 import { Utils } from "../../../Utils";
 import { LinkManager } from "../../util/LinkManager";
 import './LinkEditor.scss';
@@ -291,6 +291,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
 
     @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default";
 
+    @observable showInfo: boolean = false;
+
+    @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
+
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
@@ -308,19 +312,44 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     }
 
+    @action
+    onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setDescripValue(this.description);
+            document.getElementById('input')?.blur();
+        }
+    }
+
+    @action
+    onDown = () => {
+        this.setDescripValue(this.description);
+    }
+
+    @action
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.description = e.target.value;
+    }
+
+
     @computed
     get editDescription() {
         return <div className="linkEditor-description">
             <div className="linkEditor-description-label">
-                Link Description:</div>
+                Link Label:</div>
             <div className="linkEditor-description-input">
-                <EditableView
-                    GetValue={() => StrCast(LinkManager.currentLink?.description)}
-                    SetValue={value => { this.setDescripValue(value); return false; }}
-                    contents={LinkManager.currentLink?.description}
-                    placeholder={"(optional) enter link description"}
-                    color={"rgb(88, 88, 88)"}
-                ></EditableView></div></div>;
+                <div className="linkEditor-description-editing">
+                    <input
+                        id="input"
+                        value={this.description}
+                        placeholder={"enter link label"}
+                        // color={"rgb(88, 88, 88)"}
+                        onKeyDown={this.onKey}
+                        onChange={this.handleChange}
+                    ></input>
+                </div>
+                <div className="linkEditor-description-add-button"
+                    onPointerDown={this.onDown}>Add</div>
+            </div></div>;
     }
 
     @action
@@ -346,7 +375,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     {this.followBehavior}
                     <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
                         icon={this.openDropdown ? "chevron-up" : "chevron-down"}
-                        size={"lg"} onPointerDown={this.changeDropdown} />
+                        size={"lg"} />
                 </div>
                 <div className="linkEditor-followingDropdown-optionsList"
                     style={{ display: this.openDropdown ? "" : "none" }}>
@@ -367,6 +396,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         </div>;
     }
 
+    @action
+    changeInfo = () => {
+        this.showInfo = !this.showInfo;
+    }
+
     render() {
         const destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
 
@@ -382,11 +416,17 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         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>{
+                    <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">
-                        <FontAwesomeIcon icon="trash" size="sm" /></button>
+                    {/* <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
+                        <FontAwesomeIcon icon="trash" size="sm" /></button> */}
+                    <FontAwesomeIcon icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
                 </div>
+                {this.showInfo ? <div className="linkEditor-moreInfo">
+                    <div>{this.props.linkDoc.author ? <div> <b>Author:</b> {this.props.linkDoc.author}</div> : null}</div>
+                    <div>{this.props.linkDoc.creationDate ? <div> <b>Creation Date:</b>
+                        {DateCast(this.props.linkDoc.creationDate).toString()}</div> : null}</div>
+                </div> : null}
 
                 <div>{this.editDescription}</div>
                 <div>{this.followingDropdown}</div>
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 10a24c5ca..422ab0430 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,7 +3,8 @@
 .linkMenu {
     width: 100%;
     height: auto;
-    //border: 1px solid black;
+
+    border: 1px solid black;
 
     // &:hover {
     //     width: calc(auto + 26px);
@@ -11,9 +12,13 @@
 }
 
 .linkMenu-list {
+
     border: 1px solid black;
+
+    box-shadow: 3px 3px 1.5px grey;
+
     max-height: 170px;
-    //overflow-y: scroll;
+    overflow-y: scroll;
     position: absolute;
     z-index: 10;
     background: white;
@@ -34,6 +39,10 @@
     border-bottom: 0.5px solid lightgray;
     //@extend: 5px 0;
 
+    &:last-child {
+        border-bottom: none;
+    }
+
     .linkMenu-group-name {
         display: flex;
 
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 064c24f7a..478ac3fe6 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { DocumentView } from "../nodes/DocumentView";
 import { LinkEditor } from "./LinkEditor";
@@ -29,7 +29,14 @@ export class LinkMenu extends React.Component<Props> {
     @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
     private _editorRef = React.createRef<HTMLDivElement>();
 
-    @observable private _numLinks: number = 0;
+    //@observable private _numLinks: number = 0;
+
+    // @computed get overflow() {
+    //     if (this._numLinks) {
+    //         return "scroll";
+    //     }
+    //     return "auto";
+    // }
 
     @action
     onClick = (e: PointerEvent) => {
@@ -71,9 +78,6 @@ export class LinkMenu extends React.Component<Props> {
                     showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)}
                     addDocTab={this.props.addDocTab} />
             );
-            group.forEach((item) => {
-                this._numLinks++;
-            });
         });
 
         // if source doc has no links push message
@@ -82,7 +86,6 @@ export class LinkMenu extends React.Component<Props> {
         return linkItems;
     }
 
-    @action
     render() {
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
@@ -90,7 +93,7 @@ export class LinkMenu extends React.Component<Props> {
             <div className="linkMenu-list"
                 style={{
                     left: this.props.location[0], top: this.props.location[1],
-                    overflowY: this._numLinks > 4 ? "scroll" : "auto"
+                    //overflowY: "scroll",
                 }}>
                 {!this._editingLink ?
                     this.renderAllGroups(groups) :
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index df8a3cadb..8578d0b75 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -103,7 +103,7 @@
         width: 20px;
         height: 20px;
         margin: 0;
-        //margin-right: 6px;
+        margin-right: 4px;
         padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 6af474513..59a88a1d9 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -78,7 +78,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
 
     onEdit = (e: React.PointerEvent): void => {
+
+        console.log("Edit");
         LinkManager.currentLink = this.props.linkDoc;
+        console.log(this.props.linkDoc);
         setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
     }
 
-- 
cgit v1.2.3-70-g09d2


From 2b1af3fab4cc51f8cbb577ed51842cec1774a355 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 8 Jul 2020 13:22:49 -0500
Subject: restructured textbox comment, cleaned menu UI

---
 src/client/views/linking/LinkEditor.scss           | 15 ++--
 src/client/views/linking/LinkEditor.tsx            |  3 +-
 src/client/views/linking/LinkMenu.scss             | 71 ++++++++++------
 src/client/views/linking/LinkMenu.tsx              | 18 ++--
 src/client/views/linking/LinkMenuItem.scss         | 29 ++++---
 src/client/views/linking/LinkMenuItem.tsx          | 10 ++-
 .../formattedText/FormattedTextBoxComment.scss     | 99 +++++++++-------------
 .../formattedText/FormattedTextBoxComment.tsx      | 53 +++---------
 8 files changed, 143 insertions(+), 155 deletions(-)

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

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 937427e46..87afc99eb 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -40,6 +40,10 @@
     font-size: 9px;
     //font-style: italic;
     text-decoration-color: grey;
+
+    .button {
+        color: black;
+    }
 }
 
 .linkEditor-description {
@@ -61,7 +65,7 @@
             //border-radius: 4px;
             padding-left: 2px;
             padding-right: 2px;
-            margin-right: 4px;
+            //margin-right: 4px;
             color: black;
             text-decoration-color: grey;
         }
@@ -69,14 +73,14 @@
         .linkEditor-description-add-button {
             display: inline;
             /* float: right; */
-            border-radius: 9px;
+            border-radius: 7px;
             font-size: 9px;
             background-color: black;
             /* padding: 3px; */
             padding-top: 4px;
-            padding-left: 3px;
+            padding-left: 7px;
             padding-bottom: 4px;
-            padding-right: 5px;
+            padding-right: 8px;
             height: 80%;
             color: white;
         }
@@ -102,10 +106,11 @@
             padding-left: 2px;
             padding-right: 2px;
             text-decoration-color: black;
-            color: black;
+            color: rgb(94, 94, 94);
 
             .linkEditor-followingDropdown-icon {
                 float: right;
+                color: black;
             }
         }
 
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 7af11bca1..a26685318 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -339,6 +339,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
             <div className="linkEditor-description-input">
                 <div className="linkEditor-description-editing">
                     <input
+                        style={{ width: "100%" }}
                         id="input"
                         value={this.description}
                         placeholder={"enter link label"}
@@ -420,7 +421,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
                     {/* <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
                         <FontAwesomeIcon icon="trash" size="sm" /></button> */}
-                    <FontAwesomeIcon icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
+                    <FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
                 </div>
                 {this.showInfo ? <div className="linkEditor-moreInfo">
                     <div>{this.props.linkDoc.author ? <div> <b>Author:</b> {this.props.linkDoc.author}</div> : null}</div>
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 422ab0430..4f7ac3275 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -1,37 +1,59 @@
 @import "../globalCssVariables";
 
 .linkMenu {
-    width: 100%;
+    width: auto;
     height: auto;
 
-    border: 1px solid black;
 
-    // &:hover {
-    //     width: calc(auto + 26px);
-    // }
-}
+    .linkMenu-list {
 
-.linkMenu-list {
+        display: inline-block;
 
-    border: 1px solid black;
+        border: 1px solid black;
 
-    box-shadow: 3px 3px 1.5px grey;
+        box-shadow: 3px 3px 1.5px grey;
 
-    max-height: 170px;
-    overflow-y: scroll;
-    position: absolute;
-    z-index: 10;
-    background: white;
-    min-width: 150px;
-    //border-radius: 5px;
-    //padding-top: 6.5px;
-    //padding-bottom: 6.5px;
-    //padding-left: 6.5px;
-    //padding-right: 2px;
-    width: calc(auto + 50px);
+        max-height: 170px;
+        overflow-y: scroll;
+        position: relative;
+        z-index: 10;
+        background: white;
+        min-width: 170px;
+        //border-radius: 5px;
+        //padding-top: 6.5px;
+        //padding-bottom: 6.5px;
+        //padding-left: 6.5px;
+        //padding-right: 2px;
+        //width: calc(auto + 50px);
 
-    &:last-child {
-        border-bottom: none;
+        white-space: nowrap;
+
+        overflow-x: hidden;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &:hover {
+            padding-right: 65px;
+            display: inline-block;
+        }
+    }
+
+    .linkMenu-listEditor {
+
+        display: inline-block;
+
+        border: 1px solid black;
+
+        box-shadow: 3px 3px 1.5px grey;
+
+        max-height: 170px;
+        overflow-y: scroll;
+        position: relative;
+        z-index: 10;
+        background: white;
+        min-width: 170px;
     }
 }
 
@@ -39,6 +61,7 @@
     border-bottom: 0.5px solid lightgray;
     //@extend: 5px 0;
 
+
     &:last-child {
         border-bottom: none;
     }
@@ -54,7 +77,7 @@
             }
 
             p.expand-one {
-                width: calc(100% + 26px);
+                width: calc(100% + 20px);
             }
 
             .linkEditor-tableButton {
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 478ac3fe6..234cd5e07 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -90,16 +90,16 @@ 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" ref={this._linkMenuRef} >
-            <div className="linkMenu-list"
-                style={{
-                    left: this.props.location[0], top: this.props.location[1],
-                    //overflowY: "scroll",
-                }}>
-                {!this._editingLink ?
-                    this.renderAllGroups(groups) :
+             {!this._editingLink ? <div className="linkMenu-list" style={{
+                  left: this.props.location[0], top: this.props.location[1] }}>
+              {this.renderAllGroups(groups)} 
+              </div> : <div className="linkMenu-listEditor" style={{
+                  left: this.props.location[0], top: this.props.location[1]}}>
                     <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
                         showLinks={action(() => this._editingLink = undefined)} />
-                }
-            </div> </div>;
+                </div> 
+            }
+
+        </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 8578d0b75..9f1f82ce2 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -26,6 +26,8 @@
                 color: rgb(85, 120, 196);
                 font-size: 14px;
                 padding-bottom: 2px;
+                padding-right: 4px;
+                margin-right: 4px;
             }
 
             .linkMenu-description {
@@ -36,12 +38,16 @@
             }
 
             p {
-                //padding: 4px 2px;
+                padding-right: 4px;
                 line-height: 12px;
                 border-radius: 5px;
-                overflow-wrap: break-word;
+                //overflow-wrap: break-word;
                 user-select: none;
             }
+
+            &:hover {
+                padding-right: 8px;
+            }
         }
 
     }
@@ -60,6 +66,7 @@
 
     &:hover {
 
+        width: calc(100% + 58px);
 
         .linkMenu-item-buttons {
             display: flex;
@@ -74,19 +81,13 @@
                 text-overflow: break;
             }
 
-            &.expand-two p {
-                width: calc(100% - 52px);
-                //text-decoration: underline;
-                //color: rgb(15, 57, 148);
-                //background-color: lightgray;
-            }
+            // &.expand-two p {
+            //     width: calc(100% - 63px);
+            // }
 
-            &.expand-three p {
-                width: calc(100% - 84px);
-                //text-decoration: underline;
-                //color: rgb(15, 57, 148);
-                //background-color: lightgray;
-            }
+            // &.expand-three p {
+            //     width: calc(100% - 93px);
+            // }
         }
     }
 }
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 59a88a1d9..57993d240 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, observable } from 'mobx';
 import { observer } from "mobx-react";
@@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
 import { DocumentView } from '../nodes/DocumentView';
 import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
-library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt);
+library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash);
 
 
 interface LinkMenuItemProps {
@@ -179,6 +179,8 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType);
         const canExpand = keys ? keys.length > 0 : false;
 
+        const eyeIcon = this.props.linkDoc.shown ? "eye-slash" : "eye";
+
         return (
             <div className="linkMenu-item">
                 <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
@@ -203,6 +205,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                             {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="Show link" className="button" ref={this._editRef} onPointerDown={emptyFunction}>
+                                <FontAwesomeIcon className="fa-icon" icon={eyeIcon} size="sm" /></div>
+
+
                             <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
                                 <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
                             <div title="Delete link" className="button" onPointerDown={this.deleteLink}>
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
index 9089e7039..286ccf22d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
@@ -8,6 +8,45 @@
     margin-bottom: 7px;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
+    box-shadow: 3px 3px 1.5px grey;
+
+    .FormattedTextBoxComment-title {
+        background-color: white;
+        border: 8px solid white;
+
+        .FormattedTextBoxComment-button {
+            display: inline;
+            padding-left: 6px;
+            padding-right: 6px;
+            padding-top: 2.5px;
+            padding-bottom: 2.5px;
+            width: 20px;
+            height: 20px;
+            margin: 0;
+            margin-right: 6px;
+            border-radius: 50%;
+            pointer-events: auto;
+            background-color: rgb(0, 0, 0);
+            color: rgb(255, 255, 255);
+            transition: transform 0.2s;
+            text-align: center;
+            position: relative;
+            font: 10px;
+
+            &:hover {
+                background-color: rgb(77, 77, 77);
+                cursor: grab;
+            }
+        }
+
+        .FormattedTextBoxComment-preview-wrapper {
+            max-width: 180px;
+            max-height: 168px;
+            overflow: hidden;
+            overflow-y: hidden;
+            padding-top: 5px;
+        }
+    }
 }
 
 .FormattedTextBox-tooltip:before {
@@ -42,64 +81,4 @@
     top: 50%;
     right: 0;
     transform: translateY(-50%);
-
-    .FormattedTextBoxComment-button {
-        width: 20px;
-        height: 20px;
-        margin: 0;
-        margin-right: 6px;
-        border-radius: 50%;
-        pointer-events: auto;
-        background-color: rgb(38, 40, 41);
-        color: rgb(178, 181, 184);
-        font-size: 65%;
-        transition: transform 0.2s;
-        text-align: center;
-        position: relative;
-
-        // margin-top: "auto";
-        //     margin-bottom: "auto";
-        //     background: black;
-        //     color: white;
-        //     display: inline-block;
-        //     border-radius: 18px;
-        //     font-size: 12.5px;
-        //     width: 18px;
-        //     height: 18px;
-        //     margin-top: auto;
-        //     margin-bottom: auto;
-        //     margin-right: 3px;
-        //     cursor: pointer;
-        //     transition: transform 0.2s;
-
-        .FormattedTextBoxComment-fa-icon {
-            margin-top: "auto";
-            margin-bottom: "auto";
-            background: black;
-            color: white;
-            display: inline-block;
-            border-radius: 18px;
-            font-size: 12.5px;
-            width: 18px;
-            height: 18px;
-            margin-top: auto;
-            margin-bottom: auto;
-            margin-right: 3px;
-            cursor: pointer;
-            transition: transform 0.2s;
-            // position: absolute;
-            // top: 50%;
-            // left: 50%;
-            // transform: translate(-50%, -50%);
-        }
-
-        &:last-child {
-            margin-right: 0;
-        }
-
-        &:hover {
-            background: rgb(53, 146, 199);
-            ;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 56826e5c7..79b09b374 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -241,52 +241,22 @@ export class FormattedTextBoxComment {
                             }
                             if (target?.author) {
                                 FormattedTextBoxComment.showCommentbox("", view, nbef);
-                                const docPreview = <div style={{ backgroundColor: "white", border: "8px solid white" }}>
+
+
+                                const docPreview = <div className="FormattedTextBoxComment-title">
                                     {target.title}
                                     <div className="wrapper" style={{ float: "right" }}>
-                                        <div title="Delete link" className="FormattedTextBoxComment-button" style={{
-                                            display: "inline",
-                                            paddingLeft: "6px",
-                                            paddingRight: "6px",
-                                            paddingTop: "2.5px",
-                                            paddingBottom: "2.5px",
-                                            width: "20px",
-                                            height: "20px",
-                                            margin: 0,
-                                            marginRight: "6px",
-                                            borderRadius: "50%",
-                                            pointerEvents: "auto",
-                                            backgroundColor: "rgb(38, 40, 41)",
-                                            color: "rgb(178, 181, 184)",
-                                            transition: "transform 0.2s",
-                                            textAlign: "center",
-                                            position: "relative"
-                                        }} ref={(r) => this._deleteRef = r}>
-                                            <FontAwesomeIcon className="FormattedTextBox-fa-icon" icon="trash"
+                                        <div title="Delete link" className="FormattedTextBoxComment-button"
+                                            ref={(r) => this._deleteRef = r}>
+                                            <FontAwesomeIcon className="FormattedTextBoxComment-fa-icon" icon="trash" color="white"
                                                 size="sm" /></div>
-                                        <div title="Follow link" className="FormattedTextBoxComment-button" style={{
-                                            display: "inline",
-                                            paddingLeft: "6px",
-                                            paddingRight: "6px",
-                                            paddingTop: "2.5px",
-                                            paddingBottom: "2.5px",
-                                            width: "20px",
-                                            height: "20px",
-                                            margin: 0,
-                                            marginRight: "6px",
-                                            borderRadius: "50%",
-                                            pointerEvents: "auto",
-                                            backgroundColor: "rgb(38, 40, 41)",
-                                            color: "rgb(178, 181, 184)",
-                                            transition: "transform 0.2s",
-                                            textAlign: "center",
-                                            position: "relative"
-                                        }} ref={(r) => this._followRef = r}>
-                                            <FontAwesomeIcon className="FormattedTextBox-fa-icon" icon="arrow-right"
+                                        <div title="Follow link" className="FormattedTextBoxComment-button"
+                                            ref={(r) => this._followRef = r}>
+                                            <FontAwesomeIcon className="FormattedTextBoxComment-fa-icon" icon="arrow-right" color="white"
                                                 size="sm" />
                                         </div>
                                     </div>
-                                    <div className="wrapper" style={{
+                                    <div className="FormattedTextBoxComment-preview-wrapper" style={{
                                         maxWidth: "180px", maxHeight: "168px", overflow: "hidden",
                                         overflowY: "hidden", paddingTop: "5px"
                                     }}>
@@ -318,6 +288,9 @@ export class FormattedTextBoxComment {
                                         />
                                     </div>
                                 </div>;
+
+
+
                                 FormattedTextBoxComment.showCommentbox("", view, nbef);
 
                                 ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText);
-- 
cgit v1.2.3-70-g09d2


From f159aa5378b433111d15d08ffe37d1e342958466 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 12 Jul 2020 13:42:03 -0400
Subject: fixed display of linkMenu

---
 src/client/views/GestureOverlay.scss           |  2 +-
 src/client/views/GestureOverlay.tsx            |  2 +-
 src/client/views/MainView.tsx                  | 10 +++++-----
 src/client/views/linking/LinkMenu.scss         |  2 +-
 src/client/views/linking/LinkMenu.tsx          | 18 ++++++++++--------
 src/client/views/nodes/DocumentLinksButton.tsx |  4 ++--
 6 files changed, 20 insertions(+), 18 deletions(-)

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

diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index f61f4a05e..c9d78890e 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,7 +1,7 @@
 .gestureOverlay-cont {
     width: 100vw;
     height: 100vh;
-    position: fixed;
+    position: relative;
     top: 0;
     left: 0;
     touch-action: none;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 768057c22..a48b7b673 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -845,7 +845,7 @@ export default class GestureOverlay extends Touchable {
 
     render() {
         return (
-            <div className="gestureOverlay-cont" style={{ position: "relative" }} ref={this._overlayRef}
+            <div className="gestureOverlay-cont" ref={this._overlayRef}
                 onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
                 {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
                 {this.elements}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b9ee58d5d..92f1dfec0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -612,16 +612,16 @@ export class MainView extends React.Component {
             <InkOptionsMenu />
             <FormatShapePane />
             <RichTextMenu key="rich" />
-            <GestureOverlay >
-                {this.mainContent}
-            </GestureOverlay>
-            <PreviewCursor />
-            <LinkCreatedBox />
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
                 linkDoc={LinkDocPreview.LinkInfo.linkDoc} linkSrc={LinkDocPreview.LinkInfo.linkSrc} href={LinkDocPreview.LinkInfo.href}
                 addDocTab={LinkDocPreview.LinkInfo.addDocTab} /> : (null)}
+            <GestureOverlay >
+                {this.mainContent}
+            </GestureOverlay>
+            <PreviewCursor />
+            <LinkCreatedBox />
             <ContextMenu />
             <FormatShapePane />
             <RadialMenu />
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 1fa185150..3fb0ff517 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,7 +3,7 @@
 .linkMenu {
     width: auto;
     height: auto;
-
+    position: absolute;
 
     .linkMenu-list {
 
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 234cd5e07..2d151e9bc 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -44,8 +44,8 @@ export class LinkMenu extends React.Component<Props> {
         LinkDocPreview.LinkInfo = undefined;
 
 
-        if (this._linkMenuRef && !!!this._linkMenuRef.current?.contains(e.target as any)) {
-            if (this._editorRef && !!!this._editorRef.current?.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;
             }
@@ -90,14 +90,16 @@ 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" ref={this._linkMenuRef} >
-             {!this._editingLink ? <div className="linkMenu-list" style={{
-                  left: this.props.location[0], top: this.props.location[1] }}>
-              {this.renderAllGroups(groups)} 
-              </div> : <div className="linkMenu-listEditor" style={{
-                  left: this.props.location[0], top: this.props.location[1]}}>
+            {!this._editingLink ? <div className="linkMenu-list" style={{
+                left: this.props.location[0], top: this.props.location[1]
+            }}>
+                {this.renderAllGroups(groups)}
+            </div> : <div className="linkMenu-listEditor" style={{
+                left: this.props.location[0], top: this.props.location[1]
+            }}>
                     <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
                         showLinks={action(() => this._editingLink = undefined)} />
-                </div> 
+                </div>
             }
 
         </div>;
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 1c15b31de..e6e4aa6c2 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -63,7 +63,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             if (doubleTap && this.props.InMenu) {
                 //action(() => Doc.BrushDoc(this.props.View.Document));
                 DocumentLinksButton.StartLink = this.props.View;
-            } else if (!!!this.props.InMenu) {
+            } else if (!this.props.InMenu) {
                 console.log("editing");
                 this.props.View ? console.log("view") : null;
                 DocumentLinksButton.EditLink = this.props.View;
@@ -77,7 +77,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         if (this.props.InMenu) {
             DocumentLinksButton.StartLink = this.props.View;
             //action(() => Doc.BrushDoc(this.props.View.Document));
-        } else if (!!!this.props.InMenu) {
+        } else if (!this.props.InMenu) {
             DocumentLinksButton.EditLink = this.props.View;
             DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY];
         }
-- 
cgit v1.2.3-70-g09d2