diff options
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 |