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 { + + render() { + const popupVisibility = this.props.showPopup ? "block" : "none"; + return ( +
+ +
+ + +
+
+
+

or

+
+
+ + + + {/* + */} +
+
+ ); + } +} \ 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 { + getPWidth = () => 500; + getPHeight = () => 500; + render() { const popupVisibility = this.props.showPopup ? "block" : "none"; return (
-
@@ -54,12 +56,11 @@ export class LinkPopup extends React.Component {

or

- + {/* + className="linkPopup-searchBox searchBox-input" /> */} - {/* - { 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 { docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> */} + ContainingCollectionDoc={undefined} />
); -- 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 { 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 { + @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) => { + this.linkURL = e.target.value; + console.log(this.linkURL) + } + getPWidth = () => 500; getPHeight = () => 500; @@ -47,9 +67,9 @@ export class LinkPopup extends React.Component { return (
- - + +
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 { @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 { @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 { , - {"Link selected text to document or URL"}
}> - - , - + //NOTE: link popup is currently incomplete + // {"Link selected text to document or URL"}
}> + // + // , + // ] : [ {"Remove Link Anchor"}}>