From be1ac92cdc609a7931ec8427f507648da117b4ea Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 10 Apr 2024 13:53:38 -0400
Subject: fixed buttons to have an embedContainer. cleaning up notetaking view
 - fixing colors for input buttons, fixing when buttons appear (by extending
 the column targe to always be 100%)

---
 .../collections/CollectionNoteTakingViewColumn.tsx | 41 +++++++++++++---------
 1 file changed, 24 insertions(+), 17 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

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>
         );
     }
-- 
cgit v1.2.3-70-g09d2