restructured textbox comment, cleaned menu UI

8 files changed, 143 insertions, 155 deletions

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);