From af8df1fc1af11318cadf1b71373bef776461a5cc Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 6 Apr 2022 10:42:36 -0400 Subject: uses linkMenu in propertiesWindow now. updated linkMenu api, changed layout, made groups collapsible --- src/client/views/linking/LinkMenu.scss | 9 ++++++--- src/client/views/linking/LinkMenu.tsx | 10 ++++++---- src/client/views/linking/LinkMenuGroup.tsx | 11 ++++++++--- src/client/views/linking/LinkMenuItem.scss | 14 ++++++++++---- src/client/views/linking/LinkMenuItem.tsx | 15 ++++++++++----- 5 files changed, 40 insertions(+), 19 deletions(-) (limited to 'src/client/views/linking') 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 { @observable _linkMenuRef = React.createRef(); @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 { const linkItems = Array.from(groups.entries()).map(group => this._editingLink = linkDoc)} />); - return linkItems.length ? linkItems : [

No links have been created yet. Drag the linking button onto another document to create a link.

]; + return linkItems.length ? linkItems : this.props.position ? [<>] : [

No links have been created yet. Drag the linking button onto another document to create a link.

]; } render() { const sourceDoc = this.props.docView.props.Document; return
{this._editingLink ?
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 { return color; } + @observable _collapsed = false; + render() { const set = new Set(this.props.group); const groupItems = Array.from(set.keys()).map(linkDoc => { @@ -43,6 +47,7 @@ export class LinkMenuGroup extends React.Component { 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 { return (
-
+
this._collapsed = !this._collapsed)} style={{ background: this.getBackgroundColor() }}>

{this.props.groupType}:

-
+ {this._collapsed ? (null) :
{groupItems} -
+
}
); } 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; + itemHandler?: (doc: Doc) => void; } // drag links and drop link targets (aliasing them if needed) @@ -98,7 +98,12 @@ export class LinkMenuItem extends React.Component { 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); + } }); } -- cgit v1.2.3-70-g09d2