diff options
Diffstat (limited to 'src/client/views/linking/LinkMenuItem.tsx')
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 40 |
1 files changed, 35 insertions, 5 deletions
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 6af474513..d2363c7d3 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,5 +1,5 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from "mobx-react"; @@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; import { DocumentView } from '../nodes/DocumentView'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; -library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt); +library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash); interface LinkMenuItemProps { @@ -78,7 +78,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; } onEdit = (e: React.PointerEvent): void => { + + console.log("Edit"); LinkManager.currentLink = this.props.linkDoc; + console.log(this.props.linkDoc); setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc)); } @@ -176,9 +179,28 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); const canExpand = keys ? keys.length > 0 : false; + const eyeIcon = this.props.linkDoc.shown ? "eye-slash" : "eye"; + + const destinationIcon = this.props.destinationDoc.type === "image" ? "image" : + this.props.destinationDoc.type === "comparison" ? "columns" : + this.props.destinationDoc.type === "rtf" ? "font" : + this.props.destinationDoc.type === "collection" ? "folder" : + this.props.destinationDoc.type === "web" ? "globe-asia" : + this.props.destinationDoc.type === "screenshot" ? "photo-video" : + this.props.destinationDoc.type === "webcam" ? "video" : + this.props.destinationDoc.type === "audio" ? "microphone" : + this.props.destinationDoc.type === "button" ? "lightning" : + this.props.destinationDoc.type === "presentation" ? "tv" : + this.props.destinationDoc.type === "query" ? "search" : + this.props.destinationDoc.type === "script" ? "terminal" : + this.props.destinationDoc.type === "import" ? "cloud-upload-alt" : + this.props.destinationDoc.type === "docholder" ? "expand" : "question"; + + return ( <div className="linkMenu-item"> <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}> + <div ref={this._drag} className="linkMenu-name" //title="drag to view target. click to customize." onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)} onPointerEnter={action(e => this.props.linkDoc && (LinkDocPreview.LinkInfo = { @@ -190,9 +212,14 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { onPointerDown={this.onLinkButtonDown}> <div className="linkMenu-text"> - <p className="linkMenu-destination-title" - onPointerDown={this.followDefault}> - {StrCast(this.props.destinationDoc.title)}</p> + {this.props.linkDoc.linkedText ? <p className="linkMenu-source-title"> + Source: <b>{StrCast(this.props.linkDoc.linkedText)}</b></p> : null} + <div className="linkMenu-title-wrapper"> + <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" /> + <p className="linkMenu-destination-title" + onPointerDown={this.followDefault}> + {StrCast(this.props.destinationDoc.title)}</p> + </div> {this.props.linkDoc.description !== "" ? <p className="linkMenu-description"> {StrCast(this.props.linkDoc.description)}</p> : null} </div> @@ -200,6 +227,9 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { {canExpand ? <div title="Show more" className="button" onPointerDown={e => this.toggleShowMore(e)}> <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>} + <div title="Show link" className="button" ref={this._editRef} onPointerDown={emptyFunction}> + <FontAwesomeIcon className="fa-icon" icon={eyeIcon} size="sm" /></div> + <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}> <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div> <div title="Delete link" className="button" onPointerDown={this.deleteLink}> |