messed around with Scss

1 files changed, 25 insertions, 32 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index 0131003f9..ae0729111 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -20,6 +20,7 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { EditableView } from "../EditableView";
 import "./CollectionStackingView.scss";
+import "./CollectionNoteTakingFieldViewColumn.scss";
 import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
 import { Id } from "../../../fields/FieldSymbols";
 const higflyout = require("@hig/flyout");
@@ -49,6 +50,7 @@ interface CSVFieldColumnProps {
     screenToLocalTransform: () => Transform;
     observeHeight: (myref: any) => void;
     unobserveHeight: (myref: any) => void;
+    editableViewProps: any;
 }
 
 @observer
@@ -251,47 +253,28 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         const heading = this._heading;
         const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin;
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
-        const evContents = heading ? heading : this.props?.type === "number" ? "0" : `0`;
+        const evContents = heading ? heading : "25";
         const headingView = this.props.headingObject ?
             <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
                 style={{
                     marginTop: this.props.yMargin,
                     width: (this.props.columnWidth) /
-                        ((uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1)) || 1)
+                        ((uniqueHeadings.length) || 1)
                 }}>
-                <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div>
+                {/* <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div> */}
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
                     Further, it does not have a color and cannot be deleted. */}
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
-                    title={evContents === `0` ?
+                    title={evContents === `No Value` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
-                    style={{ background: evContents !== `0` ? this._color : "inherit" }}>
+                    style={{ background: evContents !== `No Value` ? this._color : "inherit" }}>
                     <EditableView
                         GetValue={() => evContents}
                         SetValue={this.headingChanged}
                         contents={evContents}
                         oneLine={true}
                         toggle={this.toggleVisibility} />
-                    {evContents === `0` ? (null) :
-                        <div className="collectionStackingView-sectionColor">
-                            {/* <button className="collectionStackingView-sectionColorButton" onClick={action(e => this._paletteOn = !this._paletteOn)}>
-                                <FontAwesomeIcon icon="palette" size="lg" />
-                            </button> */}
-                            {/* {this._paletteOn ? this.renderColorPicker() : (null)} */}
-                        </div>
-                    }
-                    {/* {<button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
-                        <FontAwesomeIcon icon="trash" size="lg" />
-                    </button>} */}
-                    {/* {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
-                        <div className="collectionStackingView-sectionOptions">
-                            <Flyout anchorPoint={anchorPoints.TOP_RIGHT} content={this.renderMenu()}>
-                                <button className="collectionStackingView-sectionOptionButton">
-                                    <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
-                                </button>
-                            </Flyout>
-                        </div>
-                    } */}
+                    {/* {evContents === `0` ? (null) : <></>} */}
                 </div>
             </div> : (null);
         const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
@@ -314,23 +297,30 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
                             }}>
                             {this.props.renderChildren(this.props.docList)}
                         </div>
+                        
                         {!this.props.chromeHidden && type !== DocumentType.PRES ?
-                            <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
-                                style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10, marginLeft: 25 }}>
+                            <div className="collectionNoteTakingView-DocumentButtons" 
+                            style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
+                              <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
                                 <EditableView
                                     GetValue={returnEmptyString}
                                     SetValue={this.addNewTextDoc}
                                     textCallback={this.textCallback}
                                     placeholder={"Type ':' for commands"}
-                                    // contents={<FontAwesomeIcon icon={"plus"}/>}
                                     contents={"+ New Node"}
                                     toggle={this.toggleVisibility}
                                     menuCallback={this.menuCallback} 
                                 />
-                            </div> : null}
-                            {<button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
+                              </div>
+                              <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
+                                <EditableView {...this.props.editableViewProps} />
+                              </div>
+                              <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
                                 <FontAwesomeIcon icon="trash" size="lg" />
-                            </button>}
+                              </button>
+                            </div>
+                             : null}
+                            
                     </div>
             }
         </>;
@@ -340,12 +330,15 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
     render() {
         TraceMobx();
         const headings = this.props.headings();
+        // We will have to see what this is 
         const heading = this._heading;
+        console.log(`Column heading: ${heading}`)
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
             <div className={"collectionStackingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading}
                 style={{
-                    width: `${100 / (uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1) || 1)}%`,
+                    // width: `${100 / (uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1) || 1)}%`,
+                    width: `${100 / (uniqueHeadings.length || 1)}%`,
                     height: undefined, // DraggingManager.GetIsDragging() ? "100%" : undefined,
                     background: this._background
                 }}