Merge branch 'master' into nathan-starter

1 files changed, 26 insertions, 19 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index db178d500..448b11b05 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -1,10 +1,9 @@
 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';
 import { listSpec } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
@@ -26,6 +25,7 @@ import './CollectionNoteTakingView.scss';
 interface CSVFieldColumnProps {
     Document: Doc;
     TemplateDataDocument: Opt<Doc>;
+    backgroundColor?: (() => string) | undefined;
     docList: Doc[];
     heading: string;
     pivotField: string;
@@ -38,6 +38,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,10 +58,16 @@ 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() {
+        if (this._props.Document._notetaking_columns_autoSize) return this._props.availableWidth / (this._props.colHeaderData?.length || 1);
         if (!this._props.colHeaderData || !this._props.headingObject || this._props.colHeaderData.length === 1) return `${(this._props.availableWidth / this._props.PanelWidth()) * 100}%`;
         const i = this._props.colHeaderData.findIndex(hd => hd.heading === this._props.headingObject?.heading && hd.color === this._props.headingObject.color);
         return ((this._props.colHeaderData[i].width * this._props.availableWidth) / this._props.PanelWidth()) * 100 + '%';
@@ -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);
 
@@ -147,7 +154,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV
     deleteColumn = () => {
         const colHdrData = Array.from(Cast(this._props.Document[this._props.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null));
         if (this._props.headingObject) {
-            this._props.docList.forEach(d => (d[this._props.pivotField] = undefined));
+            //          this._props.docList.forEach(d => (d[DocData][this._props.pivotField] = undefined));
             colHdrData.splice(colHdrData.indexOf(this._props.headingObject), 1);
             this._props.resizeColumns(colHdrData);
         }
@@ -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>
         );
     }