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/LinkMenu.scss9
-rw-r--r--src/client/views/linking/LinkMenu.tsx10
-rw-r--r--src/client/views/linking/LinkMenuGroup.tsx11
-rw-r--r--src/client/views/linking/LinkMenuItem.scss14
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx15
5 files changed, 40 insertions, 19 deletions
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..bc922be36 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -12,7 +12,8 @@ import React = require("react");
interface Props {
docView: DocumentView;
- changeFlyout: () => void;
+ position?: { x?: number, y?: number };
+ itemHandler?: (doc: Doc) => void;
}
/**
@@ -25,7 +26,7 @@ export class LinkMenu extends React.Component<Props> {
@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); }
@@ -48,19 +49,20 @@ export class LinkMenu extends React.Component<Props> {
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)} />);
- 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 }}
+ 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">
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 03377ad4e..5b1e29e67 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";
@@ -14,6 +15,7 @@ interface LinkMenuGroupProps {
groupType: string;
showEditor: (linkDoc: Doc) => void;
docView: DocumentView;
+ itemHandler?: (doc: Doc) => void;
}
@observer
@@ -36,6 +38,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,6 +47,7 @@ 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}
@@ -55,12 +60,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..d6400a6b3 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,12 +1,12 @@
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 { 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';
@@ -14,11 +14,10 @@ import { Hypothesis } from '../../util/HypothesisUtils';
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';
interface LinkMenuItemProps {
@@ -29,6 +28,7 @@ interface LinkMenuItemProps {
destinationDoc: Doc;
showEditor: (linkDoc: Doc) => void;
menuRef: React.Ref<HTMLDivElement>;
+ itemHandler?: (doc: Doc) => void;
}
// drag links and drop link targets (aliasing them if needed)
@@ -98,7 +98,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
emptyFunction,
() => {
DocumentLinksButton.ClearLinkEditor();
- LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
+ if (this.props.itemHandler) {
+
+ this.props.itemHandler?.(this.props.linkDoc);
+ } else {
+ LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
+ }
});
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 22:22:56 +0000