messed around with Scss

4 files changed, 122 insertions, 65 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss b/src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss
new file mode 100644
index 000000000..177b5f4d5
--- /dev/null
+++ b/src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss
@@ -0,0 +1,48 @@
+@import "../global/globalCssVariables";
+
+.collectionNoteTakingView-DocumentButtons {
+  display: flex;
+  justify-content: space-between;
+  margin: auto;
+}
+
+.collectionNoteTakingView-addDocumentButton {
+  display: flex;
+  overflow: hidden;
+  margin: auto;
+  width: 100%;
+  overflow: ellipses;
+
+  .editableView-container-editing-oneLine,
+  .editableView-container-editing {
+      color: grey;
+      padding: 10px;
+      width: 100%;
+  }
+
+  .editableView-input:hover,
+  .editableView-container-editing:hover,
+  .editableView-container-editing-oneLine:hover {
+      cursor: text
+  }
+
+  .editableView-input {
+      outline-color: black;
+      letter-spacing: 2px;
+      color: grey;
+      border: 0px;
+      padding: 12px 10px 11px 10px;
+  }
+
+  font-size: 75%;
+  letter-spacing: 2px;
+  cursor: pointer;
+
+  .editableView-input {
+      outline-color: black;
+      letter-spacing: 2px;
+      color: grey;
+      border: 0px;
+      padding: 12px 10px 11px 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 6128c1c66..14d274cb2 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -23,11 +23,10 @@ import { LightboxView } from "../LightboxView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView";
 import { StyleProp } from "../StyleProvider";
-import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
+import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
-import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
 const _global = (window /* browser */ || global /* node */) as any;
 
 
@@ -109,7 +108,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             const width = () => this.getDocWidth(d);
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
-            // just getting the style
+            // added 50 to width. May need to change that elsewhere later
             const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             // So we're choosing whether we're going to render a column or a masonry doc
             return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} style={style} >
@@ -310,20 +309,29 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off 
         return new Transform(- translateX + (dref?.centeringX || 0), - translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
     }
+
+    //TODO: update this so that you get larger docs
     getDocWidth(d?: Doc) {
-        if (!d) return 0;
-        const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
-        // TODO: pj - replace with a better way to calculate the margin
-        let margin = 25;
-        d.margin = 25;
-        if (this.columnWidth < 150){
-          margin = 0;
-        }
-        const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2);
-        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
-            return Math.min(d[WidthSym](), maxWidth);
-        }
-        return maxWidth;
+      //TODO: defnitely a more efficient way to do this, but who cares
+      const headings = () => Array.from(this.Sections);
+      const h = headings();
+      const uniqueHeadings = h.map((i, idx) => h.indexOf(i) === idx);
+      const width = this.columnWidth / ((uniqueHeadings.length) || 1);
+      return width - 25;
+
+        // if (!d) return 0;
+        // const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
+        // // TODO: pj - replace with a better way to calculate the margin
+        // let margin = 25;
+        // d.margin = 25;
+        // if (this.columnWidth < 150){
+        //   margin = 0;
+        // }
+        // const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2);
+        // if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
+        //     return Math.min(d[WidthSym](), maxWidth);
+        // }
+        // return maxWidth + 75;
     }
     getDocHeight(d?: Doc) {
         if (!d || d.hidden) return 0;
@@ -478,16 +486,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // sections are important 
     headings = () => Array.from(this.Sections);
     refList: any[] = [];
-    // what a section looks like if we're in stacking view
     sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
-        const key = this.pivotField;
-        let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined;
-        if (this.pivotField) {
-            const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]);
-            if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) {
-                type = types[0];
-            }
-        }
+        // const key = this.pivotField;
+        const type = "number";
+        // let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined;
+        // if (this.pivotField) {
+        //     const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]);
+        //     if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) {
+        //         type = types[0];
+        //     }
+        // }
         //TODO: I think that we only have one of these atm
         return <CollectionNoteTakingViewFieldColumn
             unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)}
@@ -526,6 +534,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             type={type}
             createDropTarget={this.createDashEventsTarget}
             screenToLocalTransform={this.props.ScreenToLocalTransform}
+            // added this in to add column
+            editableViewProps={{
+              GetValue: () => "",
+              SetValue: this.addGroup,
+              // I don't recall ever seeing this add a group button
+              contents: "+ New Column"
+          }}
         />;
     }
 
@@ -666,12 +681,12 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     render() {
         TraceMobx();
         //TODO: need to make this inside the field view column
-        const editableViewProps = {
-            GetValue: () => "",
-            SetValue: this.addGroup,
-            // I don't recall ever seeing this add a group button
-            contents: "+ ADD A COLUMN"
-        };
+        // const editableViewProps = {
+        //     GetValue: () => "",
+        //     SetValue: this.addGroup,
+        //     // I don't recall ever seeing this add a group button
+        //     contents: "+ ADD A COLUMN"
+        // };
         const buttonMenu = this.rootDoc.buttonMenu;
         const noviceExplainer = this.rootDoc.explainer;
         return (
@@ -704,11 +719,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                         {this.renderedSections}
                         {/* I think that showAddGroup must be passed in as false, which is why we can't find what Mehek showed 
                         Or it's because we aren't passing a pivot field */}
-                        {!this.showAddAGroup ? (null) :
+                        {/* {!this.showAddAGroup ? (null) :
                             <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
                                 style={{ width: !this.isStackingView ? "100%" : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
                                 <EditableView {...editableViewProps} />
-                            </div>}
+                            </div>} */}
                         {/* {this.chromeHidden || !this.props.isSelected() ? (null) :
                             <Switch
                                 onChange={this.onToggle}
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
                 }}
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 8aa813f1e..78df932f9 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -232,6 +232,7 @@
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin: auto;
+        margin-bottom: 10px;
         background: $medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong