aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/AudioBox.scss1
-rw-r--r--src/client/views/nodes/AudioBox.tsx1
-rw-r--r--src/client/views/nodes/DocumentLinksButton.tsx62
-rw-r--r--src/client/views/nodes/DocumentView.tsx44
-rw-r--r--src/client/views/nodes/LinkCreatedBox.tsx8
-rw-r--r--src/client/views/nodes/LinkDescriptionPopup.scss69
-rw-r--r--src/client/views/nodes/LinkDescriptionPopup.tsx73
-rw-r--r--src/client/views/nodes/formattedText/RichTextMenu.tsx2
8 files changed, 222 insertions, 38 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index c959b79f5..e9420a072 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -5,6 +5,7 @@
position: inherit;
display: flex;
pointer-events: all;
+ position: relative;
cursor: default;
.audiobox-buttons {
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index d5288fff6..5c921cea4 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -268,6 +268,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
LayoutTemplate={undefined}
LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)}
ContainingCollectionDoc={this.props.Document}
+ dontRegisterView={true}
parentActive={returnTrue}
bringToFront={emptyFunction}
backgroundColor={returnTransparent} />
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index bfd860f65..7fb447cab 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -11,6 +11,8 @@ import { DocUtils } from "../../documents/Documents";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LinkDocPreview } from "./LinkDocPreview";
import { LinkCreatedBox } from "./LinkCreatedBox";
+import { LinkDescriptionPopup } from "./LinkDescriptionPopup";
+import { LinkManager } from "../../util/LinkManager";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -54,6 +56,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
return false;
}
+
onLinkButtonDown = (e: React.PointerEvent): void => {
setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
if (doubleTap && this.props.InMenu) {
@@ -87,15 +90,22 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
// Doc.UnBrushDoc(this.props.View.Document);
// });
} else {
- DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
- DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
-
- runInAction(() => {
- LinkCreatedBox.popupX = e.screenX;
- LinkCreatedBox.popupY = e.screenY - 120;
- LinkCreatedBox.linkCreated = true;
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- });
+
+ 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;
+ runInAction(() => {
+ LinkCreatedBox.popupX = e.screenX;
+ LinkCreatedBox.popupY = e.screenY - 133;
+ LinkCreatedBox.linkCreated = true;
+
+ LinkDescriptionPopup.popupX = e.screenX;
+ LinkDescriptionPopup.popupY = e.screenY - 100;
+ LinkDescriptionPopup.descriptionPopup = true;
+
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
+ }
}
}
}));
@@ -109,15 +119,23 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
// Doc.UnBrushDoc(this.props.View.Document);
// });
} else {
- DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
- DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
-
- runInAction(() => {
- LinkCreatedBox.popupX = e.screenX;
- LinkCreatedBox.popupY = e.screenY - 120;
- LinkCreatedBox.linkCreated = true;
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- });
+ 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;
+ 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;
+ }
+
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
+ }
}
}
@@ -128,10 +146,14 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
@computed
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="Drag(create link) Tap(view links)" ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
+ <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" : "",
+ 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}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e277ddc36..1d76633be 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -43,6 +43,8 @@ import React = require("react");
import { DocumentLinksButton } from './DocumentLinksButton';
import { MobileInterface } from '../../../mobile/MobileInterface';
import { LinkCreatedBox } from './LinkCreatedBox';
+import { LinkDescriptionPopup } from './LinkDescriptionPopup';
+import { LinkManager } from '../../util/LinkManager';
library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale,
@@ -642,30 +644,46 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
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;
+ 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);
});
-
- DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link");
}
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);
- runInAction(() => {
- LinkCreatedBox.popupX = de.x;
- LinkCreatedBox.popupY = de.y;
- LinkCreatedBox.linkCreated = true;
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- });
+ 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);
+ });
+ }
- de.complete.linkDragData.linkSourceDocument !== this.props.Document &&
- (de.complete.linkDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument },
- { doc: this.props.Document }, `link`)); // TODODO this is where in text links get passed
}
}
@@ -1094,7 +1112,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
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
- DocListCast(this.Document.links).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) =>
+ DocUtils.FilterDocs(DocListCast(this.Document.links), this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) =>
<DocumentView {...this.props} key={i + 1}
Document={d}
ContainingCollectionView={this.props.ContainingCollectionView}
diff --git a/src/client/views/nodes/LinkCreatedBox.tsx b/src/client/views/nodes/LinkCreatedBox.tsx
index d157d3fca..648ae23c8 100644
--- a/src/client/views/nodes/LinkCreatedBox.tsx
+++ b/src/client/views/nodes/LinkCreatedBox.tsx
@@ -11,8 +11,8 @@ import { Fade } from "@material-ui/core";
export class LinkCreatedBox extends React.Component<{}> {
@observable public static linkCreated: boolean = false;
- @observable public static popupX: number = 600;
- @observable public static popupY: number = 250;
+ @observable public static popupX: number = 500;
+ @observable public static popupY: number = 150;
@action
public static changeLinkCreated = () => {
@@ -23,8 +23,8 @@ export class LinkCreatedBox extends React.Component<{}> {
return <Fade in={LinkCreatedBox.linkCreated}>
<div className="linkCreatedBox-fade"
style={{
- left: LinkCreatedBox.popupX ? LinkCreatedBox.popupX : 600,
- top: LinkCreatedBox.popupY ? LinkCreatedBox.popupY : 250,
+ left: LinkCreatedBox.popupX ? LinkCreatedBox.popupX : 500,
+ top: LinkCreatedBox.popupY ? LinkCreatedBox.popupY : 150,
}}>Link Created</div>
</Fade>;
}
diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss
new file mode 100644
index 000000000..54002fd1b
--- /dev/null
+++ b/src/client/views/nodes/LinkDescriptionPopup.scss
@@ -0,0 +1,69 @@
+.linkDescriptionPopup {
+
+ display: flex;
+
+ border: 1px solid rgb(170, 26, 26);
+
+ width: auto;
+ position: absolute;
+
+ height: auto;
+ z-index: 10000;
+ border-radius: 10px;
+ font-size: 12px;
+ //white-space: nowrap;
+
+ background-color: rgba(250, 250, 250, 0.95);
+ padding-top: 9px;
+ padding-bottom: 9px;
+ padding-left: 9px;
+ padding-right: 9px;
+
+ .linkDescriptionPopup-input {
+ float: left;
+ background-color: rgba(250, 250, 250, 0.95);
+ color: rgb(100, 100, 100);
+ border: none;
+ min-width: 160px;
+ }
+
+ .linkDescriptionPopup-btn {
+
+ float: right;
+
+ justify-content: center;
+ vertical-align: middle;
+
+
+ .linkDescriptionPopup-btn-dismiss {
+ background-color: white;
+ color: black;
+ display: inline;
+ right: 0;
+ border-radius: 10px;
+ border: 1px solid black;
+ padding: 3px;
+ font-size: 9px;
+ text-align: center;
+ position: relative;
+ margin-right: 4px;
+ justify-content: center;
+ }
+
+ .linkDescriptionPopup-btn-add {
+ background-color: black;
+ color: white;
+ display: inline;
+ right: 0;
+ border-radius: 10px;
+ border: 1px solid black;
+ padding: 3px;
+ font-size: 9px;
+ text-align: center;
+ position: relative;
+ justify-content: center;
+ }
+ }
+
+
+} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
new file mode 100644
index 000000000..3bb52d9fb
--- /dev/null
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -0,0 +1,73 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import "./LinkDescriptionPopup.scss";
+import { observable, action } from "mobx";
+import { EditableView } from "../EditableView";
+import { LinkManager } from "../../util/LinkManager";
+import { LinkCreatedBox } from "./LinkCreatedBox";
+
+
+@observer
+export class LinkDescriptionPopup extends React.Component<{}> {
+
+ @observable public static descriptionPopup: boolean = false;
+ @observable public static showDescriptions: string = "ON";
+ @observable public static popupX: number = 700;
+ @observable public static popupY: number = 350;
+ @observable description: string = "";
+ @observable popupRef = React.createRef<HTMLDivElement>();
+
+ @action
+ descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.description = e.currentTarget.value;
+ }
+
+ @action
+ setDescription = () => {
+ if (LinkManager.currentLink) {
+ LinkManager.currentLink.description = this.description;
+ }
+ LinkDescriptionPopup.descriptionPopup = false;
+ }
+
+ @action
+ onDismiss = () => {
+ LinkDescriptionPopup.descriptionPopup = false;
+ }
+
+ @action
+ onClick = (e: PointerEvent) => {
+ if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
+ LinkDescriptionPopup.descriptionPopup = false;
+ LinkCreatedBox.linkCreated = false;
+ }
+ }
+
+ @action
+ componentDidMount() {
+ document.addEventListener("pointerdown", this.onClick);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener("pointerdown", this.onClick);
+ }
+
+ render() {
+ return <div className="linkDescriptionPopup" ref={this.popupRef}
+ style={{
+ left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700,
+ top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350,
+ }}>
+ <input className="linkDescriptionPopup-input"
+ placeholder={"(optional) enter link label..."}
+ onChange={(e) => this.descriptionChanged(e)}>
+ </input>
+ <div className="linkDescriptionPopup-btn">
+ <div className="linkDescriptionPopup-btn-dismiss"
+ onPointerDown={this.onDismiss}> Dismiss </div>
+ <div className="linkDescriptionPopup-btn-add"
+ onPointerDown={this.setDescription}> Add </div>
+ </div>
+ </div>;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 9075a6486..f10c425d4 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -219,7 +219,7 @@ export default class RichTextMenu extends AntimodeMenu {
getActiveAlignment() {
if (this.view) {
const path = (this.view.state.selection.$from as any).path;
- for (let i = path.length - 3; i < path.length; i -= 3) {
+ for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) {
if (path[i]?.type === this.view.state.schema.nodes.paragraph) {
return path[i].attrs.align || "left";
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-02 00:22:31 +0000