diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/AntimodeMenu.scss | 1 | ||||
-rw-r--r-- | src/client/views/collections/CollectionLinearView.scss | 23 | ||||
-rw-r--r-- | src/client/views/collections/CollectionLinearView.tsx | 10 | ||||
-rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx | 1 | ||||
-rw-r--r-- | src/client/views/linking/LinkEditor.scss | 8 | ||||
-rw-r--r-- | src/client/views/linking/LinkMenu.scss | 26 | ||||
-rw-r--r-- | src/client/views/linking/LinkMenu.tsx | 8 | ||||
-rw-r--r-- | src/client/views/linking/LinkMenuGroup.tsx | 2 | ||||
-rw-r--r-- | src/client/views/linking/LinkMenuItem.scss | 8 | ||||
-rw-r--r-- | src/client/views/linking/LinkPopup.scss | 45 | ||||
-rw-r--r-- | src/client/views/linking/LinkPopup.tsx | 114 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentLinksButton.scss | 1 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentLinksButton.tsx | 22 | ||||
-rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 1 | ||||
-rw-r--r-- | src/client/views/nodes/formattedText/RichTextMenu.tsx | 1 | ||||
-rw-r--r-- | src/client/views/pdf/AnchorMenu.tsx | 18 |
16 files changed, 241 insertions, 48 deletions
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 2bac03af4..0e3ac4716 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -8,7 +8,6 @@ background: $dark-gray; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); // border-radius: 0px 6px 6px 6px; - z-index: 1001; display: flex; &.with-rows { diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index ec8805907..86610ac20 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -20,19 +20,21 @@ } .bottomPopup-background { - padding-right: 14px; + background: $light-blue; + display: flex; height: 35; - transform: translate3d(6px, 5px, 0px); - padding-top: 6.5px; - padding-bottom: 7px; - padding-left: 5px; + transform: translate3d(6px, 0px, 0px); + align-content: center; + justify-content: center; + align-items: center; } .bottomPopup-text { + color: black; display: inline; white-space: nowrap; padding-left: 8px; - padding-right: 4px; + padding-right: 20px; vertical-align: middle; font-size: 12.5px; } @@ -43,8 +45,8 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: lightgrey; - border-radius: 5.5px; + background-color: #efefef; + border-radius: 3px; color: black; margin-right: 5px; } @@ -52,11 +54,12 @@ .bottomPopup-exit { display: inline; white-space: nowrap; + margin-right: 10px; padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: lightgrey; - border-radius: 5.5px; + background-color: #f3b6b6; + border-radius: 3px; color: black; } diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index e0b90304b..52c836556 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -167,24 +167,22 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { })} </div> {DocumentLinksButton.StartLink ? <span className="bottomPopup-background" style={{ - background: backgroundColor === color ? "black" : backgroundColor, pointerEvents: "all" }} onPointerDown={e => e.stopPropagation()} > <span className="bottomPopup-text" > - Creating link from: {DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'} + Creating link from: <b>{DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'}</b> </span> - <Tooltip title={<><div className="dash-tooltip">{LinkDescriptionPopup.showDescriptions ? "Turn off description pop-up" : - "Turn on description pop-up"} </div></>} placement="top"> + <Tooltip title={<><div className="dash-tooltip">{"Toggle description pop-up"} </div></>} placement="top"> <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}> Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"} </span> </Tooltip> - <Tooltip title={<><div className="dash-tooltip">Exit link clicking mode </div></>} placement="top"> + <Tooltip title={<><div className="dash-tooltip">Exit linking mode</div></>} placement="top"> <span className="bottomPopup-exit" onClick={this.exitLongLinks}> - Clear + Stop </span> </Tooltip> diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx index 0c434eae5..fd99abce5 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx @@ -103,6 +103,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/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 839ebf894..e45a91d57 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: 15px; &:hover { cursor: pointer; diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index a2ea42999..19c6463d3 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -7,20 +7,19 @@ z-index: 2001; .linkMenu-list, - .linkMenu-listEditor - { + .linkMenu-listEditor { display: inline-block; position: relative; - border: 1px solid black; - box-shadow: 3px 3px 1.5px grey; + 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; - } - .linkMenu-list { + } + + .linkMenu-list { white-space: nowrap; overflow-x: hidden; width: 240px; @@ -46,13 +45,13 @@ } .linkMenu-group-name { + padding: 10px; &:hover { - p { - background-color: lightgray; - - } + // p { + // background-color: lightgray; + // } p.expand-one { width: calc(100% + 20px); @@ -65,10 +64,9 @@ p { width: 100%; - //padding: 4px 6px; line-height: 12px; border-radius: 5px; - font-weight: bold; + text-transform: capitalize; } .linkEditor-tableButton { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index c7888c5ee..6fc860447 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -15,6 +15,9 @@ interface Props { changeFlyout: () => void; } +/** + * the outermost component for the link menu of a node that contains a list of its linked nodes + */ @observer export class LinkMenu extends React.Component<Props> { private _editorRef = React.createRef<HTMLDivElement>(); @@ -36,6 +39,11 @@ export class LinkMenu extends React.Component<Props> { } } + /** + * maps each link to a JSX element to be rendered + * @param groups LinkManager containing info of all of the links + * @returns list of link JSX elements if there at least one linked element + */ renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => { const linkItems = Array.from(groups.entries()).map(group => <LinkMenuGroup diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index 74af78234..c7586a467 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -40,7 +40,7 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> { return ( <div className="linkMenu-group" ref={this._menuRef}> <div className="linkMenu-group-name"> - <p className={this.props.groupType === "*" || this.props.groupType === "" ? "" : "expand-one"} > {this.props.groupType}:</p> + <p className={this.props.groupType === "*" || this.props.groupType === "" ? "" : "expand-one"}> {this.props.groupType}:</p> </div> <div className="linkMenu-group-wrapper"> {groupItems} diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 4f9881565..90722daf9 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -4,7 +4,7 @@ // border-top: 0.5px solid $medium-gray; position: relative; display: flex; - border-bottom: 0.5px solid black; + border-top: 0.5px solid #cdcdcd; padding-left: 6.5px; padding-right: 2px; @@ -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.scss b/src/client/views/linking/LinkPopup.scss new file mode 100644 index 000000000..8ae65158d --- /dev/null +++ b/src/client/views/linking/LinkPopup.scss @@ -0,0 +1,45 @@ +.linkPopup-container { + background: white; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + top: 35px; + height: 200px; + width: 200px; + position: absolute; + padding: 15px; + border-radius: 3px; + + input { + border: 1px solid #b9b9b9; + border-radius: 20px; + height: 25px; + width: 100%; + padding-left: 10px; + } + + .divider { + margin: 10px 0; + height: 20px; + width: 100%; + + .line { + height: 1px; + background-color: #b9b9b9; + width: 100%; + position: relative; + top: 12px; + } + + .divider-text { + width: 20px; + background-color: white; + text-align: center; + position: relative; + 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 new file mode 100644 index 000000000..2c4b718f4 --- /dev/null +++ b/src/client/views/linking/LinkPopup.tsx @@ -0,0 +1,114 @@ +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 '../../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; + // 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> { + @observable private linkURL: string = ""; + @observable public view?: EditorView; + + + + // TODO: should check for valid URL + @undoBatch + makeLinkToURL = (target: string, lcoation: string) => { + ((this.view 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; + + render() { + const popupVisibility = this.props.showPopup ? "block" : "none"; + return ( + <div className="linkPopup-container" style={{ display: popupVisibility }}> + <div className="linkPopup-url-container"> + <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> + <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={returnTrue} + 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 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 a6d07374a..ddc36daa1 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -30,12 +30,12 @@ interface DocumentLinksButtonProps { Offset?: (number | undefined)[]; AlwaysOn?: boolean; InMenu?: boolean; - StartLink?: boolean; + StartLink?: boolean; //whether the link HAS been started (i.e. now needs to be completed) } @observer export class DocumentLinksButton extends React.Component<DocumentLinksButtonProps, {}> { private _linkButton = React.createRef<HTMLDivElement>(); - @observable public static StartLink: Doc | undefined; + @observable public static StartLink: Doc | undefined; //origin's Doc, if defined @observable public static StartLinkView: DocumentView | undefined; @observable public static AnnotationId: string | undefined; @observable public static AnnotationUri: string | undefined; @@ -45,6 +45,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp public static invisibleWebRef = React.createRef<HTMLDivElement>(); @action public static ClearLinkEditor() { DocumentLinksButton.LinkEditorDocView = undefined; } + @action @undoBatch onLinkButtonMoved = (e: PointerEvent) => { if (this.props.InMenu && this.props.StartLink) { @@ -120,7 +121,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp if (DocumentLinksButton.StartLink === this.props.View.props.Document) { DocumentLinksButton.StartLink = undefined; DocumentLinksButton.StartLinkView = undefined; - } else { + } else { //if this LinkButton's Document is undefined DocumentLinksButton.StartLink = this.props.View.props.Document; DocumentLinksButton.StartLinkView = this.props.View; } @@ -131,6 +132,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp } } + completeLink = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action((e, doubleTap) => { if (doubleTap && !this.props.StartLink) { @@ -141,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 }, "long drag"); + 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; @@ -184,7 +186,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp } else if (startLink !== endLink) { endLink = endLinkView?.docView?._componentView?.getAnchor?.() || endLink; startLink = DocumentLinksButton.StartLinkView?.docView?._componentView?.getAnchor?.() || startLink; - const linkDoc = DocUtils.MakeLink({ doc: startLink }, { doc: endLink }, DocumentLinksButton.AnnotationId ? "hypothes.is annotation" : "long drag", undefined, undefined, true); + const linkDoc = DocUtils.MakeLink({ doc: startLink }, { doc: endLink }, DocumentLinksButton.AnnotationId ? "hypothes.is annotation" : "link", undefined, undefined, true); LinkManager.currentLink = linkDoc; @@ -242,6 +244,9 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp return results; } + /** + * gets the JSX of the link button (btn used to start/complete links) OR the link-view button (btn on bottom left of each linked node) + */ @computed get linkButtonInner() { const btnDim = this.props.InMenu ? "20px" : "30px"; const link = <img style={{ width: "22px", height: "16px" }} src={`/assets/${"link.png"}`} />; @@ -252,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, @@ -263,7 +268,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp : link : Array.from(this.filteredLinks).length} </div> - {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? + {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node <div className={"documentLinksButton-endLink"} style={{ width: btnDim, height: btnDim, @@ -276,7 +281,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp onClick={e => DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)} /> : (null) } - {DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.InMenu && this.props.StartLink ? + {DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again <div className={"documentLinksButton-startLink"} onPointerDown={this.clearLinks} onClick={this.clearLinks} style={{ width: btnDim, height: btnDim }} /> : (null) } @@ -290,6 +295,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp const buttonTitle = "Tap to view links; double tap to open link collection"; const title = this.props.InMenu ? menuTitle : buttonTitle; + //render circular tooltip if it isn't set to invisible and show the number of doc links the node has, and render inner-menu link button for starting/stopping links if currently in menu return !Array.from(this.filteredLinks).length && !this.props.AlwaysOn ? (null) : this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ? <Tooltip title={<div className="dash-tooltip">{title}</div>}> diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 8cac21927..140d39929 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -215,6 +215,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; }); /** diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 59b2d3753..a6f8ff2e2 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 diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index c24c4eaaf..70ca19842 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -10,6 +10,7 @@ import { AntimodeMenu, AntimodeMenuProps } from "../AntimodeMenu"; import { ButtonDropdown } from "../nodes/formattedText/RichTextMenu"; import "./AnchorMenu.scss"; import { SelectionManager } from "../../util/SelectionManager"; +import { LinkPopup } from "../linking/LinkPopup"; @observer export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -38,6 +39,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { @observable private _valueValue: string = ""; @observable private _added: boolean = false; @observable private highlightColor: string = "rgba(245, 230, 95, 0.616)"; + @observable private _showLinkPopup: boolean = false; @observable public _colorBtn = false; @observable public Highlighting: boolean = false; @@ -80,6 +82,14 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } } + @action + toggleLinkPopup = (e: React.MouseEvent) => { + //ignore the potential null type error because this method cannot be called unless the user selects text and clicks the link button + console.log(window.getSelection().toString()) + //change popup visibility field to visible + this._showLinkPopup = !this._showLinkPopup; + } + @computed get highlighter() { const button = <button className="antimodeMenu-button color-preview-button" title="" key="highlighter-button" onClick={this.highlightClicked}> @@ -136,6 +146,14 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { <FontAwesomeIcon icon="comment-alt" size="lg" /> </button> </Tooltip>, + + //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}> |