aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/DocumentButtonBar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/DocumentButtonBar.tsx')
-rw-r--r--src/client/views/DocumentButtonBar.tsx114
1 files changed, 76 insertions, 38 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 16586d922..63b485a43 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core';
import { faCalendarDays } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -33,6 +36,7 @@ import { DashFieldView } from './nodes/formattedText/DashFieldView';
@observer
export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (DocumentView | undefined)[]; stack?: any }> {
private _dragRef = React.createRef<HTMLDivElement>();
+ // eslint-disable-next-line no-use-before-define
@observable public static Instance: DocumentButtonBar;
constructor(props: any) {
@@ -60,8 +64,12 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
key={icon.toString()}
size="sm"
icon={icon}
- onPointerEnter={action(e => (this.subPin = allDocs ? 'All ' : ''))}
- onPointerLeave={action(e => (this.subPin = ''))}
+ onPointerEnter={action(() => {
+ this.subPin = allDocs ? 'All ' : '';
+ })}
+ onPointerLeave={action(() => {
+ this.subPin = '';
+ })}
onClick={e => {
this._props.views().forEach(dv => click(dv!.Document));
e.stopPropagation();
@@ -77,12 +85,14 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
<div
className="documentButtonBar-icon documentButtonBar-follow"
style={{ backgroundColor: followLink ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: followLink ? Colors.BLACK : Colors.WHITE }}
- onClick={undoBatch(e => this._props.views().map(view => view?.toggleFollowLink(undefined, false)))}>
+ onClick={undoBatch(() => this._props.views().map(view => view?.toggleFollowLink(undefined, false)))}>
<div className="documentButtonBar-followTypes">
{followBtn(
true,
- (doc: Doc) => (doc.followAllLinks = !doc.followAllLinks),
- (doc?: Doc) => (doc?.followAllLinks ? true : false),
+ (doc: Doc) => {
+ doc.followAllLinks = !doc.followAllLinks;
+ },
+ (doc?: Doc) => !!doc?.followAllLinks,
'window-maximize'
)}
</div>
@@ -100,22 +110,22 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
<div className="documentButtonBar-linkTypes">
<Tooltip title={<div>search for target</div>}>
<div className="documentButtonBar-button">
- <button style={{ backgroundColor: 'transparent', width: 35, height: 35, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }} onPointerDown={this.toggleLinkSearch}>
- <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(1.5)' }} icon={'search'} size="lg" />
- <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(0.5)', transformOrigin: 'center', top: 9, left: 2 }} icon={'link'} size="lg" />
+ <button type="button" style={{ backgroundColor: 'transparent', width: 35, height: 35, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }} onPointerDown={this.toggleLinkSearch}>
+ <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(1.5)' }} icon="search" size="lg" />
+ <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(0.5)', transformOrigin: 'center', top: 9, left: 2 }} icon="link" size="lg" />
</button>
</div>
</Tooltip>
<Tooltip title={<div>open linked trail</div>}>
<div className="documentButtonBar-button">
- <button style={{ backgroundColor: 'transparent', width: 35, height: 35, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }} onPointerDown={this.toggleTrail}>
+ <button type="button" style={{ backgroundColor: 'transparent', width: 35, height: 35, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }} onPointerDown={this.toggleTrail}>
<FontAwesomeIcon icon="taxi" size="lg" />
</button>
</div>
</Tooltip>
</div>
<div style={{ width: 25, height: 25 }}>
- <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={true} />
+ <DocumentLinksButton View={this.view0} AlwaysOn InMenu StartLink />
</div>
</div>
);
@@ -134,8 +144,12 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
key={icon.toString()}
size="sm"
icon={icon}
- onPointerEnter={action(e => (this.subEndLink = (pinLayout ? 'Layout' : '') + (pinLayout && pinContent ? ' &' : '') + (pinContent ? ' Content' : '')))}
- onPointerLeave={action(e => (this.subEndLink = ''))}
+ onPointerEnter={action(() => {
+ this.subEndLink = (pinLayout ? 'Layout' : '') + (pinLayout && pinContent ? ' &' : '') + (pinContent ? ' Content' : '');
+ })}
+ onPointerLeave={action(() => {
+ this.subEndLink = '';
+ })}
onClick={e => {
this.view0 &&
DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.Document, true, this.view0, {
@@ -157,7 +171,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
{linkBtn(false, true, 'address-card')}
{linkBtn(true, true, 'id-card')}
</div>
- <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
+ <DocumentLinksButton View={this.view0} AlwaysOn InMenu StartLink={false} />
</div>
);
}
@@ -177,15 +191,16 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
key={icon.toString()}
size="sm"
icon={icon}
- onPointerEnter={action(
- e =>
- (this.subPin =
- (pinLayoutView ? 'Layout' : '') +
- (pinLayoutView && pinContentView ? ' &' : '') +
- (pinContentView ? ' Content View' : '') +
- (pinLayoutView && pinContentView ? '(shift+alt)' : pinLayoutView ? '(shift)' : pinContentView ? '(alt)' : ''))
- )}
- onPointerLeave={action(e => (this.subPin = ''))}
+ onPointerEnter={action(() => {
+ this.subPin =
+ (pinLayoutView ? 'Layout' : '') +
+ (pinLayoutView && pinContentView ? ' &' : '') +
+ (pinContentView ? ' Content View' : '') +
+ (pinLayoutView && pinContentView ? '(shift+alt)' : pinLayoutView ? '(shift)' : pinContentView ? '(alt)' : '');
+ })}
+ onPointerLeave={action(() => {
+ this.subPin = '';
+ })}
onClick={e => {
const docs = this._props
.views()
@@ -232,8 +247,8 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
get shareButton() {
const targetDoc = this.view0?.Document;
return !targetDoc ? null : (
- <Tooltip title={<div className="dash-tooltip">{'Open Sharing Manager'}</div>}>
- <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
+ <Tooltip title={<div className="dash-tooltip">Open Sharing Manager</div>}>
+ <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={() => SharingManager.Instance.open(this.view0, targetDoc)}>
<FontAwesomeIcon className="documentdecorations-icon" icon="users" />
</div>
</Tooltip>
@@ -244,7 +259,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
get menuButton() {
const targetDoc = this.view0?.Document;
return !targetDoc ? null : (
- <Tooltip title={<div className="dash-tooltip">{`Open Context Menu`}</div>}>
+ <Tooltip title={<div className="dash-tooltip">Open Context Menu</div>}>
<div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => this.openContextMenu(e))}>
<FontAwesomeIcon className="documentdecorations-icon" icon="bars" />
</div>
@@ -260,8 +275,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
<div
className="documentButtonBar-icon"
style={{ color: 'white' }}
- onClick={e => {
- console.log('hi: ', CalendarManager.Instance);
+ onClick={() => {
CalendarManager.Instance.open(this.view0, targetDoc);
}}>
<FontAwesomeIcon className="documentdecorations-icon" icon={faCalendarDays as IconLookup} />
@@ -282,7 +296,18 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
style={{ backgroundColor: this._isRecording ? Colors.ERROR_RED : Colors.DARK_GRAY, color: Colors.WHITE }}
onPointerDown={action((e: React.PointerEvent) => {
this._isRecording = true;
- this._props.views().map(view => view && DocumentViewInternal.recordAudioAnnotation(view.dataDoc, view.LayoutFieldKey, stopFunc => (this._stopFunc = stopFunc), emptyFunction));
+ this._props.views().map(
+ view =>
+ view &&
+ DocumentViewInternal.recordAudioAnnotation(
+ view.dataDoc,
+ view.LayoutFieldKey,
+ stopFunc => {
+ this._stopFunc = stopFunc;
+ },
+ emptyFunction
+ )
+ );
const b = UndoManager.StartBatch('Recording');
setupMoveUpEvents(
this,
@@ -310,10 +335,10 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
if (this._dragRef.current) {
const dragDocView = this.view0!;
const dragData = new DragManager.DocumentDragData([dragDocView.Document]);
- const [left, top] = dragDocView.screenToContentsTransform().inverse().transformPoint(0, 0);
+ const origin = dragDocView.screenToContentsTransform().inverse().transformPoint(0, 0);
dragData.defaultDropAction = dropActionType.embed;
dragData.canEmbed = true;
- DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { hideSource: false });
+ DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, origin[0], origin[1], { hideSource: false });
return true;
}
return false;
@@ -336,8 +361,19 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
@computed
get templateButton() {
return !this.view0 ? null : (
- <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
- <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
+ <Tooltip
+ title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>}
+ open={this._tooltipOpen}
+ onClose={action(() => {
+ this._tooltipOpen = false;
+ })}
+ placement="bottom">
+ <div
+ className="documentButtonBar-linkFlyout"
+ ref={this._dragRef}
+ onPointerEnter={action(() => {
+ !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true);
+ })}>
<Popup icon={<FaEdit />} popup={this.templateMenu} popupContainsPt={returnTrue} />
</div>
</Tooltip>
@@ -365,17 +401,17 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
@observable _captureEndLinkLayout = false;
@action
- captureEndLinkLayout = (e: React.PointerEvent) => {
+ captureEndLinkLayout = () => {
this._captureEndLinkLayout = !this._captureEndLinkLayout;
};
@observable _captureEndLinkContent = false;
@action
- captureEndLinkContent = (e: React.PointerEvent) => {
+ captureEndLinkContent = () => {
this._captureEndLinkContent = !this._captureEndLinkContent;
};
@action
- captureEndLinkState = (e: React.PointerEvent) => {
+ captureEndLinkState = () => {
this._captureEndLinkContent = this._captureEndLinkLayout = !this._captureEndLinkLayout;
};
@@ -402,13 +438,15 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
return (
<div className="documentButtonBar">
<div className="documentButtonBar-button">
- <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} ShowCount={true} />
+ <DocumentLinksButton View={this.view0} AlwaysOn InMenu ShowCount />
</div>
{this._showLinkPopup ? (
<div style={{ position: 'absolute', zIndex: 1000 }}>
<LinkPopup
key="popup"
- linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this._props.views().lastElement()?.Document.onClick))}
+ linkCreated={link => {
+ link.link_displayLine = !IsFollowLinkScript(this._props.views().lastElement()?.Document.onClick);
+ }}
linkCreateAnchor={() => this._props.views().lastElement()?.ComponentView?.getAnchor?.(true)}
linkFrom={() => this._props.views().lastElement()?.Document}
/>
@@ -423,7 +461,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
<div className="documentButtonBar-button">{this.pinButton}</div>
<div className="documentButtonBar-button">{this.recordButton}</div>
<div className="documentButtonBar-button">{this.calendarButton}</div>
- {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
+ {!Doc.UserDoc().documentLinksButton_fullMenu ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
<div className="documentButtonBar-button">{this.menuButton}</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 09:13:33 +0000