From bdccc7c147dbb985bff5286e318718e48fd7cc62 Mon Sep 17 00:00:00 2001 From: Geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 15 Feb 2022 16:06:18 -0500 Subject: updates --- .../views/collections/CollectionStackingView.scss | 32 ++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.scss') diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 2f002736d..a77eb6b8a 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -131,9 +131,37 @@ margin-left: -5; } + // Documents in stacking view .collectionStackingView-columnDoc { - display: inline-block; - margin: auto; + display: flex; + // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change + position: relative; + + &:hover { + .hoverButtons{ + opacity: 1; + } + } + + .hoverButtons { + display: flex; + opacity: 0; + position: absolute; + height: 100%; + left: -35px; + justify-content: center; + align-items: center; + padding: 0px 10px; + + .buttonWrapper { + padding: 3px; + border-radius: 3px; + + &:hover { + background: rgba(0, 0, 0, 0.26); + } + } + } } .collectionStackingView-masonryDoc { -- cgit v1.2.3-70-g09d2 From abab63f89344e5bbbf0731e81e3ab7ddb0942664 Mon Sep 17 00:00:00 2001 From: ljungster Date: Tue, 15 Feb 2022 16:35:47 -0500 Subject: added commits --- .prettierrc | 4 ++++ src/client/views/collections/CollectionStackingView.scss | 1 + .../collections/CollectionStackingViewFieldColumn.tsx | 14 ++++++++++++++ src/client/views/nodes/trails/PresElementBox.tsx | 2 ++ 4 files changed, 21 insertions(+) create mode 100644 .prettierrc (limited to 'src/client/views/collections/CollectionStackingView.scss') diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..222861c34 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "useTabs": false +} diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 2f002736d..3c3d040d2 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -386,6 +386,7 @@ .collectionStackingView-addDocumentButton { font-size: 75%; letter-spacing: 2px; + cursor: pointer; .editableView-input { outline-color: black; diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 58289a161..32424bdc8 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -144,6 +144,7 @@ export class CollectionStackingViewFieldColumn extends React.Component) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); + //TODO: I think this is where I'm supposed to edit stuff startDrag = (e: PointerEvent, down: number[], delta: number[]) => { const alias = Doc.MakeAlias(this.props.Document); alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1); @@ -308,6 +309,11 @@ export class CollectionStackingViewFieldColumn extends React.Component {!this.props.chromeHidden && type !== DocumentType.PRES ? + // TODO: this is the "new" button: see what you can work with here + // change cursor to pointer for this, and update dragging cursor + //TODO: there is a bug that occurs when adding a freeform document and trying to move it around + //TODO: would be great if there was additional space beyond the frame, so that you can actually see your + // bottom note
+
: null} } diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 238d025dc..b30e8cc13 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -169,6 +169,7 @@ export class PresElementBox extends ViewBoxBaseComponent { const miniView: boolean = this.toolbarWidth <= 100; const activeItem = this.rootDoc; @@ -291,6 +292,7 @@ export class PresElementBox extends ViewBoxBaseComponent 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/client/views/collections/CollectionStackingView.scss') 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 ( + return ( +
+ 35} + PanelHeight={() => 35} + renderDepth={this.props.renderDepth} + focus={emptyFunction} + styleProvider={this.props.styleProvider} + docViewPath={returnEmptyDoclist} + whenChildContentsActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={this.props.docFilters} + docRangeFilters={this.props.docRangeFilters} + searchFilterDocs={this.props.searchFilterDocs} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
); } } + @computed get nativeWidth() { + return this.props.NativeWidth?.() ?? Doc.NativeWidth(this.layoutDoc); + } + @computed get nativeHeight() { + return this.props.NativeHeight?.() ?? Doc.NativeHeight(this.layoutDoc); + } - @computed get nativeWidth() { return this.props.NativeWidth?.() ?? Doc.NativeWidth(this.layoutDoc); } - @computed get nativeHeight() { return this.props.NativeHeight?.() ?? Doc.NativeHeight(this.layoutDoc); } - - @computed get scaling() { return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight; } + @computed get scaling() { + return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight; + } - @computed get backgroundEvents() { return SnappingManager.GetIsDragging(); } + @computed get backgroundEvents() { + return SnappingManager.GetIsDragging(); + } observer: any; render() { TraceMobx(); const buttonMenu = this.rootDoc.buttonMenu; - const noviceExplainer = this.rootDoc.explainer; + const noviceExplainer = StrCast(this.rootDoc.explainer); return ( <> - {buttonMenu || noviceExplainer ?
- {buttonMenu ? this.buttonMenu : null} - {Doc.UserDoc().noviceMode && noviceExplainer ? -
- {noviceExplainer} -
- : null - } -
: null} -
+ {buttonMenu ? this.buttonMenu : null} + {Doc.UserDoc().noviceMode && noviceExplainer ?
{noviceExplainer}
: null} +
+ ) : null} +
this._scroll = e.currentTarget.scrollTop)} + onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))} onPointerOver={this.onPointerOver} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu} - onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} - > + onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}> {this.renderedSections}
- ); } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 9a498858a..7385f933b 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables'; .collectionMasonryView { display: inline; @@ -33,7 +33,7 @@ color: $medium-blue; padding: 10px; border-radius: 5px; - border: solid .5px $medium-blue; + border: solid 0.5px $medium-blue; } } @@ -46,9 +46,9 @@ overflow-y: auto; overflow-x: hidden; flex-wrap: wrap; - transition: top .5s; + transition: top 0.5s; - >div { + > div { position: relative; display: block; } @@ -133,34 +133,8 @@ // Documents in stacking view .collectionStackingView-columnDoc { display: flex; - // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change + // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change position: relative; - - &:hover { - .hoverButtons{ - opacity: 1; - } - } - - .hoverButtons { - display: flex; - opacity: 0; - position: absolute; - height: 100%; - left: -35px; - justify-content: center; - align-items: center; - padding: 0px 10px; - - .buttonWrapper { - padding: 3px; - border-radius: 3px; - - &:hover { - background: rgba(0, 0, 0, 0.26); - } - } - } } .collectionStackingView-masonryDoc { @@ -201,7 +175,7 @@ span::before, span::after { - content: ""; + content: ''; width: 50%; border-top: dashed gray 1px; position: relative; @@ -242,7 +216,7 @@ .editableView-input:hover, .editableView-container-editing:hover, .editableView-container-editing-oneLine:hover { - cursor: text + cursor: text; } .collectionStackingView-sectionHeader-subCont { @@ -288,7 +262,7 @@ height: 100%; display: none; - [class*="css"] { + [class*='css'] { max-width: 102px; } @@ -330,7 +304,7 @@ height: 100%; display: none; - [class*="css"] { + [class*='css'] { max-width: 102px; } @@ -339,7 +313,6 @@ } .collectionStackingView-optionPicker { - .optionOptions { display: inline; } @@ -399,7 +372,7 @@ .editableView-input:hover, .editableView-container-editing:hover, .editableView-container-editing-oneLine:hover { - cursor: text + cursor: text; } .editableView-input { @@ -452,7 +425,7 @@ top: 4px; border-radius: 50% 50%; background-color: #fff; - content: " "; + content: ' '; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); -webkit-transform: scale(1); @@ -482,7 +455,6 @@ } @media only screen and (max-device-width: 480px) { - .collectionStackingView .collectionStackingView-columnDragger, .collectionMasonryView .collectionStackingView-columnDragger { width: 0.1; @@ -490,4 +462,4 @@ opacity: 0; font-size: 0; } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index d3a8af03a..1927db51e 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -90,7 +90,7 @@ export class CollectionStackingView extends CollectionSubView { - // console.log("hovering over something") - if (DragManager.docsBeingDragged.length) { - // essentially copying code from onInternalDrop for this: - const doc = DragManager.docsBeingDragged[0]; - // console.log(doc[LayoutSym]()) - - console.log(doc[DataSym]); - console.log(Doc.IndexOf(doc, this.childDocs)); - } - }; - - //used in onPointerOver to swap two nodes in the rendered filtered children list - swapNodes = (i: number, j: number) => {}; - - //plj added this - @action - onPointerDown = (e: React.PointerEvent) => {}; - - // TODO: plj - look at this. Start with making changes to db, and then transition to client side @undoBatch @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { // Fairly confident that this is where the swapping of nodes in the various arrays happens - console.log('drop'); const where = [de.x, de.y]; // start at -1 until we're sure we want to add it to the column let dropInd = -1; @@ -505,12 +476,10 @@ export class CollectionStackingView extends CollectionSubView => { - console.log('external drop'); const where = [e.clientX, e.clientY]; let targInd = -1; this._docXfs.map((cd, i) => { @@ -633,8 +602,8 @@ export class CollectionStackingView extends CollectionSubView { if (value && this.columnHeaders) { const schemaHdrField = new SchemaHeaderField(value); -- cgit v1.2.3-70-g09d2