diff options
Diffstat (limited to 'src/client/views/linking/LinkEditor.tsx')
| -rw-r--r-- | src/client/views/linking/LinkEditor.tsx | 141 |
1 files changed, 80 insertions, 61 deletions
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index ba301962b..d23d38854 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -9,11 +9,12 @@ import { undoBatch } from '../../util/UndoManager'; import './LinkEditor.scss'; import { LinkRelationshipSearch } from './LinkRelationshipSearch'; import React = require('react'); +import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; interface LinkEditorProps { sourceDoc: Doc; linkDoc: Doc; - showLinks: () => void; + showLinks?: () => void; hideback?: boolean; } @observer @@ -22,13 +23,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> { @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'; @@ -37,12 +31,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> { //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @undoBatch - deleteLink = (): void => { - LinkManager.Instance.deleteLink(this.props.linkDoc); - this.props.showLinks(); - }; - - @undoBatch setRelationshipValue = action((value: string) => { if (LinkManager.currentLink) { const prevRelationship = LinkManager.currentLink.linkRelationship as string; @@ -173,7 +161,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> { //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-label">Relationship:</div> <div className="linkEditor-description-input"> <div className="linkEditor-description-editing"> <input @@ -214,7 +202,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> { get editDescription() { return ( <div className="linkEditor-description"> - <div className="linkEditor-description-label">Link Description:</div> + <div className="linkEditor-description-label">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> @@ -284,68 +272,99 @@ export class LinkEditor extends React.Component<LinkEditorProps> { ); } - @action - changeInfo = () => { - this.showInfo = !this.showInfo; + autoMove = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove)))); + }; + + showAnchor = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.hidden = !this.props.linkDoc.hidden)))); + }; + + showLink = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay)))); + }; + + deleteLink = (e: React.PointerEvent): void => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc)))); }; render() { const destination = LinkManager.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); return !destination ? null : ( - <div className="linkEditor" tabIndex={0} onKeyDown={e => e.stopPropagation()}> + <div className="linkEditor" tabIndex={0} onKeyDown={e => e.stopPropagation()} onPointerDown={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> + {!this.props.showLinks ? null : ( + <Tooltip title={<div className="dash-tooltip">Return to link menu</div>} placement="top"> + <button className="linkEditor-button-back" style={{ display: this.props.hideback ? 'none' : '' }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.props.showLinks?.())}> + <FontAwesomeIcon icon="arrow-left" size="sm" />{' '} + </button> + </Tooltip> + )} <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} /> + <Tooltip title={<div className="dash-tooltip">Delete Link</div>}> + <div className="linkEditor-deleteBtn" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}> + <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /> </div> </Tooltip> </div> - {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} + <div className="linkEditor-moreInfo"> + {this.props.linkDoc.author ? ( + <> + {' '} + <b>Author:</b> {StrCast(this.props.linkDoc.author)} + </> + ) : null} + {this.props.linkDoc.creationDate ? ( + <> + {' '} + <b>Creation Date:</b> + {DateCast(this.props.linkDoc.creationDate).toString()} + </> + ) : null} + </div> {this.editDescription} {this.editRelationship} {this.editZoomFollow} + <div className="linkEditor-description"> + Show Anchor: + <Tooltip title={<div className="dash-tooltip">{this.props.linkDoc.hidden ? 'Show Link Anchor' : 'Hide Link Anchor'}</div>}> + <div + className="linkEditor-button" + style={{ background: this.props.linkDoc.hidden ? 'gray' : '#4476f7' /* $medium-blue */ }} + onPointerDown={this.showAnchor} + onClick={e => e.stopPropagation()}> + <FontAwesomeIcon className="fa-icon" icon={'eye'} size="sm" /> + </div> + </Tooltip> + </div> + <div className="linkEditor-description"> + Show Link Line: + <Tooltip title={<div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? 'Hide Link Line' : 'Show Link Line'}</div>}> + <div + className="linkEditor-button" + 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> + </div> + <div className="linkEditor-description"> + Freeze Anchor: + <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="linkEditor-button" + 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> + </div> {this.followingDropdown} </div> ); |