diff options
Diffstat (limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewColumn.tsx | 41 |
1 files changed, 24 insertions, 17 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index db178d500..788490b82 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,8 +1,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyString } from '../../../Utils'; +import { lightOrDark, returnEmptyString } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; @@ -26,6 +26,7 @@ import './CollectionNoteTakingView.scss'; interface CSVFieldColumnProps { Document: Doc; TemplateDataDocument: Opt<Doc>; + backgroundColor?: (() => string) | undefined; docList: Doc[]; heading: string; pivotField: string; @@ -38,6 +39,7 @@ interface CSVFieldColumnProps { gridGap: number; headings: () => object[]; select: (ctrlPressed: boolean) => void; + isContentActive: () => boolean | undefined; renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; @@ -57,7 +59,12 @@ interface CSVFieldColumnProps { */ @observer export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSVFieldColumnProps> { - @observable private _background = 'inherit'; + @observable private _hover = false; + + constructor(props: CSVFieldColumnProps) { + super(props); + makeObservable(this); + } // columnWidth returns the width of a column in absolute pixels @computed get columnWidth() { @@ -122,8 +129,8 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV return false; }; - @action pointerEntered = () => SnappingManager.IsDragging && (this._background = '#b4b4b4'); - @action pointerLeave = () => (this._background = 'inherit'); + @action pointerEntered = () => (this._hover = true); + @action pointerLeave = () => (this._hover = false); @undoBatch addTextNote = (char: string) => this.addNewTextDoc('-typed text-', false, true); @@ -273,11 +280,11 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV </div> {!this._props.chromeHidden ? ( - <div className="collectionNoteTakingView-DocumentButtons" style={{ marginBottom: 10 }}> - <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton"> - <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} /> + <div className="collectionNoteTakingView-DocumentButtons" style={{ display: this._props.isContentActive() ? 'flex' : 'none', marginBottom: 10 }}> + <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}> + <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents={'+ Node'} menuCallback={this.menuCallback} /> </div> - <div key={`${this._props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton"> + <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}> <EditableView {...this._props.editableViewProps()} /> </div> </div> @@ -292,17 +299,17 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV TraceMobx(); return ( <div - className="collectionNoteTakingViewFieldColumn" - key={this._heading} + className="collectionNoteTakingViewFieldColumnHover" + onPointerEnter={this.pointerEntered} + onPointerLeave={this.pointerLeave} style={{ width: this.columnWidth, - background: this._background, + background: this._hover && SnappingManager.IsDragging ? '#b4b4b4' : 'inherit', marginLeft: this._props.headings().findIndex((h: any) => h[0] === this._props.headingObject) === 0 ? NumCast(this._props.Document.xMargin) : 0, - }} - ref={this.createColumnDropRef} - onPointerEnter={this.pointerEntered} - onPointerLeave={this.pointerLeave}> - {this.innards} + }}> + <div className="collectionNoteTakingViewFieldColumn" key={this._heading} ref={this.createColumnDropRef}> + {this.innards} + </div> </div> ); } |