aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/linking
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/linking')
-rw-r--r--src/client/views/linking/LinkEditor.scss18
-rw-r--r--src/client/views/linking/LinkEditor.tsx348
-rw-r--r--src/client/views/linking/LinkMenu.scss9
-rw-r--r--src/client/views/linking/LinkMenu.tsx85
-rw-r--r--src/client/views/linking/LinkMenuGroup.tsx13
-rw-r--r--src/client/views/linking/LinkMenuItem.scss14
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx246
-rw-r--r--src/client/views/linking/LinkPopup.tsx34
8 files changed, 466 insertions, 301 deletions
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index abd413f57..1d6496d3c 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -60,6 +60,24 @@
}
}
+.linkEditor-zoomFollow {
+ padding-left: 26px;
+ padding-right: 6.5px;
+ padding-bottom: 3.5px;
+ display: flex;
+
+ .linkEditor-zoomFollow-label {
+ text-decoration-color: black;
+ color: black;
+ line-height: 1.7;
+ }
+
+ .linkEditor-zoomFollow-input {
+ display: block;
+ width: 20px;
+ }
+}
+
.linkEditor-description {
padding-left: 26px;
padding-right: 6.5px;
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index db331bb75..ba301962b 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,16 +1,14 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Tooltip } from "@material-ui/core";
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, NumListCast, StrListCast, Field } from "../../../fields/Doc";
-import { DateCast, StrCast, Cast } from "../../../fields/Types";
-import { LinkManager } from "../../util/LinkManager";
-import { undoBatch } from "../../util/UndoManager";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@material-ui/core';
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc, NumListCast, StrListCast, Field } from '../../../fields/Doc';
+import { DateCast, StrCast, Cast } from '../../../fields/Types';
+import { LinkManager } from '../../util/LinkManager';
+import { undoBatch } from '../../util/UndoManager';
import './LinkEditor.scss';
-import { LinkRelationshipSearch } from "./LinkRelationshipSearch";
-import React = require("react");
-import { ToString } from "../../../fields/FieldSymbols";
-
+import { LinkRelationshipSearch } from './LinkRelationshipSearch';
+import React = require('react');
interface LinkEditorProps {
sourceDoc: Doc;
@@ -20,15 +18,20 @@ interface LinkEditorProps {
}
@observer
export class LinkEditor extends React.Component<LinkEditorProps> {
-
@observable description = Field.toString(LinkManager.currentLink?.description as any as Field);
@observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
+ @observable zoomFollow = StrCast(this.props.sourceDoc.followLinkZoom);
@observable openDropdown: boolean = false;
@observable showInfo: boolean = false;
- @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
- @observable private buttonColor: string = "";
- @observable private relationshipButtonColor: string = "";
- @observable private relationshipSearchVisibility: string = "none";
+ @computed get infoIcon() {
+ if (this.showInfo) {
+ return 'chevron-up';
+ }
+ return 'chevron-down';
+ }
+ @observable private buttonColor: string = '';
+ @observable private relationshipButtonColor: string = '';
+ @observable private relationshipSearchVisibility: string = 'none';
@observable private searchIsActive: boolean = false;
//@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
@@ -37,7 +40,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
deleteLink = (): void => {
LinkManager.Instance.deleteLink(this.props.linkDoc);
this.props.showLinks();
- }
+ };
@undoBatch
setRelationshipValue = action((value: string) => {
@@ -49,11 +52,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
const linkRelationshipSizes = NumListCast(Doc.UserDoc().linkRelationshipSizes);
const linkColorList = StrListCast(Doc.UserDoc().linkColorList);
- // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color
+ // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color
if (!linkRelationshipList?.includes(value)) {
linkRelationshipList.push(value);
linkRelationshipSizes.push(1);
- const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
+ const randColor = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
linkColorList.push(randColor);
// if the relationship is already in the list AND the new rel is different from the prev rel, update the rel sizes
} else if (linkRelationshipList && value !== prevRelationship) {
@@ -61,20 +64,22 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
//increment size of new relationship size
if (index !== -1 && index < linkRelationshipSizes.length) {
const pvalue = linkRelationshipSizes[index];
- linkRelationshipSizes[index] = (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 1);
+ linkRelationshipSizes[index] = pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 1;
}
//decrement the size of the previous relationship if it already exists (i.e. not default 'link' relationship upon link creation)
if (linkRelationshipList.includes(prevRelationship)) {
const pindex = linkRelationshipList.indexOf(prevRelationship);
if (pindex !== -1 && pindex < linkRelationshipSizes.length) {
const pvalue = linkRelationshipSizes[pindex];
- linkRelationshipSizes[pindex] = Math.max(0, (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1));
+ linkRelationshipSizes[pindex] = Math.max(0, pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1);
}
}
-
}
- this.relationshipButtonColor = "rgb(62, 133, 55)";
- setTimeout(action(() => this.relationshipButtonColor = ""), 750);
+ this.relationshipButtonColor = 'rgb(62, 133, 55)';
+ setTimeout(
+ action(() => (this.relationshipButtonColor = '')),
+ 750
+ );
return true;
}
});
@@ -89,126 +94,143 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
if (linkRelationshipList) {
return linkRelationshipList.filter(rel => rel.includes(query));
}
- }
+ };
/**
* toggles visibility of the relationship search results when the input field is focused on
*/
@action
toggleRelationshipResults = () => {
- this.relationshipSearchVisibility = this.relationshipSearchVisibility === "none" ? "block" : "none";
- }
+ this.relationshipSearchVisibility = this.relationshipSearchVisibility === 'none' ? 'block' : 'none';
+ };
@undoBatch
setDescripValue = action((value: string) => {
if (LinkManager.currentLink) {
Doc.GetProto(LinkManager.currentLink).description = value;
- this.buttonColor = "rgb(62, 133, 55)";
- setTimeout(action(() => this.buttonColor = ""), 750);
+ this.buttonColor = 'rgb(62, 133, 55)';
+ setTimeout(
+ action(() => (this.buttonColor = '')),
+ 750
+ );
return true;
}
});
onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
- if (e.key === "Enter") {
+ if (e.key === 'Enter') {
this.setDescripValue(this.description);
document.getElementById('input')?.blur();
}
- }
+ e.stopPropagation();
+ };
onRelationshipKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
- if (e.key === "Enter") {
+ if (e.key === 'Enter') {
this.setRelationshipValue(this.relationship);
document.getElementById('input')?.blur();
}
- }
+ e.stopPropagation();
+ };
onDescriptionDown = () => this.setDescripValue(this.description);
onRelationshipDown = () => this.setRelationshipValue(this.relationship);
onBlur = () => {
- //only hide the search results if the user clicks out of the input AND not on any of the search results
+ //only hide the search results if the user clicks out of the input AND not on any of the search results
// i.e. if search is not active
if (!this.searchIsActive) {
this.toggleRelationshipResults();
}
- }
+ };
onFocus = () => {
this.toggleRelationshipResults();
- }
+ };
toggleSearchIsActive = () => {
this.searchIsActive = !this.searchIsActive;
- }
+ };
@action
- handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+ handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.description = e.target.value;
+ };
@action
handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => {
this.relationship = e.target.value;
- }
+ };
+ @action
+ handleZoomFollowChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.sourceDoc.followLinkZoom = e.target.checked;
+ };
@action
handleRelationshipSearchChange = (result: string) => {
this.setRelationshipValue(result);
this.toggleRelationshipResults();
this.relationship = result;
- }
+ };
@computed
get editRelationship() {
//NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
- return <div className="linkEditor-description">
- <div className="linkEditor-description-label">Link Relationship:</div>
- <div className="linkEditor-description-input">
- <div className="linkEditor-description-editing">
- <input
- style={{ width: "100%" }}
- id="input"
- value={this.relationship}
- autoComplete={"off"}
- placeholder={"Enter link relationship"}
- onKeyDown={this.onRelationshipKey}
- onChange={this.handleRelationshipChange}
- onFocus={this.onFocus}
- onBlur={this.onBlur}
- ></input>
- <LinkRelationshipSearch
- results={this.getRelationshipResults()}
- display={this.relationshipSearchVisibility}
- handleRelationshipSearchChange={this.handleRelationshipSearchChange}
- toggleSearch={this.toggleSearchIsActive}
- />
+ return (
+ <div className="linkEditor-description">
+ <div className="linkEditor-description-label">Link Relationship:</div>
+ <div className="linkEditor-description-input">
+ <div className="linkEditor-description-editing">
+ <input
+ style={{ width: '100%' }}
+ id="input"
+ value={this.relationship}
+ autoComplete={'off'}
+ placeholder={'Enter link relationship'}
+ onKeyDown={this.onRelationshipKey}
+ onChange={this.handleRelationshipChange}
+ onFocus={this.onFocus}
+ onBlur={this.onBlur}></input>
+ <LinkRelationshipSearch results={this.getRelationshipResults()} display={this.relationshipSearchVisibility} handleRelationshipSearchChange={this.handleRelationshipSearchChange} toggleSearch={this.toggleSearchIsActive} />
+ </div>
+ <div className="linkEditor-description-add-button" style={{ background: this.relationshipButtonColor }} onPointerDown={this.onRelationshipDown}>
+ Set
+ </div>
</div>
- <div className="linkEditor-description-add-button"
- style={{ background: this.relationshipButtonColor }}
- onPointerDown={this.onRelationshipDown}>Set</div>
</div>
- </div>;
+ );
+ }
+ @computed
+ get editZoomFollow() {
+ //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
+ return (
+ <div className="linkEditor-zoomFollow">
+ <div className="linkEditor-zoomFollow-label">Zoom To Link Target:</div>
+ <div className="linkEditor-zoomFollow-input">
+ <div className="linkEditor-zoomFollow-editing">
+ <input style={{ width: '100%' }} type="checkbox" value={this.zoomFollow} onChange={this.handleZoomFollowChange} />
+ </div>
+ </div>
+ </div>
+ );
}
@computed
get editDescription() {
- return <div className="linkEditor-description">
- <div className="linkEditor-description-label">Link Description:</div>
- <div className="linkEditor-description-input">
- <div className="linkEditor-description-editing">
- <input
- style={{ width: "100%" }}
- autoComplete={"off"}
- id="input"
- value={this.description}
- placeholder={"Enter link description"}
- onKeyDown={this.onDescriptionKey}
- onChange={this.handleDescriptionChange}
- ></input>
+ return (
+ <div className="linkEditor-description">
+ <div className="linkEditor-description-label">Link Description:</div>
+ <div className="linkEditor-description-input">
+ <div className="linkEditor-description-editing">
+ <input style={{ width: '100%' }} autoComplete={'off'} id="input" value={this.description} placeholder={'Enter link description'} onKeyDown={this.onDescriptionKey} onChange={this.handleDescriptionChange}></input>
+ </div>
+ <div className="linkEditor-description-add-button" style={{ background: this.buttonColor }} onPointerDown={this.onDescriptionDown}>
+ Set
+ </div>
</div>
- <div className="linkEditor-description-add-button"
- style={{ background: this.buttonColor }}
- onPointerDown={this.onDescriptionDown}>Set</div>
</div>
- </div>;
+ );
}
@action
- changeDropdown = () => { this.openDropdown = !this.openDropdown; }
+ changeDropdown = () => {
+ this.openDropdown = !this.openDropdown;
+ };
@undoBatch
changeFollowBehavior = action((follow: string) => {
@@ -218,94 +240,114 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
@computed
get followingDropdown() {
- return <div className="linkEditor-followingDropdown">
- <div className="linkEditor-followingDropdown-label">Follow Behavior:</div>
- <div className="linkEditor-followingDropdown-dropdown">
- <div className="linkEditor-followingDropdown-header"
- onPointerDown={this.changeDropdown}>
- {StrCast(this.props.linkDoc.followLinkLocation, "default")}
- <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
- icon={this.openDropdown ? "chevron-up" : "chevron-down"}
- size={"lg"} />
- </div>
- <div className="linkEditor-followingDropdown-optionsList"
- style={{ display: this.openDropdown ? "" : "none" }}>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("default")}>
- Default
- </div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("add:left")}>
- Always open in new left pane
- </div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("add:right")}>
- Always open in new right pane
- </div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("replace:right")}>
- Always replace right tab
- </div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("replace:left")}>
- Always replace left tab
+ return (
+ <div className="linkEditor-followingDropdown">
+ <div className="linkEditor-followingDropdown-label">Follow Behavior:</div>
+ <div className="linkEditor-followingDropdown-dropdown">
+ <div className="linkEditor-followingDropdown-header" onPointerDown={this.changeDropdown}>
+ {StrCast(this.props.linkDoc.followLinkLocation, 'default')}
+ <FontAwesomeIcon className="linkEditor-followingDropdown-icon" icon={this.openDropdown ? 'chevron-up' : 'chevron-down'} size={'lg'} />
</div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("fullScreen")}>
- Always open full screen
- </div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("add")}>
- Always open in a new tab
- </div>
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("replace")}>
- Replace Tab
- </div>
- {this.props.linkDoc.linksToAnnotation ?
- <div className="linkEditor-followingDropdown-option"
- onPointerDown={() => this.changeFollowBehavior("openExternal")}>
- Always open in external page
+ <div className="linkEditor-followingDropdown-optionsList" style={{ display: this.openDropdown ? '' : 'none' }}>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('default')}>
+ Default
+ </div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('add:left')}>
+ Always open in new left pane
+ </div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('add:right')}>
+ Always open in new right pane
+ </div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace:right')}>
+ Always replace right tab
</div>
- : null}
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace:left')}>
+ Always replace left tab
+ </div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('fullScreen')}>
+ Always open full screen
+ </div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('add')}>
+ Always open in a new tab
+ </div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace')}>
+ Replace Tab
+ </div>
+ {this.props.linkDoc.linksToAnnotation ? (
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('openExternal')}>
+ Always open in external page
+ </div>
+ ) : null}
+ </div>
</div>
</div>
- </div>;
+ );
}
@action
- changeInfo = () => { this.showInfo = !this.showInfo; }
+ changeInfo = () => {
+ this.showInfo = !this.showInfo;
+ };
render() {
const destination = LinkManager.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
-
- return !destination ? (null) : (
- <div className="linkEditor">
+ return !destination ? null : (
+ <div className="linkEditor" tabIndex={0} onKeyDown={e => e.stopPropagation()}>
<div className="linkEditor-info">
- <Tooltip title={<><div className="dash-tooltip">Return to link menu</div></>} placement="top">
- <button className="linkEditor-button-back"
- style={{ display: this.props.hideback ? "none" : "" }}
- onClick={this.props.showLinks}>
- <FontAwesomeIcon icon="arrow-left" size="sm" /> </button>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">Return to link menu</div>
+ </>
+ }
+ placement="top">
+ <button className="linkEditor-button-back" style={{ display: this.props.hideback ? 'none' : '' }} onClick={this.props.showLinks}>
+ <FontAwesomeIcon icon="arrow-left" size="sm" />{' '}
+ </button>
</Tooltip>
- <p className="linkEditor-linkedTo">Editing Link to: <b>{
- destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
- <Tooltip title={<><div className="dash-tooltip">Show more link information</div></>} placement="top">
- <div className="linkEditor-downArrow"><FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} /></div>
+ <p className="linkEditor-linkedTo">
+ Editing Link to: <b>{StrCast(destination.proto?.title, StrCast(destination.title, 'untitled'))}</b>
+ </p>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">Show more link information</div>
+ </>
+ }
+ placement="top">
+ <div className="linkEditor-downArrow">
+ <FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
+ </div>
</Tooltip>
</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}
+ {this.showInfo ? (
+ <div className="linkEditor-moreInfo">
+ <div>
+ {this.props.linkDoc.author ? (
+ <div>
+ {' '}
+ <b>Author:</b> {StrCast(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}
{this.editDescription}
{this.editRelationship}
+ {this.editZoomFollow}
{this.followingDropdown}
</div>
-
);
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 19c6463d3..77c16a28f 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -45,8 +45,11 @@
}
.linkMenu-group-name {
- padding: 10px;
-
+ padding: 1px;
+ padding-left: 5px;
+ font-size: 10px;
+ font-style: italic;
+ font-weight: bold;
&:hover {
// p {
@@ -64,7 +67,7 @@
p {
width: 100%;
- line-height: 12px;
+ line-height: 1;
border-radius: 5px;
text-transform: capitalize;
}
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 53fe3f682..0096a58bd 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -1,18 +1,19 @@
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../../fields/Doc";
-import { LinkManager } from "../../util/LinkManager";
-import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
-import { DocumentView, DocumentViewSharedProps } from "../nodes/DocumentView";
-import { LinkDocPreview } from "../nodes/LinkDocPreview";
-import { LinkEditor } from "./LinkEditor";
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../fields/Doc';
+import { LinkManager } from '../../util/LinkManager';
+import { DocumentView } from '../nodes/DocumentView';
+import { LinkDocPreview } from '../nodes/LinkDocPreview';
+import { LinkEditor } from './LinkEditor';
import './LinkMenu.scss';
-import { LinkMenuGroup } from "./LinkMenuGroup";
-import React = require("react");
+import { LinkMenuGroup } from './LinkMenuGroup';
+import React = require('react');
interface Props {
docView: DocumentView;
- changeFlyout: () => void;
+ position?: { x?: number; y?: number };
+ itemHandler?: (doc: Doc) => void;
+ clearLinkEditor: () => void;
}
/**
@@ -20,24 +21,32 @@ interface Props {
*/
@observer
export class LinkMenu extends React.Component<Props> {
- private _editorRef = React.createRef<HTMLDivElement>();
+ _editorRef = React.createRef<HTMLDivElement>();
@observable _editingLink?: Doc;
@observable _linkMenuRef = React.createRef<HTMLDivElement>();
@computed get position() {
- return ((dv) => ({ x: dv?.left || 0, y: dv?.top || 0, r: dv?.right || 0, b: dv?.bottom || 0 }))(this.props.docView.getBounds());
+ return this.props.position ?? (dv => ({ x: dv?.left || 0, y: (dv?.bottom || 0) + 15 }))(this.props.docView.getBounds());
}
- componentDidMount() { document.addEventListener("pointerdown", this.onPointerDown); }
- componentWillUnmount() { document.removeEventListener("pointerdown", this.onPointerDown); }
+ clear = action(() => {
+ this.props.clearLinkEditor();
+ this._editingLink = undefined;
+ });
- onPointerDown = (e: PointerEvent) => {
+ componentDidMount() {
+ document.addEventListener('pointerdown', this.onPointerDown, true);
+ }
+ componentWillUnmount() {
+ document.removeEventListener('pointerdown', this.onPointerDown, true);
+ }
+
+ onPointerDown = action((e: PointerEvent) => {
LinkDocPreview.Clear();
- if (!this._linkMenuRef.current?.contains(e.target as any) &&
- !this._editorRef.current?.contains(e.target as any)) {
- DocumentLinksButton.ClearLinkEditor();
+ if (!this._linkMenuRef.current?.contains(e.target as any) && !this._editorRef.current?.contains(e.target as any)) {
+ this.clear();
}
- }
+ });
/**
* maps each link to a JSX element to be rendered
@@ -45,30 +54,34 @@ export class LinkMenu extends React.Component<Props> {
* @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 =>
+ const linkItems = Array.from(groups.entries()).map(group => (
<LinkMenuGroup
key={group[0]}
+ itemHandler={this.props.itemHandler}
docView={this.props.docView}
sourceDoc={this.props.docView.props.Document}
group={group[1]}
groupType={group[0]}
- showEditor={action(linkDoc => this._editingLink = linkDoc)} />);
+ clearLinkEditor={this.clear}
+ showEditor={action(linkDoc => (this._editingLink = linkDoc))}
+ />
+ ));
- return linkItems.length ? linkItems : [<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>];
- }
+ return linkItems.length ? linkItems : this.props.position ? [<></>] : [<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>];
+ };
render() {
const sourceDoc = this.props.docView.props.Document;
- return <div className="linkMenu" ref={this._linkMenuRef}
- style={{ left: this.position.x, top: this.props.docView.topMost ? undefined : this.position.b + 15, bottom: this.props.docView.topMost ? 20 : undefined }}
- >
- {this._editingLink ?
- <div className="linkMenu-listEditor">
- <LinkEditor sourceDoc={sourceDoc} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)} />
- </div> :
- <div className="linkMenu-list" >
- {this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))}
- </div>}
- </div>;
+ return (
+ <div className="linkMenu" ref={this._linkMenuRef} style={{ left: this.position.x, top: this.props.docView.topMost ? undefined : this.position.y, bottom: this.props.docView.topMost ? 20 : undefined }}>
+ {this._editingLink ? (
+ <div className="linkMenu-listEditor">
+ <LinkEditor sourceDoc={sourceDoc} linkDoc={this._editingLink} showLinks={action(() => (this._editingLink = undefined))} />
+ </div>
+ ) : (
+ <div className="linkMenu-list">{this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))}</div>
+ )}
+ </div>
+ );
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 03377ad4e..fa6a2f506 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -1,4 +1,5 @@
import { observer } from "mobx-react";
+import { observable, action } from "mobx";
import { Doc, StrListCast } from "../../../fields/Doc";
import { Id } from "../../../fields/FieldSymbols";
import { Cast } from "../../../fields/Types";
@@ -12,8 +13,10 @@ interface LinkMenuGroupProps {
sourceDoc: Doc;
group: Doc[];
groupType: string;
+ clearLinkEditor: () => void;
showEditor: (linkDoc: Doc) => void;
docView: DocumentView;
+ itemHandler?: (doc: Doc) => void;
}
@observer
@@ -36,6 +39,8 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
return color;
}
+ @observable _collapsed = false;
+
render() {
const set = new Set<Doc>(this.props.group);
const groupItems = Array.from(set.keys()).map(linkDoc => {
@@ -43,11 +48,13 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
LinkManager.getOppositeAnchor(linkDoc, Cast(linkDoc.anchor2, Doc, null).annotationOn === this.props.sourceDoc ? Cast(linkDoc.anchor2, Doc, null) : Cast(linkDoc.anchor1, Doc, null));
if (destination && this.props.sourceDoc) {
return <LinkMenuItem key={linkDoc[Id]}
+ itemHandler={this.props.itemHandler}
groupType={this.props.groupType}
docView={this.props.docView}
linkDoc={linkDoc}
sourceDoc={this.props.sourceDoc}
destinationDoc={destination}
+ clearLinkEditor={this.props.clearLinkEditor}
showEditor={this.props.showEditor}
menuRef={this._menuRef} />;
}
@@ -55,12 +62,12 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
return (
<div className="linkMenu-group" ref={this._menuRef}>
- <div className="linkMenu-group-name" style={{ background: this.getBackgroundColor() }}>
+ <div className="linkMenu-group-name" onClick={action(() => this._collapsed = !this._collapsed)} style={{ background: this.getBackgroundColor() }}>
<p className={this.props.groupType === "*" || this.props.groupType === "" ? "" : "expand-one"}> {this.props.groupType}:</p>
</div>
- <div className="linkMenu-group-wrapper">
+ {this._collapsed ? (null) : <div className="linkMenu-group-wrapper">
{groupItems}
- </div>
+ </div>}
</div >
);
}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 90722daf9..8333aa374 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -9,8 +9,8 @@
padding-left: 6.5px;
padding-right: 2px;
- padding-top: 6.5px;
- padding-bottom: 6.5px;
+ padding-top: 1px;
+ padding-bottom: 1px;
background-color: white;
@@ -18,10 +18,12 @@
.linkMenu-name {
position: relative;
width: auto;
+ align-items: center;
+ display: flex;
.linkMenu-text {
- padding: 4px 2px;
+ // padding: 4px 2px;
//display: inline;
.linkMenu-source-title {
@@ -37,6 +39,8 @@
.linkMenu-title-wrapper {
display: flex;
+ align-items: center;
+ min-height: 20px;
.destination-icon-wrapper {
//border: 0.5px solid rgb(161, 161, 161);
@@ -56,7 +60,8 @@
.linkMenu-destination-title {
text-decoration: none;
color: #4476F7;
- font-size: 16px;
+ font-size: 13px;
+ line-height: 0.9;
padding-bottom: 2px;
padding-right: 4px;
margin-right: 4px;
@@ -77,6 +82,7 @@
font-style: italic;
color: rgb(95, 97, 102);
font-size: 9px;
+ line-height: 0.9;
margin-left: 20px;
max-width: 125px;
height: auto;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 96cc6d600..ed856a4ab 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,25 +1,23 @@
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 { action, observable } 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 } from '../../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
import { DocumentType } from '../../documents/DocumentTypes';
import { DocumentManager } from '../../util/DocumentManager';
import { DragManager } from '../../util/DragManager';
import { Hypothesis } from '../../util/HypothesisUtils';
+import { LinkFollower } from '../../util/LinkFollower';
import { LinkManager } from '../../util/LinkManager';
import { undoBatch } from '../../util/UndoManager';
-import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
-import { DocumentView, DocumentViewSharedProps } from '../nodes/DocumentView';
+import { DocumentView } from '../nodes/DocumentView';
import { LinkDocPreview } from '../nodes/LinkDocPreview';
import './LinkMenuItem.scss';
-import React = require("react");
-import { setup } from 'mocha';
-
+import React = require('react');
interface LinkMenuItemProps {
groupType: string;
@@ -27,8 +25,10 @@ interface LinkMenuItemProps {
docView: DocumentView;
sourceDoc: Doc;
destinationDoc: Doc;
+ clearLinkEditor: () => void;
showEditor: (linkDoc: Doc) => void;
menuRef: React.Ref<HTMLDivElement>;
+ itemHandler?: (doc: Doc) => void;
}
// drag links and drop link targets (aliasing them if needed)
@@ -50,22 +50,21 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume
};
const containingView = docView.props.ContainingCollectionView;
const finishDrag = (e: DragManager.DragCompleteEvent) =>
- e.docDragData && (e.docDragData.droppedDocuments =
- dragData.draggedDocuments.reduce((droppedDocs, d) => {
- const dvs = DocumentManager.Instance.getDocumentViews(d).filter(dv => dv.props.ContainingCollectionView === containingView);
- if (dvs.length) {
- dvs.forEach(dv => droppedDocs.push(dv.props.Document));
- } else {
- droppedDocs.push(Doc.MakeAlias(d));
- }
- return droppedDocs;
- }, [] as Doc[]));
+ e.docDragData &&
+ (e.docDragData.droppedDocuments = dragData.draggedDocuments.reduce((droppedDocs, d) => {
+ const dvs = DocumentManager.Instance.getDocumentViews(d).filter(dv => dv.props.ContainingCollectionView === containingView);
+ if (dvs.length) {
+ dvs.forEach(dv => droppedDocs.push(dv.props.Document));
+ } else {
+ droppedDocs.push(Doc.MakeAlias(d));
+ }
+ return droppedDocs;
+ }, [] as Doc[]));
DragManager.StartDrag([dragEle], dragData, downX, downY, undefined, finishDrag);
}
}
-
@observer
export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
private _drag = React.createRef<HTMLDivElement>();
@@ -74,125 +73,206 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
_buttonRef = React.createRef<HTMLDivElement>();
@observable private _showMore: boolean = false;
- @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
+ @action toggleShowMore(e: React.PointerEvent) {
+ e.stopPropagation();
+ this._showMore = !this._showMore;
+ }
onEdit = (e: React.PointerEvent): void => {
LinkManager.currentLink = this.props.linkDoc;
- setupMoveUpEvents(this, e, e => {
- const dragData = new DragManager.DocumentDragData([this.props.linkDoc], "alias");
- dragData.removeDropProperties = ["hidden"];
- DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
- return true;
- }, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
- }
+ setupMoveUpEvents(
+ this,
+ e,
+ e => {
+ const dragData = new DragManager.DocumentDragData([this.props.linkDoc], 'alias');
+ dragData.removeDropProperties = ['hidden'];
+ DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
+ return true;
+ },
+ emptyFunction,
+ () => this.props.showEditor(this.props.linkDoc)
+ );
+ };
onLinkButtonDown = (e: React.PointerEvent): void => {
- setupMoveUpEvents(this, e,
+ setupMoveUpEvents(
+ this,
+ e,
e => {
const eleClone: any = this._drag.current!.cloneNode(true);
eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`;
StartLinkTargetsDrag(eleClone, this.props.docView, e.x, e.y, this.props.sourceDoc, [this.props.linkDoc]);
- DocumentLinksButton.ClearLinkEditor();
+ this.props.clearLinkEditor();
return true;
},
emptyFunction,
() => {
- DocumentLinksButton.ClearLinkEditor();
- LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
- });
- }
+ this.props.clearLinkEditor();
+ if (this.props.itemHandler) {
+ this.props.itemHandler?.(this.props.linkDoc);
+ } else {
+ const focusDoc =
+ Cast(this.props.linkDoc.anchor1, Doc, null)?.annotationOn === this.props.sourceDoc
+ ? Cast(this.props.linkDoc.anchor1, Doc, null)
+ : Cast(this.props.linkDoc.anchor2, Doc, null)?.annotationOn === this.props.sourceDoc
+ ? Cast(this.props.linkDoc.anchor12, Doc, null)
+ : undefined;
+
+ if (focusDoc) this.props.docView.ComponentView?.scrollFocus?.(focusDoc, true);
+ LinkFollower.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
+ }
+ }
+ );
+ };
deleteLink = (e: React.PointerEvent): void => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => {
- this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc);
- LinkManager.Instance.deleteLink(this.props.linkDoc);
- })));
- }
+ setupMoveUpEvents(
+ this,
+ e,
+ returnFalse,
+ emptyFunction,
+ undoBatch(
+ action(() => {
+ this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc);
+ LinkManager.Instance.deleteLink(this.props.linkDoc);
+ })
+ )
+ );
+ };
autoMove = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove)));
- }
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove))));
+ };
showLink = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay)));
- }
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay))));
+ };
showAnchor = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.hidden = !this.props.linkDoc.hidden)));
- }
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.hidden = !this.props.linkDoc.hidden))));
+ };
render() {
const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
- const title = StrCast(this.props.destinationDoc.title).length > 18 ?
- StrCast(this.props.destinationDoc.title).substr(0, 14) + "..." : this.props.destinationDoc.title;
+ const title = StrCast(this.props.destinationDoc.title).length > 18 ? StrCast(this.props.destinationDoc.title).substr(0, 14) + '...' : this.props.destinationDoc.title;
// ...
// from anika to bob: here's where the text that is specifically linked would show up (linkDoc.storedText)
// ...
- const source = this.props.sourceDoc.type === DocumentType.RTF ? this.props.linkDoc.storedText ?
- StrCast(this.props.linkDoc.storedText).length > 17 ?
- StrCast(this.props.linkDoc.storedText).substr(0, 18)
- : this.props.linkDoc.storedText : undefined : undefined;
+ const source =
+ this.props.sourceDoc.type === DocumentType.RTF
+ ? this.props.linkDoc.storedText
+ ? StrCast(this.props.linkDoc.storedText).length > 17
+ ? StrCast(this.props.linkDoc.storedText).substr(0, 18)
+ : this.props.linkDoc.storedText
+ : undefined
+ : undefined;
return (
<div className="linkMenu-item">
- <div className={"linkMenu-item-content expand-two"}>
-
- <div ref={this._drag} className="linkMenu-name" //title="drag to view target. click to customize."
+ <div className={'linkMenu-item-content expand-two'}>
+ <div
+ ref={this._drag}
+ className="linkMenu-name" //title="drag to view target. click to customize."
onPointerLeave={LinkDocPreview.Clear}
- onPointerEnter={e => this.props.linkDoc && LinkDocPreview.SetLinkInfo({
- docProps: this.props.docView.props,
- linkSrc: this.props.sourceDoc,
- linkDoc: this.props.linkDoc,
- showHeader: false,
- location: [e.clientX, e.clientY + 20]
- })}
+ onPointerEnter={e =>
+ this.props.linkDoc &&
+ LinkDocPreview.SetLinkInfo({
+ docProps: this.props.docView.props,
+ linkSrc: this.props.sourceDoc,
+ linkDoc: this.props.linkDoc,
+ showHeader: false,
+ location: [e.clientX, e.clientY + 20],
+ })
+ }
onPointerDown={this.onLinkButtonDown}>
-
<div className="linkMenu-text">
- {source ? <p className="linkMenu-source-title"> <b>Source: {source}</b></p> : null}
+ {source ? (
+ <p className="linkMenu-source-title">
+ {' '}
+ <b>Source: {StrCast(source)}</b>
+ </p>
+ ) : null}
<div className="linkMenu-title-wrapper">
- <div className="destination-icon-wrapper" >
+ <div className="destination-icon-wrapper">
<FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" />
</div>
<p className="linkMenu-destination-title">
- {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? "Annotation in" : ""} {title}
+ {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
</p>
</div>
- {!this.props.linkDoc.description ? (null) : <p className="linkMenu-description">{StrCast(this.props.linkDoc.description)}</p>}
+ {!this.props.linkDoc.description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.description)}</p>}
</div>
- <div className="linkMenu-item-buttons" ref={this._buttonRef} >
-
- <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.hidden ? "Show Link Anchor" : "Hide Link Anchor"}</div></>}>
- <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "" : "#4476f7" /* $medium-blue */ }} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon={"eye"} size="sm" /></div>
+ <div className="linkMenu-item-buttons" ref={this._buttonRef}>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">{this.props.linkDoc.hidden ? 'Show Link Anchor' : 'Hide Link Anchor'}</div>
+ </>
+ }>
+ <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? '' : '#4476f7' /* $medium-blue */ }} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon={'eye'} size="sm" />
+ </div>
</Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? "Hide Link Line" : "Show Link Line"}</div></>}>
- <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "gray" : this.props.linkDoc.linkDisplay ? "#4476f7"/* $medium-blue */ : "" }} onPointerDown={this.showLink} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon={"project-diagram"} size="sm" /></div>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? 'Hide Link Line' : 'Show Link Line'}</div>
+ </>
+ }>
+ <div
+ className="button"
+ ref={this._editRef}
+ style={{ background: this.props.linkDoc.hidden ? 'gray' : this.props.linkDoc.linkDisplay ? '#4476f7' /* $medium-blue */ : '' }}
+ onPointerDown={this.showLink}
+ onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon={'project-diagram'} size="sm" />
+ </div>
</Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? "Click to freeze link anchor position" : "Click to auto move link anchor"}</div></>}>
- <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "gray" : !this.props.linkDoc.linkAutoMove ? "" : "#4476f7" /* $medium-blue */ }} onPointerDown={this.autoMove} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon={"play"} size="sm" /></div>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? 'Click to freeze link anchor position' : 'Click to auto move link anchor'}</div>
+ </>
+ }>
+ <div
+ className="button"
+ ref={this._editRef}
+ style={{ background: this.props.linkDoc.hidden ? 'gray' : !this.props.linkDoc.linkAutoMove ? '' : '#4476f7' /* $medium-blue */ }}
+ onPointerDown={this.autoMove}
+ onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon={'play'} size="sm" />
+ </div>
</Tooltip>
- <Tooltip title={<><div className="dash-tooltip">Edit Link</div></>}>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">Edit Link</div>
+ </>
+ }>
<div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
+ <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
+ </div>
</Tooltip>
- <Tooltip title={<><div className="dash-tooltip">Delete Link</div></>}>
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">Delete Link</div>
+ </>
+ }>
<div className="button" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
+ <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
+ </div>
</Tooltip>
</div>
</div>
</div>
-
- </div >
+ </div>
);
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index c8be9069c..0bcb68f82 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -1,17 +1,16 @@
import { action, observable } from 'mobx';
-import { observer } from "mobx-react";
+import { observer } from 'mobx-react';
import { EditorView } from 'prosemirror-view';
+import { Doc } from '../../../fields/Doc';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
import { DocUtils } from '../../documents/Documents';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
import { Transform } from '../../util/Transform';
import { undoBatch } from '../../util/UndoManager';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import { SearchBox } from '../search/SearchBox';
import { DefaultStyleProvider } from '../StyleProvider';
import './LinkPopup.scss';
-import React = require("react");
-import { Doc, Opt } from '../../../fields/Doc';
+import React = require('react');
interface LinkPopupProps {
showPopup: boolean;
@@ -23,33 +22,30 @@ interface LinkPopupProps {
}
/**
- * Popup component for creating links from text to Dash documents
+ * Popup component for creating links from text to Dash documents
*/
@observer
export class LinkPopup extends React.Component<LinkPopupProps> {
- @observable private linkURL: string = "";
+ @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);
- }
+ ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, 'onRadd:rightight', target, target);
+ };
@action
onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
this.linkURL = e.target.value;
- }
-
+ };
getPWidth = () => 500;
getPHeight = () => 500;
render() {
- const popupVisibility = this.props.showPopup ? "block" : "none";
+ const popupVisibility = this.props.showPopup ? 'block' : 'none';
const linkDoc = this.props.linkFrom ? this.props.linkFrom : undefined;
return (
<div className="linkPopup-container" style={{ display: popupVisibility }}>
@@ -67,9 +63,9 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
<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}
+ <SearchBox
+ Document={Doc.MySearcher}
+ DataDoc={Doc.MySearcher}
linkFrom={linkDoc}
linkSearch={true}
fieldKey="data"
@@ -83,7 +79,6 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
pinToPres={emptyFunction}
rootSelected={returnTrue}
styleProvider={DefaultStyleProvider}
- layerProvider={undefined}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
PanelWidth={this.getPWidth}
@@ -97,9 +92,10 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
docRangeFilters={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined} />
+ ContainingCollectionDoc={undefined}
+ />
</div>
</div>
);
}
-} \ No newline at end of file
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-07 12:33:46 +0000