From 012f29c76fb21db2b3e7c071993ee05b1c4c32c8 Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 24 Mar 2022 11:29:52 -0400 Subject: messed around with Scss --- .../CollectionNoteTakingFieldViewColumn.scss | 48 +++++++++++++ .../views/collections/CollectionNoteTakingView.tsx | 81 +++++++++++++--------- .../CollectionNoteTakingViewFieldColumn.tsx | 57 +++++++-------- .../views/collections/CollectionStackingView.scss | 1 + 4 files changed, 122 insertions(+), 65 deletions(-) create mode 100644 src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss (limited to 'src') 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 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
@@ -310,20 +309,29 @@ export class CollectionNoteTakingView extends CollectionSubView 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 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 this.refList.splice(this.refList.indexOf(ref), 1)} @@ -526,6 +534,13 @@ export class CollectionNoteTakingView extends CollectionSubView "", + 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 "", - 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 -
} + } */} {/* {this.chromeHidden || !this.props.isSelected() ? (null) : Transform; observeHeight: (myref: any) => void; unobserveHeight: (myref: any) => void; + editableViewProps: any; } @observer @@ -251,47 +253,28 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component headings.indexOf(i) === idx); - const evContents = heading ? heading : this.props?.type === "number" ? "0" : `0`; + const evContents = heading ? heading : "25"; const headingView = this.props.headingObject ?
-
+ {/*
*/} {/* 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. */}
+ style={{ background: evContents !== `No Value` ? this._color : "inherit" }}> evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} toggle={this.toggleVisibility} /> - {evContents === `0` ? (null) : -
- {/* */} - {/* {this._paletteOn ? this.renderColorPicker() : (null)} */} -
- } - {/* {} */} - {/* {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : -
- - - -
- } */} + {/* {evContents === `0` ? (null) : <>} */}
: (null); const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; @@ -314,23 +297,30 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component {this.props.renderChildren(this.props.docList)} + {!this.props.chromeHidden && type !== DocumentType.PRES ? -
+
+
} contents={"+ New Node"} toggle={this.toggleVisibility} menuCallback={this.menuCallback} /> -
: null} - {
+
+ +
+ } + +
+ : null} + } ; @@ -340,12 +330,15 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component headings.indexOf(i) === idx); return (