diff options
| -rw-r--r-- | src/client/views/nodes/formattedText/DashFieldView.scss | 9 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/DashFieldView.tsx | 65 |
2 files changed, 25 insertions, 49 deletions
diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss index 78bbb520e..2e2e1d41c 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.scss +++ b/src/client/views/nodes/formattedText/DashFieldView.scss @@ -3,7 +3,7 @@ .dashFieldView-active, .dashFieldView { position: relative; - display: inline-flex; + display: contents; align-items: center; .dashFieldView-enumerables { @@ -33,8 +33,11 @@ margin-left: 2px; margin-right: 5px; padding-left: 2px; - display: inline-block; - background-color: rgba(155, 155, 155, 0.24); + font-size: smaller; + display: contents; + > div { + background-color: rgba(155, 155, 155, 0.24); + } span { user-select: all; min-width: 100%; diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index e899b49bc..b9ae7ebcf 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -1,8 +1,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import { Node } from 'prosemirror-model'; import { NodeSelection } from 'prosemirror-state'; +import { EditorView } from 'prosemirror-view'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../../../ClientUtils'; @@ -13,6 +15,7 @@ import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; import { Cast, DocCast } from '../../../../fields/Types'; import { emptyFunction } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; +import { DocumentOptions, FInfo } from '../../../documents/Documents'; import { CollectionViewType } from '../../../documents/DocumentTypes'; import { Transform } from '../../../util/Transform'; import { undoable, undoBatch } from '../../../util/UndoManager'; @@ -23,9 +26,6 @@ import { ObservableReactComponent } from '../../ObservableReactComponent'; import { OpenWhere } from '../OpenWhere'; import './DashFieldView.scss'; import { FormattedTextBox } from './FormattedTextBox'; -import { Node } from 'prosemirror-model'; -import { EditorView } from 'prosemirror-view'; -import { DocumentOptions, FInfo } from '../../../documents/Documents'; @observer export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -99,7 +99,6 @@ interface IDashFieldViewInternal { width: number; height: number; editable: boolean; - nodeSelected: () => boolean; node: Node; getPos: () => number; unclickable: () => boolean; @@ -112,7 +111,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi _fieldKey: string; _fieldRef = React.createRef<HTMLDivElement>(); @observable _dashDoc: Doc | undefined = undefined; - @observable _expanded = this._props.nodeSelected(); + @observable _expanded = false; constructor(props: IDashFieldViewInternal) { super(props); @@ -140,7 +139,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi componentWillUnmount() { this._reactionDisposer?.(); } - isRowActive = () => (this._props.nodeSelected() || this._expanded) && this._props.editable; + isRowActive = () => this._props.tbox._props.isContentActive() && this._props.editable; finishEdit = action(() => { if (this._expanded) { this._expanded = false; @@ -158,17 +157,19 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi @computed get fieldValueContent() { return !this._dashDoc ? null : ( <div + className="dashFieldView-fieldSpan" onPointerDown={action(() => { this._expanded = !this._props.editable ? false : !this._expanded; })} - style={{ fontSize: 'smaller', width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}> + ref={this._valueRef} + style={{ width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}> <SchemaTableCell Document={this._dashDoc} col={0} deselectCell={emptyFunction} selectCell={emptyFunction} maxWidth={this._props.hideKey || this._hideKey ? undefined : this._props.tbox._props.PanelWidth} - columnWidth={this._expanded || this._props.nodeSelected() ? () => undefined : returnZero} + columnWidth={returnZero} selectedCells={this.selectedCells} selectedCol={returnZero} fieldKey={this._fieldKey} @@ -184,7 +185,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi getFinfo={this.finfo} setColumnValues={returnFalse} allowCRs - oneLine={!this._expanded && !this._props.nodeSelected()} + oneLine={!this._expanded} finishEdit={this.finishEdit} transform={Transform.Identity} menuTarget={null} @@ -233,7 +234,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi } @computed get _hideValue() { - return this._props.hideValue && !this._props.nodeSelected(); + return this._props.hideValue; } // clicking on the label creates a pivot view collection of all documents @@ -255,12 +256,13 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi }; @computed get values() { - if (this._props.nodeSelected()) return []; const vals = FilterPanel.gatherFieldValues(DocListCast(Doc.ActiveDashboard?.data), this._fieldKey, []); return vals.strings.map(facet => ({ value: facet, label: facet })); } + _valueRef = React.createRef<HTMLDivElement>(); + render() { return ( <div @@ -297,8 +299,6 @@ export class DashFieldView { node: Node; tbox: FormattedTextBox; getpos: () => number | undefined; - @observable _nodeSelected = false; - NodeSelected = () => this._nodeSelected; unclickable = () => !this.tbox._props.rootSelected?.() && this.node.marks.some(m => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview); constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) { @@ -311,26 +311,13 @@ export class DashFieldView { this.dom.style.width = node.attrs.width; this.dom.style.height = node.attrs.height; this.dom.style.position = 'relative'; - this.dom.style.display = 'inline-block'; + this.dom.style.display = 'inline-flex'; this.dom.onkeypress = function (e: KeyboardEvent) { e.stopPropagation(); }; - this.dom.onkeydown = (e: KeyboardEvent) => { + this.dom.onkeydown = action((e: KeyboardEvent) => { e.stopPropagation(); - if (e.key === 'Tab') { - e.preventDefault(); - const editor = tbox.EditorView; - if (editor) { - const { state } = editor; - for (let i = getPosition() + 1; i < state.doc.content.size; i++) { - if (state.doc.nodeAt(i)?.type.name === state.schema.nodes.dashField.name) { - editor.dispatch(state.tr.setSelection(new NodeSelection(state.doc.resolve(i)))); - return; - } - } - } - } - }; + }); this.dom.onkeyup = function (e: KeyboardEvent) { e.stopPropagation(); }; @@ -351,7 +338,6 @@ export class DashFieldView { hideKey={node.attrs.hideKey} hideValue={node.attrs.hideValue} editable={node.attrs.editable} - nodeSelected={this.NodeSelected} tbox={tbox} /> ); @@ -365,19 +351,6 @@ export class DashFieldView { } }); } - deselectNode() { - runInAction(() => { - this._nodeSelected = false; - }); - this.dom.classList.remove('ProseMirror-selectednode'); - } - selectNode() { - setTimeout( - action(() => { - this._nodeSelected = true; - }), - 100 - ); - this.dom.classList.add('ProseMirror-selectednode'); - } + deselectNode() {} + selectNode() {} } |