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/LinkBox.scss30
-rw-r--r--src/client/views/nodes/LinkBox.tsx51
-rw-r--r--src/client/views/nodes/LinkMenu.tsx8
3 files changed, 64 insertions, 25 deletions
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index 08fefaf4d..77462f611 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,29 +1,43 @@
@import "../globalCssVariables";
-.link-menu-item {
- border-top: 0.5px solid $light-color-secondary;
+.linkMenu-item {
+ border-top: 0.5px solid $main-accent;
padding: 6px;
position: relative;
display: flex;
font-size: 12px;
- .link-menu-item-content {
+ .linkMenu-item-content {
width: 100%;
}
+
+ .link-metadata {
+ margin-top: 6px;
+ padding: 3px;
+ border-top: 0.5px solid $light-color-secondary;
+ .link-metadata-row {
+ margin-left: 6px;
+ }
+ }
&:last-child {
- border-bottom: 0.5px solid $light-color-secondary;
+ border-bottom: 0.5px solid $main-accent;
}
&:hover {
- .link-menu-item-buttons {
+ .linkMenu-item-buttons {
display: flex;
}
- .link-menu-item-content {
- width: calc(100% - 42px);
+ .linkMenu-item-content {
+ &.expand-two {
+ width: calc(100% - 46px);
+ }
+ &.expand-three {
+ width: calc(100% - 78px);
+ }
}
}
}
-.link-menu-item-buttons {
+.linkMenu-item-buttons {
display: none;
position: absolute;
top: 50%;
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 1a7cce4a3..9fbe83126 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,5 +1,5 @@
import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEdit, faEye, faTimes, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { observer } from "mobx-react";
import { DocumentManager } from "../../util/DocumentManager";
@@ -7,15 +7,14 @@ import { undoBatch } from "../../util/UndoManager";
import './LinkBox.scss';
import React = require("react");
import { Doc } from '../../../new_fields/Doc';
-import { StrCast } from '../../../new_fields/Types';
+import { StrCast, Cast } from '../../../new_fields/Types';
+import { observable, action } from 'mobx';
+import { LinkManager } from '../../util/LinkManager';
+library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp);
-library.add(faEye);
-library.add(faEdit);
-library.add(faTimes);
-library.add(faArrowRight);
-
interface Props {
+ groupType: string;
linkDoc: Doc;
sourceDoc: Doc;
destinationDoc: Doc;
@@ -24,6 +23,8 @@ interface Props {
@observer
export class LinkBox extends React.Component<Props> {
+ @observable private _showMore: boolean = false;
+ @action toggleShowMore() { this._showMore = !this._showMore; }
@undoBatch
onFollowLink = async (e: React.PointerEvent): Promise<void> => {
@@ -36,19 +37,43 @@ export class LinkBox extends React.Component<Props> {
this.props.showEditor();
}
+ renderMetadata = (): JSX.Element => {
+ let groups = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc);
+ let index = groups.findIndex(groupDoc => StrCast(groupDoc.type).toUpperCase() === this.props.groupType.toUpperCase());
+ let groupDoc = index > -1 ? groups[index] : undefined;
+
+ let mdRows: Array<JSX.Element> = [];
+ if (groupDoc) {
+ let mdDoc = Cast(groupDoc.metadata, Doc, new Doc);
+ let keys = LinkManager.Instance.groupMetadataKeys.get(this.props.groupType);
+ mdRows = keys!.map(key => {
+ return (<div key={key} className="link-metadata-row"><b>{key}</b>: {StrCast(mdDoc[key])}</div>);
+ });
+ }
+
+ return (<div className="link-metadata">{mdRows}</div>);
+ }
+
render() {
+
+ let keys = LinkManager.Instance.groupMetadataKeys.get(this.props.groupType);
+ let canExpand = keys ? keys.length > 0 : false;
+
return (
- <div className="link-menu-item">
- <div className="link-menu-item-content">
+ <div className="linkMenu-item">
+ <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
<div className="link-name">
<p>{StrCast(this.props.destinationDoc.title)}</p>
+ <div className="linkMenu-item-buttons">
+ {canExpand ? <div title="Show more" className="button" onPointerDown={() => this.toggleShowMore()}>
+ <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
+ <div title="Edit link" className="button" onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
+ <div title="Follow link" className="button" onPointerDown={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
+ </div>
</div>
+ {this._showMore ? this.renderMetadata() : <></>}
</div>
- <div className="link-menu-item-buttons">
- <div title="Edit link" className="button" onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
- <div title="Follow link" className="button" onPointerDown={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
- </div>
</div>
);
}
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 2fcbd25fa..aef56df67 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -19,11 +19,11 @@ export class LinkMenu extends React.Component<Props> {
@observable private _editingLink?: Doc;
- renderGroup = (group: Doc[]): Array<JSX.Element> => {
+ renderGroup = (group: Doc[], groupType: string): Array<JSX.Element> => {
let source = this.props.docView.Document;
return group.map(linkDoc => {
let destination = LinkManager.Instance.findOppositeAnchor(linkDoc, source);
- return <LinkBox key={destination[Id] + source[Id]} linkDoc={linkDoc} sourceDoc={source} destinationDoc={destination} showEditor={action(() => this._editingLink = linkDoc)} />;
+ return <LinkBox key={destination[Id] + source[Id]} groupType={groupType} linkDoc={linkDoc} sourceDoc={source} destinationDoc={destination} showEditor={action(() => this._editingLink = linkDoc)} />;
});
}
@@ -34,13 +34,13 @@ export class LinkMenu extends React.Component<Props> {
<div key={groupType} className="link-menu-group">
<p className="link-menu-group-name">{groupType}:</p>
<div className="link-menu-group-wrapper">
- {this.renderGroup(group)}
+ {this.renderGroup(group, groupType)}
</div>
</div>
);
});
- // source doc has no links
+ // if source doc has no links push message
if (linkItems.length === 0) linkItems.push(<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>);
return linkItems;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 12:21:18 +0000