diff options
Diffstat (limited to 'src/client/views/nodes')
12 files changed, 262 insertions, 255 deletions
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index ba075886b..6081def5d 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -2,7 +2,6 @@ import React = require("react"); import { computed } from "mobx"; import { observer } from "mobx-react"; import { Transform } from "nodemailer/lib/xoauth2"; -import "react-table/react-table.css"; import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { ScriptField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; @@ -10,7 +9,6 @@ import { TraceMobx } from "../../../fields/util"; import { emptyFunction } from "../../../Utils"; import { dropActionType } from "../../util/DragManager"; import { CollectionView } from "../collections/CollectionView"; -import '../DocumentDecorations.scss'; import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; import "./ContentFittingDocumentView.scss"; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index b58603978..580e86442 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -23,7 +23,7 @@ &:hover { background: deepskyblue; transform: scale(1.05); - cursor: grab; + cursor: pointer; } } .documentLinksButton { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 7fb447cab..e6e4aa6c2 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../../fields/Doc"; import { emptyFunction, setupMoveUpEvents, returnFalse } from "../../../Utils"; import { DragManager } from "../../util/DragManager"; -import { UndoManager } from "../../util/UndoManager"; +import { UndoManager, undoBatch } from "../../util/UndoManager"; import './DocumentLinksButton.scss'; import { DocumentView } from "./DocumentView"; import React = require("react"); @@ -13,6 +13,7 @@ import { LinkDocPreview } from "./LinkDocPreview"; import { LinkCreatedBox } from "./LinkCreatedBox"; import { LinkDescriptionPopup } from "./LinkDescriptionPopup"; import { LinkManager } from "../../util/LinkManager"; +import { Tooltip } from "@material-ui/core"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -29,7 +30,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp @observable public static StartLink: DocumentView | undefined; - @action + @action @undoBatch onLinkButtonMoved = (e: PointerEvent) => { if (this._linkButton.current !== null) { const linkDrag = UndoManager.StartBatch("Drag Link"); @@ -56,31 +57,33 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp return false; } - + @undoBatch onLinkButtonDown = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { if (doubleTap && this.props.InMenu) { //action(() => Doc.BrushDoc(this.props.View.Document)); DocumentLinksButton.StartLink = this.props.View; - } else if (!!!this.props.InMenu) { + } else if (!this.props.InMenu) { + console.log("editing"); + this.props.View ? console.log("view") : null; DocumentLinksButton.EditLink = this.props.View; DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; } })); } - @action + @action @undoBatch onLinkClick = (e: React.MouseEvent): void => { if (this.props.InMenu) { DocumentLinksButton.StartLink = this.props.View; //action(() => Doc.BrushDoc(this.props.View.Document)); - } else if (!!!this.props.InMenu) { + } else if (!this.props.InMenu) { DocumentLinksButton.EditLink = this.props.View; DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; } } - @action + @action @undoBatch completeLink = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => { if (doubleTap) { @@ -94,16 +97,22 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) { const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); LinkManager.currentLink = linkDoc; + linkDoc ? linkDoc.hidden = true : null; + linkDoc ? linkDoc.linkDisplay = true : null; + runInAction(() => { - LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 133; - LinkCreatedBox.linkCreated = true; + if (linkDoc) { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 133; + LinkCreatedBox.linkCreated = true; - LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY - 100; - LinkDescriptionPopup.descriptionPopup = true; + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY - 100; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + } - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); }); } } @@ -111,7 +120,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp })); } - @action + @action @undoBatch finishLinkClick = (e: React.MouseEvent) => { if (DocumentLinksButton.StartLink === this.props.View) { DocumentLinksButton.StartLink = undefined; @@ -122,18 +131,23 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) { const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); LinkManager.currentLink = linkDoc; + linkDoc ? linkDoc.hidden = true : null; + linkDoc ? linkDoc.linkDisplay = true : null; + runInAction(() => { - LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 133; - LinkCreatedBox.linkCreated = true; - - if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) { - LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY - 100; - LinkDescriptionPopup.descriptionPopup = true; - } + if (linkDoc) { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 133; + LinkCreatedBox.linkCreated = true; + + if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) { + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY - 100; + LinkDescriptionPopup.descriptionPopup = true; + } - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + } }); } } @@ -147,32 +161,35 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp get linkButton() { const links = DocListCast(this.props.View.props.Document.links); - const title = this.props.InMenu ? "Drag or tap to create links" : "Tap to view links"; - - return (!links.length || links[0].hidden) && !this.props.AlwaysOn ? (null) : - <div title={title} ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}> - <div className={"documentLinksButton"} style={{ - backgroundColor: DocumentLinksButton.StartLink ? "transparent" : this.props.InMenu ? "black" : "", - color: this.props.InMenu ? "white" : "black", - width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold" - }} - onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick} - // onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)} - // onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { - // addDocTab: this.props.View.props.addDocTab, - // linkSrc: this.props.View.props.Document, - // linkDoc: links[0], - // Location: [e.clientX, e.clientY + 20] - // }))} - > - {links.length && !!!this.props.InMenu ? links.length : <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />} - </div> - {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"} - style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }} - onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e)} /> : (null)} - {DocumentLinksButton.StartLink === this.props.View ? <div className={"documentLinksButton-startLink"} - style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }} /> : (null)} - </div>; + const title = this.props.InMenu ? "Drag or tap to create links" : DocumentLinksButton.StartLink ? "Tap to finish link" : "Tap to view links"; + + const linkButton = <div ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}> + <div className={"documentLinksButton"} style={{ + backgroundColor: DocumentLinksButton.StartLink && !!!this.props.InMenu ? "transparent" : this.props.InMenu ? "black" : "", + color: this.props.InMenu ? "white" : "black", + width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold" + }} + onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick} + // onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)} + // onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { + // addDocTab: this.props.View.props.addDocTab, + // linkSrc: this.props.View.props.Document, + // linkDoc: links[0], + // Location: [e.clientX, e.clientY + 20] + // }))} + > + {links.length && !!!this.props.InMenu ? links.length : <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />} + </div> + {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"} + style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }} + onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e)} /> : (null)} + {DocumentLinksButton.StartLink === this.props.View ? <div className={"documentLinksButton-startLink"} + style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }} /> : (null)} + </div>; + return (!links.length) && !this.props.AlwaysOn ? (null) : + <Tooltip title={title}> + {linkButton} + </Tooltip>; } render() { return this.linkButton; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 97e3bc01c..2e492a865 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -639,49 +639,37 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu alert("linking to document tabs not yet supported. Drop link on document content."); return; } + const makeLink = action((linkDoc: Doc) => { + LinkManager.currentLink = linkDoc; + linkDoc.hidden = true; + linkDoc.linkDisplay = true; + + LinkCreatedBox.popupX = de.x; + LinkCreatedBox.popupY = de.y - 33; + LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = de.x; + LinkDescriptionPopup.popupY = de.y; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => LinkCreatedBox.linkCreated = false), 2500); + }); if (de.complete.annoDragData) { /// this whole section for handling PDF annotations looks weird. Need to rethink this to make it cleaner e.stopPropagation(); de.complete.annoDragData.linkedToDoc = true; const linkDoc = DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link"); - LinkManager.currentLink = linkDoc; - - runInAction(() => { - LinkCreatedBox.popupX = de.x; - LinkCreatedBox.popupY = de.y - 33; - LinkCreatedBox.linkCreated = true; - - LinkDescriptionPopup.popupX = de.x; - LinkDescriptionPopup.popupY = de.y; - LinkDescriptionPopup.descriptionPopup = true; - - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + linkDoc && makeLink(linkDoc); } if (de.complete.linkDragData) { e.stopPropagation(); - // const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true); - // const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView); - if (de.complete.linkDragData.linkSourceDocument !== this.props.Document) { const linkDoc = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument }, { doc: this.props.Document }, `link`); - LinkManager.currentLink = linkDoc; - de.complete.linkDragData.linkSourceDocument !== this.props.Document && (de.complete.linkDragData.linkDocument = linkDoc); // TODODO this is where in text links get passed - runInAction(() => { - LinkCreatedBox.popupX = de.x; - LinkCreatedBox.popupY = de.y - 33; - LinkCreatedBox.linkCreated = true; - - LinkDescriptionPopup.popupX = de.x; - LinkDescriptionPopup.popupY = de.y; - LinkDescriptionPopup.descriptionPopup = true; - - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + linkDoc && makeLink(linkDoc); } } @@ -783,9 +771,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); templateDoc && optionItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" }); - optionItems.push({ description: "Toggle Show Each Link Dot", event: () => this.layoutDoc.showLinks = !this.layoutDoc.showLinks, icon: "eye" }); !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); + const existingOnClick = cm.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); @@ -839,7 +827,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const help = cm.findByDescription("Help..."); const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; - helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("http://localhost:1050/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); + helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); @@ -1084,7 +1072,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu select={this.select} onClick={this.onClickHandler} layoutKey={this.finalLayoutKey} /> - {this.layoutDoc.showLinks ? this.anchors : (null)} + {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} + {/* {this.allAnchors} */} {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.props.dontRegisterView ? (null) : <DocumentLinksButton View={this} Offset={[-15, 0]} />} </div> ); @@ -1107,8 +1096,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && (doc.hidden = true), true) anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; - @computed get anchors() { + + @computed get allAnchors() { TraceMobx(); + if (this.props.LayoutTemplateString?.includes("LinkAnchorBox")) return null; return (this.props.treeViewDoc && this.props.LayoutTemplateString) || // render nothing for: tree view anchor dots this.layoutDoc.presBox || // presentationbox nodes this.props.dontRegisterView ? (null) : // view that are not registered @@ -1130,10 +1121,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu } @computed get innards() { TraceMobx(); - if (this.props.treeViewDoc && !this.props.LayoutTemplateString) { // this happens when the document is a tree view label (but not an anchor dot) + if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) { // this happens when the document is a tree view label (but not an anchor dot) return <div className="documentView-treeView" style={{ maxWidth: this.props.PanelWidth() || undefined }}> {StrCast(this.props.Document.title)} - {this.anchors} + {this.allAnchors} </div>; } diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index 54002fd1b..d92823ccc 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -48,6 +48,10 @@ position: relative; margin-right: 4px; justify-content: center; + + &:hover{ + cursor: pointer; + } } .linkDescriptionPopup-btn-add { @@ -62,6 +66,10 @@ text-align: center; position: relative; justify-content: center; + + &:hover{ + cursor: pointer; + } } } diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index 3bb52d9fb..06e8d30d1 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -19,15 +19,7 @@ export class LinkDescriptionPopup extends React.Component<{}> { @action descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => { - this.description = e.currentTarget.value; - } - - @action - setDescription = () => { - if (LinkManager.currentLink) { - LinkManager.currentLink.description = this.description; - } - LinkDescriptionPopup.descriptionPopup = false; + LinkManager.currentLink && (LinkManager.currentLink.description = e.currentTarget.value); } @action @@ -58,7 +50,7 @@ export class LinkDescriptionPopup extends React.Component<{}> { left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700, top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350, }}> - <input className="linkDescriptionPopup-input" + <input className="linkDescriptionPopup-input" onKeyPress={e => e.key === "Enter" && this.onDismiss()} placeholder={"(optional) enter link label..."} onChange={(e) => this.descriptionChanged(e)}> </input> @@ -66,7 +58,7 @@ export class LinkDescriptionPopup extends React.Component<{}> { <div className="linkDescriptionPopup-btn-dismiss" onPointerDown={this.onDismiss}> Dismiss </div> <div className="linkDescriptionPopup-btn-add" - onPointerDown={this.setDescription}> Add </div> + onPointerDown={this.onDismiss}> Add </div> </div> </div>; } diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 197dc8df4..079920f56 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -98,23 +98,11 @@ export class LinkDocPreview extends React.Component<Props> { {this._toolTipText} </div> </div> : - // <div style={{ - // border: "6px solid white", - // }}> - // <div style={{ backgroundColor: "white" }}> {this._targetDoc.title} - // <div className="wrapper" style={{ float: "right" }}> - // <div title="Delete link" className="button" style={{ display: "inline" }} ref={this._editRef} onPointerDown={this.deleteLink}> - // <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div> - // <div title="Follow link" className="button" style={{ display: "inline" }} onClick={this.followDefault} onContextMenu={this.onContextMenu}> - // <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /> - // </div> - // </div> - // </div> + <ContentFittingDocumentView Document={this._targetDoc} LibraryPath={emptyPath} fitToBox={true} - backgroundColor={this.props.backgroundColor} moveDocument={returnFalse} rootSelected={returnFalse} ScreenToLocalTransform={Transform.Identity} @@ -128,16 +116,14 @@ export class LinkDocPreview extends React.Component<Props> { ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} renderDepth={0} - PanelWidth={this.width} - PanelHeight={this.height} + PanelWidth={() => this.width() - 16} //Math.min(350, NumCast(target._width, 350))} + PanelHeight={() => this.height() - 16} //Math.min(250, NumCast(target._height, 250))} focus={emptyFunction} whenActiveChanged={returnFalse} bringToFront={returnFalse} ContentScaling={returnOne} NativeWidth={returnZero} - NativeHeight={returnZero} - />; - //</div>; + NativeHeight={returnZero} />; } render() { @@ -145,7 +131,10 @@ export class LinkDocPreview extends React.Component<Props> { style={{ position: "absolute", left: this.props.location[0], top: this.props.location[1], width: this.width(), height: this.height(), - boxShadow: "black 2px 2px 1em", zIndex: 1000 + zIndex: 1000, + border: "8px solid white", borderRadius: "7px", + boxShadow: "3px 3px 1.5px grey", + borderBottom: "8px solid white", borderRight: "8px solid white" }}> {this.targetDocView} </div>; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 3c5c48c7c..d69f8e3db 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -174,19 +174,25 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp linkOnDeselect: Map<string, string> = new Map(); doLinkOnDeselect() { + Array.from(this.linkOnDeselect.entries()).map(entry => { const key = entry[0]; const value = entry[1]; + const id = Utils.GenerateDeterministicGuid(this.dataDoc[Id] + key); DocServer.GetRefField(value).then(doc => { DocServer.GetRefField(id).then(linkDoc => { this.dataDoc[key] = doc || Docs.Create.FreeformDocument([], { title: value, _width: 500, _height: 500 }, value); DocUtils.Publish(this.dataDoc[key] as Doc, value, this.props.addDocument, this.props.removeDocument); - if (linkDoc) { (linkDoc as Doc).anchor2 = this.dataDoc[key] as Doc; } - else DocUtils.MakeLink({ doc: this.rootDoc }, { doc: this.dataDoc[key] as Doc }, "portal link", "link to named target", id); + if (linkDoc) { + (linkDoc as Doc).anchor2 = this.dataDoc[key] as Doc; + } else { + DocUtils.MakeLink({ doc: this.rootDoc }, { doc: this.dataDoc[key] as Doc }, "portal link", "link to named target", id); + } }); }); }); + this.linkOnDeselect.clear(); } @@ -944,6 +950,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp frag.forEach(node => nodes.push(marker(node))); return Fragment.fromArray(nodes); } + + function addLinkMark(node: Node, title: string, linkId: string) { if (!node.isText) { const content = addMarkToFrag(node.content, (node: Node) => addLinkMark(node, title, linkId)); diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss index 9089e7039..6a403cb17 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss @@ -4,10 +4,74 @@ z-index: 20; background: white; border: 1px solid silver; - border-radius: 2px; + border-radius: 7px; margin-bottom: 7px; -webkit-transform: translateX(-50%); transform: translateX(-50%); + box-shadow: 3px 3px 1.5px grey; + + .FormattedTextBoxComment { + background-color: white; + border: 8px solid white; + + //display: flex; + .FormattedTextBoxComment-info { + + margin-bottom: 9px; + + .FormattedTextBoxComment-title { + padding-right: 4px; + float: left; + + .FormattedTextBoxComment-description { + text-decoration: none; + font-style: italic; + color: rgb(95, 97, 102); + font-size: 10px; + padding-bottom: 4px; + margin-bottom: 5px; + + } + } + + .FormattedTextBoxComment-button { + display: inline; + padding-left: 6px; + padding-right: 6px; + padding-top: 2.5px; + padding-bottom: 2.5px; + width: 17px; + height: 17px; + margin: 0; + margin-right: 3px; + border-radius: 50%; + pointer-events: auto; + background-color: rgb(0, 0, 0); + color: rgb(255, 255, 255); + transition: transform 0.2s; + text-align: center; + position: relative; + font-size: 12px; + + &:hover { + background-color: rgb(77, 77, 77); + cursor: pointer; + } + } + } + + .FormattedTextBoxComment-preview-wrapper { + width: 170px; + height: 170px; + overflow: hidden; + //padding-top: 5px; + margin-top: 10px; + margin-bottom: 8px; + align-content: center; + justify-content: center; + background-color: rgb(160, 160, 160); + } + } } .FormattedTextBox-tooltip:before { @@ -42,64 +106,4 @@ top: 50%; right: 0; transform: translateY(-50%); - - .FormattedTextBoxComment-button { - width: 20px; - height: 20px; - margin: 0; - margin-right: 6px; - border-radius: 50%; - pointer-events: auto; - background-color: rgb(38, 40, 41); - color: rgb(178, 181, 184); - font-size: 65%; - transition: transform 0.2s; - text-align: center; - position: relative; - - // margin-top: "auto"; - // margin-bottom: "auto"; - // background: black; - // color: white; - // display: inline-block; - // border-radius: 18px; - // font-size: 12.5px; - // width: 18px; - // height: 18px; - // margin-top: auto; - // margin-bottom: auto; - // margin-right: 3px; - // cursor: pointer; - // transition: transform 0.2s; - - .FormattedTextBoxComment-fa-icon { - margin-top: "auto"; - margin-bottom: "auto"; - background: black; - color: white; - display: inline-block; - border-radius: 18px; - font-size: 12.5px; - width: 18px; - height: 18px; - margin-top: auto; - margin-bottom: auto; - margin-right: 3px; - cursor: pointer; - transition: transform 0.2s; - // position: absolute; - // top: 50%; - // left: 50%; - // transform: translate(-50%, -50%); - } - - &:last-child { - margin-right: 0; - } - - &:hover { - background: rgb(53, 146, 199); - ; - } - } }
\ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 56826e5c7..fa2548cb5 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -3,7 +3,7 @@ import { EditorState, Plugin } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import * as ReactDOM from 'react-dom'; import { Doc, DocCastAsync, Opt } from "../../../../fields/Doc"; -import { Cast, FieldValue, NumCast } from "../../../../fields/Types"; +import { Cast, FieldValue, NumCast, StrCast } from "../../../../fields/Types"; import { emptyFunction, returnEmptyString, returnFalse, Utils, emptyPath, returnZero, returnOne, returnEmptyFilter } from "../../../../Utils"; import { DocServer } from "../../../DocServer"; import { DocumentManager } from "../../../util/DocumentManager"; @@ -21,6 +21,7 @@ import { action } from "mobx"; import { LinkManager } from "../../../util/LinkManager"; import { LinkDocPreview } from "../LinkDocPreview"; import { DocumentLinksButton } from "../DocumentLinksButton"; +import { Tooltip } from "@material-ui/core"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -85,13 +86,13 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip"; FormattedTextBoxComment.tooltip.style.pointerEvents = "all"; FormattedTextBoxComment.tooltip.style.maxWidth = "200px"; - FormattedTextBoxComment.tooltip.style.maxHeight = "206px"; + FormattedTextBoxComment.tooltip.style.maxHeight = "235px"; FormattedTextBoxComment.tooltip.style.width = "100%"; FormattedTextBoxComment.tooltip.style.height = "100%"; FormattedTextBoxComment.tooltip.style.overflow = "hidden"; FormattedTextBoxComment.tooltip.style.display = "none"; FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipInput); - FormattedTextBoxComment.tooltip.onpointerdown = (e: PointerEvent) => { + FormattedTextBoxComment.tooltip.onpointerdown = async (e: PointerEvent) => { const keep = e.target && (e.target as any).type === "checkbox" ? true : false; const textBox = FormattedTextBoxComment.textBox; if (FormattedTextBoxComment.linkDoc && !keep && textBox) { @@ -103,8 +104,22 @@ export class FormattedTextBoxComment { if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); } else { - DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, - (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(FormattedTextBoxComment.linkDoc.anchor1, Doc)), textBox.dataDoc) ? + Cast(FormattedTextBoxComment.linkDoc.anchor2, Doc) : (Cast(FormattedTextBoxComment.linkDoc.anchor1, Doc)) + || FormattedTextBoxComment.linkDoc); + const target = anchor?.annotationOn ? await DocCastAsync(anchor.annotationOn) : anchor; + + if (FormattedTextBoxComment.linkDoc.follow) { + if (FormattedTextBoxComment.linkDoc.follow === "Default") { + DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "onRight"), false); + } else if (FormattedTextBoxComment.linkDoc.follow === "Always open in right tab") { + if (target) { textBox.props.addDocTab(target, "onRight"); } + } else if (FormattedTextBoxComment.linkDoc.follow === "Always open in new tab") { + if (target) { textBox.props.addDocTab(target, "inTab"); } + } + } else { + DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "onRight"), false); + } } } else { if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { @@ -241,55 +256,36 @@ export class FormattedTextBoxComment { } if (target?.author) { FormattedTextBoxComment.showCommentbox("", view, nbef); - const docPreview = <div style={{ backgroundColor: "white", border: "8px solid white" }}> - {target.title} - <div className="wrapper" style={{ float: "right" }}> - <div title="Delete link" className="FormattedTextBoxComment-button" style={{ - display: "inline", - paddingLeft: "6px", - paddingRight: "6px", - paddingTop: "2.5px", - paddingBottom: "2.5px", - width: "20px", - height: "20px", - margin: 0, - marginRight: "6px", - borderRadius: "50%", - pointerEvents: "auto", - backgroundColor: "rgb(38, 40, 41)", - color: "rgb(178, 181, 184)", - transition: "transform 0.2s", - textAlign: "center", - position: "relative" - }} ref={(r) => this._deleteRef = r}> - <FontAwesomeIcon className="FormattedTextBox-fa-icon" icon="trash" - size="sm" /></div> - <div title="Follow link" className="FormattedTextBoxComment-button" style={{ - display: "inline", - paddingLeft: "6px", - paddingRight: "6px", - paddingTop: "2.5px", - paddingBottom: "2.5px", - width: "20px", - height: "20px", - margin: 0, - marginRight: "6px", - borderRadius: "50%", - pointerEvents: "auto", - backgroundColor: "rgb(38, 40, 41)", - color: "rgb(178, 181, 184)", - transition: "transform 0.2s", - textAlign: "center", - position: "relative" - }} ref={(r) => this._followRef = r}> - <FontAwesomeIcon className="FormattedTextBox-fa-icon" icon="arrow-right" - size="sm" /> + + const title = StrCast(target.title).length > 16 ? + StrCast(target.title).substr(0, 16) + "..." : target.title; + + + const docPreview = <div className="FormattedTextBoxComment"> + <div className="FormattedTextBoxComment-info"> + <div className="FormattedTextBoxComment-title"> + {title} + {FormattedTextBoxComment.linkDoc.description !== "" ? <p className="FormattedTextBoxComment-description"> + {StrCast(FormattedTextBoxComment.linkDoc.description)}</p> : null} </div> - </div> - <div className="wrapper" style={{ - maxWidth: "180px", maxHeight: "168px", overflow: "hidden", - overflowY: "hidden", paddingTop: "5px" - }}> + <div className="wrapper" style={{ float: "right" }}> + + <Tooltip title="Delete Link" placement="top"> + <div className="FormattedTextBoxComment-button" + ref={(r) => this._deleteRef = r}> + <FontAwesomeIcon className="FormattedTextBoxComment-fa-icon" icon="trash" color="white" + size="sm" /></div> + </Tooltip> + + <Tooltip title="Follow Link" placement="top"> + <div className="FormattedTextBoxComment-button" + ref={(r) => this._followRef = r}> + <FontAwesomeIcon className="FormattedTextBoxComment-fa-icon" icon="arrow-right" color="white" + size="sm" /> + </div> + </Tooltip> + </div> </div> + <div className="FormattedTextBoxComment-preview-wrapper"> <ContentFittingDocumentView Document={target} LibraryPath={emptyPath} @@ -307,17 +303,20 @@ export class FormattedTextBoxComment { ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} renderDepth={0} - PanelWidth={() => Math.min(350, NumCast(target._width, 350))} - PanelHeight={() => Math.min(250, NumCast(target._height, 250))} + PanelWidth={() => 175} //Math.min(350, NumCast(target._width, 350))} + PanelHeight={() => 175} //Math.min(250, NumCast(target._height, 250))} focus={emptyFunction} whenActiveChanged={returnFalse} bringToFront={returnFalse} ContentScaling={returnOne} - NativeWidth={returnZero} - NativeHeight={returnZero} + NativeWidth={() => target._nativeWidth ? NumCast(target._nativeWidth) : 0} + NativeHeight={() => target._nativeHeight ? NumCast(target._nativeHeight) : 0} /> </div> </div>; + + + FormattedTextBoxComment.showCommentbox("", view, nbef); ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts index 3f73ec436..172cde3e0 100644 --- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts +++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts @@ -11,6 +11,7 @@ import { Doc, DataSym } from "../../../../fields/Doc"; import { FormattedTextBox } from "./FormattedTextBox"; import { Id } from "../../../../fields/FieldSymbols"; import { Docs } from "../../../documents/Documents"; +import { Utils } from "../../../../Utils"; const mac = typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false; @@ -102,7 +103,7 @@ export default function buildKeymap<S extends Schema<any>>(schema: S, props: any //Command to create a new Tab with a PDF of all the command shortcuts bind("Mod-/", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => { - const newDoc = Docs.Create.PdfDocument("http://localhost:1050/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }); + const newDoc = Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }); props.addDocTab(newDoc, "onRight"); }); diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index f10c425d4..1a8a4ceb7 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -358,11 +358,11 @@ export default class RichTextMenu extends AntimodeMenu { const items = options.map(({ title, label, hidden, style }) => { if (hidden) { return label === activeOption ? - <option value={label} title={title} key={label} style={style ? style : {}} selected hidden>{label}</option> : + <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option> : <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option>; } return label === activeOption ? - <option value={label} title={title} key={label} style={style ? style : {}} selected>{label}</option> : + <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option> : <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option>; }); @@ -385,11 +385,11 @@ export default class RichTextMenu extends AntimodeMenu { const items = options.map(({ title, label, hidden, style }) => { if (hidden) { return label === activeOption ? - <option value={label} title={title} key={label} style={style ? style : {}} selected hidden>{label}</option> : + <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option> : <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option>; } return label === activeOption ? - <option value={label} title={title} key={label} style={style ? style : {}} selected>{label}</option> : + <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option> : <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option>; }); @@ -882,22 +882,22 @@ export default class RichTextMenu extends AntimodeMenu { render() { TraceMobx(); - const row1 = <div className="antimodeMenu-row" key="row1" style={{ display: this.collapsed ? "none" : undefined }}>{[ + const row1 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[ !this.collapsed ? this.getDragger() : (null), - !this.Pinned ? (null) : <> {[ + !this.Pinned ? (null) : <div key="frag1"> {[ this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), - <div className="richTextMenu-divider" /> - ]}</>, + <div className="richTextMenu-divider" key="divider" /> + ]}</div>, this.createColorButton(), this.createHighlighterButton(), this.createLinkButton(), this.createBrushButton(), - <div className="richTextMenu-divider" />, + <div className="richTextMenu-divider" key="divider 2" />, this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft), this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter), this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight), @@ -907,20 +907,20 @@ export default class RichTextMenu extends AntimodeMenu { this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph), ]}</div>; - const row2 = <div className="antimodeMenu-row row-2" key="antimodemenu row2"> + const row2 = <div className="antimodeMenu-row row-2" key="row2"> {this.collapsed ? this.getDragger() : (null)} - <div key="row" style={{ display: this.collapsed ? "none" : undefined }}> - <div className="richTextMenu-divider" />, + <div key="row 2" style={{ display: this.collapsed ? "none" : undefined }}> + <div className="richTextMenu-divider" key="divider 3" />, {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"), this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"), - <div className="richTextMenu-divider" />, + <div className="richTextMenu-divider" key="divider 4" />, this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes"), this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule), - <div className="richTextMenu-divider" />,]} + <div className="richTextMenu-divider" key="divider 5" />,]} </div> - <div key="button"> + <div key="collapser"> {/* <div key="collapser"> <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}> <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} /> |