From 3c834ee55899b91f5fff8cfe5c808607f942b9f3 Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Thu, 8 Jul 2021 15:51:26 -0400
Subject: created front-end link popup on text highlight

added button to AnchorMenu marquee selector for showing the link popup after highlighting text. created the front end of the popup. need to fix visibility when clicking out
---
 src/client/views/linking/LinkPopup.tsx | 94 ++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/client/views/linking/LinkPopup.tsx

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

diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
new file mode 100644
index 000000000..71db06f19
--- /dev/null
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -0,0 +1,94 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@material-ui/core';
+import { action, observable, runInAction } from 'mobx';
+import { observer } from "mobx-react";
+import { Doc, DocListCast } from '../../../fields/Doc';
+import { Cast, StrCast } from '../../../fields/Types';
+import { WebField } from '../../../fields/URLField';
+import { emptyFunction, setupMoveUpEvents, returnFalse, returnTrue, returnEmptyDoclist, returnEmptyFilter } from '../../../Utils';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { DocumentManager } from '../../util/DocumentManager';
+import { DragManager } from '../../util/DragManager';
+import { Hypothesis } from '../../util/HypothesisUtils';
+import { LinkManager } from '../../util/LinkManager';
+import { undoBatch } from '../../util/UndoManager';
+import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
+import { DocumentView, DocumentViewSharedProps } from '../nodes/DocumentView';
+import { LinkDocPreview } from '../nodes/LinkDocPreview';
+import './LinkPopup.scss';
+import React = require("react");
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
+import { DefaultStyleProvider } from '../StyleProvider';
+import { Transform } from 'stream';
+import { DocUtils } from '../../documents/Documents';
+import { SearchBox } from '../search/SearchBox';
+
+interface LinkPopupProps {
+    showPopup: boolean;
+    // groupType: string;
+    // linkDoc: Doc;
+    // docView: DocumentView;
+    // sourceDoc: Doc;
+}
+
+/**
+ * Popup component for creating links from text to Dash documents 
+ */
+
+@observer
+export class LinkPopup extends React.Component<LinkPopupProps> {
+
+    render() {
+        const popupVisibility = this.props.showPopup ? "block" : "none";
+        return (
+            <div className="linkPopup-container" style={{ display: popupVisibility }}>
+
+                <div className="linkPopup-url-container">
+                    <input defaultValue={""} autoComplete="off" type="text" placeholder="Enter URL..." id="url-input"
+                        className="linkPopup-searchBox searchBox-input" />
+                    <button style={{ display: "block", margin: "10px auto", }}>Apply hyperlink</button>
+                </div>
+                <div className="divider">
+                    <div className="line"></div>
+                    <p className="divider-text">or</p>
+                </div>
+                <div className="linkPopup-document-search-container">
+                    <i></i>
+                    <input defaultValue={""} autoComplete="off" type="text" placeholder="Search for Document..." id="search-input"
+                        className="linkPopup-searchBox searchBox-input" />
+
+                    {/*                     
+                        <SearchBox Document={CurrentUserUtils.MySearchPanelDoc}
+                        DataDoc={CurrentUserUtils.MySearchPanelDoc}
+                        fieldKey="data"
+                        dropAction="move"
+                        isSelected={returnTrue}
+                        isContentActive={returnTrue}
+                        select={returnTrue}
+                        setHeight={returnFalse}
+                        addDocument={undefined}
+                        addDocTab={this.addDocTabFunc}
+                        pinToPres={emptyFunction}
+                        rootSelected={returnTrue}
+                        styleProvider={DefaultStyleProvider}
+                        layerProvider={undefined}
+                        removeDocument={undefined}
+                        ScreenToLocalTransform={Transform.Identity}
+                        PanelWidth={this.getPWidth}
+                        PanelHeight={this.getPHeight}
+                        renderDepth={0}
+                        focus={DocUtils.DefaultFocus}
+                        docViewPath={returnEmptyDoclist}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        bringToFront={emptyFunction}
+                        docFilters={returnEmptyFilter}
+                        docRangeFilters={returnEmptyFilter}
+                        searchFilterDocs={returnEmptyDoclist}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined} /> */}
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 492edd8702b2125adc9e4f0e1a9ffb2462f8a308 Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Sat, 10 Jul 2021 17:06:13 -0400
Subject: Crude searchbox instantiation in linkpopup

added SearchBox to linkpopup. No changes to searchbox css
---
 src/client/views/linking/LinkPopup.scss |  9 ++++++++-
 src/client/views/linking/LinkPopup.tsx  | 17 +++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

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

diff --git a/src/client/views/linking/LinkPopup.scss b/src/client/views/linking/LinkPopup.scss
index 009a21bd6..519044e5e 100644
--- a/src/client/views/linking/LinkPopup.scss
+++ b/src/client/views/linking/LinkPopup.scss
@@ -1,3 +1,5 @@
+@import "../globalCssVariables";
+
 .linkPopup-container {
     background: white;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
@@ -5,7 +7,7 @@
     height: 200px;
     width: 200px;
     position: absolute;
-    padding: 10px;
+    padding: 15px;
     border-radius: 3px;
 
     input {
@@ -37,4 +39,9 @@
             margin: auto;
         }
     }
+
+
+    .searchBox-container {
+        background: pink;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 71db06f19..5c4640fdf 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -20,7 +20,7 @@ import './LinkPopup.scss';
 import React = require("react");
 import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { DefaultStyleProvider } from '../StyleProvider';
-import { Transform } from 'stream';
+import { Transform } from '../../util/Transform';
 import { DocUtils } from '../../documents/Documents';
 import { SearchBox } from '../search/SearchBox';
 
@@ -39,11 +39,13 @@ interface LinkPopupProps {
 @observer
 export class LinkPopup extends React.Component<LinkPopupProps> {
 
+    getPWidth = () => 500;
+    getPHeight = () => 500;
+
     render() {
         const popupVisibility = this.props.showPopup ? "block" : "none";
         return (
             <div className="linkPopup-container" style={{ display: popupVisibility }}>
-
                 <div className="linkPopup-url-container">
                     <input defaultValue={""} autoComplete="off" type="text" placeholder="Enter URL..." id="url-input"
                         className="linkPopup-searchBox searchBox-input" />
@@ -54,12 +56,11 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                     <p className="divider-text">or</p>
                 </div>
                 <div className="linkPopup-document-search-container">
-                    <i></i>
+                    {/* <i></i>
                     <input defaultValue={""} autoComplete="off" type="text" placeholder="Search for Document..." id="search-input"
-                        className="linkPopup-searchBox searchBox-input" />
+                        className="linkPopup-searchBox searchBox-input" /> */}
 
-                    {/*                     
-                        <SearchBox Document={CurrentUserUtils.MySearchPanelDoc}
+                    <SearchBox Document={CurrentUserUtils.MySearchPanelDoc}
                         DataDoc={CurrentUserUtils.MySearchPanelDoc}
                         fieldKey="data"
                         dropAction="move"
@@ -68,7 +69,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                         select={returnTrue}
                         setHeight={returnFalse}
                         addDocument={undefined}
-                        addDocTab={this.addDocTabFunc}
+                        addDocTab={returnTrue}
                         pinToPres={emptyFunction}
                         rootSelected={returnTrue}
                         styleProvider={DefaultStyleProvider}
@@ -86,7 +87,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                         docRangeFilters={returnEmptyFilter}
                         searchFilterDocs={returnEmptyDoclist}
                         ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined} /> */}
+                        ContainingCollectionDoc={undefined} />
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 7b6de64a1244ba0944edf8301a7adc2cb1445f8a Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Sat, 24 Jul 2021 15:21:23 -0400
Subject: In-progress link popup

---
 .../views/collections/CollectionSchemaCells.tsx    |  1 +
 src/client/views/linking/LinkPopup.tsx             | 26 +++++++++++++++++++---
 .../views/nodes/formattedText/FormattedTextBox.tsx |  3 ++-
 .../views/nodes/formattedText/RichTextMenu.tsx     |  1 +
 4 files changed, 27 insertions(+), 4 deletions(-)

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

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 2e6186680..c19c6efb1 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -102,6 +102,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
         this.props.setPreviewDoc(this.props.rowProps.original);
 
+        console.log("click cell");
         let url: string;
         if (url = StrCast(this.props.rowProps.row.href)) {
             try {
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 5c4640fdf..89d5b7272 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -23,6 +23,8 @@ import { DefaultStyleProvider } from '../StyleProvider';
 import { Transform } from '../../util/Transform';
 import { DocUtils } from '../../documents/Documents';
 import { SearchBox } from '../search/SearchBox';
+import { EditorView } from 'prosemirror-view';
+import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 
 interface LinkPopupProps {
     showPopup: boolean;
@@ -38,6 +40,24 @@ interface LinkPopupProps {
 
 @observer
 export class LinkPopup extends React.Component<LinkPopupProps> {
+    @observable private linkURL: string = "";
+    @observable public view?: EditorView;
+    private Instance: LinkPopup = this;
+
+
+
+    // TODO: should check for valid URL
+    @undoBatch
+    makeLinkToURL = (target: string, lcoation: string) => {
+        ((this as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
+    }
+
+    @action
+    onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.linkURL = e.target.value;
+        console.log(this.linkURL)
+    }
+
 
     getPWidth = () => 500;
     getPHeight = () => 500;
@@ -47,9 +67,9 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
         return (
             <div className="linkPopup-container" style={{ display: popupVisibility }}>
                 <div className="linkPopup-url-container">
-                    <input defaultValue={""} autoComplete="off" type="text" placeholder="Enter URL..." id="url-input"
-                        className="linkPopup-searchBox searchBox-input" />
-                    <button style={{ display: "block", margin: "10px auto", }}>Apply hyperlink</button>
+                    <input autoComplete="off" type="text" value={this.linkURL} placeholder="Enter URL..." onChange={this.onLinkChange} />
+                    <button onPointerDown={e => this.makeLinkToURL(this.linkURL, "add:right")}
+                        style={{ display: "block", margin: "10px auto", }}>Apply hyperlink</button>
                 </div>
                 <div className="divider">
                     <div className="line"></div>
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 5180732b9..182a40dcb 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -213,6 +213,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         AnchorMenu.Instance.Status = "marquee";
         AnchorMenu.Instance.Highlight = action((color: string, isLinkButton: boolean) => {
             this._editorView?.state && RichTextMenu.Instance.insertHighlight(color, this._editorView.state, this._editorView?.dispatch);
+            console.log("highlight")
             return undefined;
         });
         /**
@@ -1398,7 +1399,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                 SelectionManager.DeselectAll();
                 RichTextMenu.Instance.updateMenu(undefined, undefined, undefined);
                 return;
-            case "Enter": this.insertTime(); 
+            case "Enter": this.insertTime();
             case "Tab": e.preventDefault(); break;
             default: if (this._lastTimedMark?.attrs.userid === Doc.CurrentUserEmail) break;
             case " ":
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 071491463..01de0fbe7 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -852,6 +852,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     @undoBatch
     makeLinkToURL = (target: string, lcoation: string) => {
         ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
+        console.log((this.view as any)?.TextView);
     }
 
     @undoBatch
-- 
cgit v1.2.3-70-g09d2


From ee06e72dab596ead6903c3ab3432ecab458613cb Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Mon, 26 Jul 2021 18:45:28 -0400
Subject: Link editor menu UI cleanup + color changes + temp removal of
 linkpopup for PR

---
 src/client/views/collections/CollectionLinearView.scss |  4 ++--
 src/client/views/linking/LinkEditor.scss               |  8 ++++----
 src/client/views/linking/LinkMenu.scss                 |  9 ++++-----
 src/client/views/linking/LinkMenuItem.scss             |  6 +++---
 src/client/views/linking/LinkPopup.tsx                 |  3 +--
 src/client/views/nodes/DocumentLinksButton.scss        |  1 +
 src/client/views/nodes/DocumentLinksButton.tsx         |  4 ++--
 src/client/views/pdf/AnchorMenu.tsx                    | 13 +++++++------
 8 files changed, 24 insertions(+), 24 deletions(-)

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

diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index 632f8dbab..dd1e1fbe8 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -20,10 +20,10 @@
         }
 
         .bottomPopup-background {
-            background: rgb(173, 216, 230);
+            background: $light-blue;
             padding-right: 14px;
             height: 35;
-            transform: translate3d(6px, 5px, 0px);
+            transform: translate3d(6px, 0px, 0px);
             padding-top: 6.5px;
             padding-bottom: 7px;
             padding-left: 5px;
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 839ebf894..9fddede65 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -22,7 +22,7 @@
 .linkEditor-info {
     //border-bottom: 0.5px solid $light-gray;
     //padding-bottom: 1px;
-    padding-top: 5px;
+    padding: 12px;
     padding-left: 5px;
     //margin-bottom: 6px;
     display: flex;
@@ -61,7 +61,7 @@
 }
 
 .linkEditor-description {
-    padding-left: 6.5px;
+    padding-left: 26px;
     padding-right: 6.5px;
     padding-bottom: 3.5px;
 
@@ -107,9 +107,9 @@
 }
 
 .linkEditor-followingDropdown {
-    padding-left: 6.5px;
+    padding-left: 26px;
     padding-right: 6.5px;
-    padding-bottom: 6px;
+    padding-bottom: 15cpx;
 
     &:hover {
         cursor: pointer;
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index bcd93aed1..19c6463d3 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -13,9 +13,8 @@
         border: 1px solid #e4e4e4;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
         background: white;
-
         min-width: 170px;
-        max-height: 170px;
+        max-height: 230px;
         overflow-y: scroll;
         z-index: 10;
     }
@@ -50,9 +49,9 @@
 
 
         &:hover {
-            p {
-                background-color: lightgray;
-            }
+            // p {
+            //     background-color: lightgray;
+            // }
 
             p.expand-one {
                 width: calc(100% + 20px);
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 38363c2c4..90722daf9 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -55,8 +55,8 @@
 
                 .linkMenu-destination-title {
                     text-decoration: none;
-                    color: rgb(85, 120, 196);
-                    font-size: 14px;
+                    color: #4476F7;
+                    font-size: 16px;
                     padding-bottom: 2px;
                     padding-right: 4px;
                     margin-right: 4px;
@@ -76,7 +76,7 @@
                 text-decoration: none;
                 font-style: italic;
                 color: rgb(95, 97, 102);
-                font-size: 10px;
+                font-size: 9px;
                 margin-left: 20px;
                 max-width: 125px;
                 height: auto;
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 89d5b7272..2c4b718f4 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -42,14 +42,13 @@ interface LinkPopupProps {
 export class LinkPopup extends React.Component<LinkPopupProps> {
     @observable private linkURL: string = "";
     @observable public view?: EditorView;
-    private Instance: LinkPopup = this;
 
 
 
     // TODO: should check for valid URL
     @undoBatch
     makeLinkToURL = (target: string, lcoation: string) => {
-        ((this as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
+        ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
     }
 
     @action
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index daffaf9e7..93e1737fe 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -6,6 +6,7 @@
     min-height: 20;
     position: absolute;
 }
+
 .documentLinksButton,
 .documentLinksButton-endLink,
 .documentLinksButton-startLink {
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4b4079670..ddc36daa1 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -143,7 +143,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 } else if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document) {
                     const sourceDoc = DocumentLinksButton.StartLink;
                     const targetDoc = this.props.View.ComponentView?.getAnchor?.() || this.props.View.Document;
-                    const linkDoc = DocUtils.MakeLink({ doc: sourceDoc }, { doc: targetDoc }, "link"); //why is long drag here when this is used for completing links by clicking?
+                    const linkDoc = DocUtils.MakeLink({ doc: sourceDoc }, { doc: targetDoc }, "links"); //why is long drag here when this is used for completing links by clicking?
 
                     LinkManager.currentLink = linkDoc;
 
@@ -257,7 +257,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             <div className={"documentLinksButton"}
                 onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
                 style={{
-                    backgroundColor: this.props.InMenu ? "" : "#add8e6",
+                    backgroundColor: this.props.InMenu ? "" : '#BDDDF5',
                     color: this.props.InMenu ? "white" : "black",
                     width: btnDim,
                     height: btnDim,
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index f9e12f462..70ca19842 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -147,12 +147,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     </button>
                 </Tooltip>,
 
-                <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
-                    <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
-                        <FontAwesomeIcon icon="link" size="lg" />
-                    </button>
-                </Tooltip>,
-                <LinkPopup showPopup={this._showLinkPopup} />
+                //NOTE: link popup is currently incomplete
+                // <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
+                //     <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
+                //         <FontAwesomeIcon icon="link" size="lg" />
+                //     </button>
+                // </Tooltip>,
+                // <LinkPopup showPopup={this._showLinkPopup} />
             ] : [
                 <Tooltip key="trash" title={<div className="dash-tooltip">{"Remove Link Anchor"}</div>}>
                     <button className="antimodeMenu-button" onPointerDown={this.Delete}>
-- 
cgit v1.2.3-70-g09d2

