From 85553878a01877efb9e9d3b748064db66a6d8e30 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 1 Jun 2020 10:06:31 +0530 Subject: added grid ref and fixed css --- .../views/collections/CollectionViewChromes.scss | 23 ++++++++++-- .../views/collections/CollectionViewChromes.tsx | 41 +++++++++++---------- .../collectionGrid/CollectionGridView.scss | 43 +++++++++++++--------- .../collectionGrid/CollectionGridView.tsx | 37 ++++++++++++------- .../views/collections/collectionGrid/Grid.tsx | 9 +++-- 5 files changed, 95 insertions(+), 58 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 9795a3a22..910c14060 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -164,13 +164,31 @@ } } - .collectionStackingViewChrome-cont, .collectionTreeViewChrome-cont { display: flex; justify-content: space-between; } + .collectionGridViewChrome-cont { + display: flex; + margin-left: 10; + + .grid-control { + align-self: center; + width: 30%; + + .grid-icon { + margin-right: 5px; + } + } + + .collectionGridViewChrome-entryBox { + width: 50%; + } + } + + .collectionStackingViewChrome-sort, .collectionTreeViewChrome-sort { display: flex; @@ -238,9 +256,6 @@ cursor: text; } - .collectionGridViewChrome-entryBox { - width: 50%; - } } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 2bffbdf7d..9423e417d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -15,8 +15,6 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; -import { CollectionGridView } from "./collectionGrid/CollectionGridView"; -import HeightLabel from "./collectionMulticolumn/MultirowHeightLabel"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -516,10 +514,10 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer } @@ -530,39 +528,44 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; - //this.props.CollectionView.forceUpdate(); } } } - onCheck = (event: React.ChangeEvent) => this.props.CollectionView.props.Document.flexGrid = event.target.checked; + /** + * Sets whether the grid is flexible or not on the grid's Document. + */ + @undoBatch + toggleFlex = () => { + this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; + } render() { return ( -
- - +
+ + - + ) => e.currentTarget.focus()} /> - - + + - + ) => e.currentTarget.focus()} /> - - + + + - - +
); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index b88721b4d..49d463441 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,14 +1,4 @@ -// .react-grid-layout.layout { -// // max-height: 100%;// min-height: 100%; -// overflow-y: auto; -// } - -// .collectionView {// background-color: white; -// overflow-y: scroll; -// } - - -.collectionGridView_contents { +.collectionGridView-contents { display: flex; overflow: hidden; width: 100%; @@ -16,13 +6,32 @@ flex-direction: column; } -.collectionGridView_contents .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; +.collectionGridView-contents .collectionGridView-gridContainer { height: 100%; + overflow-y: auto; + background-color: white; +} + +.documentDecorations-container .documentDecorations-resizer { + pointer-events: none; + +} + +#documentDecorations-bottomRightResizer, +#documentDecorations-bottomLeftResizer, +#documentDecorations-topRightResizer, +#documentDecorations-topLeftResizer { + visibility: collapse; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; } -.react-grid-layout.layout { - height: 100% +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 111ce4beb..5eeaa9b0d 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { computed, observable } from 'mobx'; +import { computed, observable, action } from 'mobx'; import * as React from "react"; import { Doc, DocListCast } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; @@ -23,6 +23,8 @@ const GridSchema = makeInterface(documentSchema); @observer export class CollectionGridView extends CollectionSubView(GridSchema) { + private containerRef: React.RefObject; + @observable private _scroll: number = 0; constructor(props: Readonly) { super(props); @@ -33,6 +35,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.setLayout = this.setLayout.bind(this); this.deleteInContext = this.deleteInContext.bind(this); + + this.containerRef = React.createRef(); } componentDidMount() { @@ -66,7 +70,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * documents before the target. */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10; + const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll; + console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop) const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -113,7 +118,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - display={"contents"} + display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes removeDocument={this.deleteInContext} />; } @@ -291,17 +296,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.createDashEventsTarget} onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond > - DIV HERE with ref to access scroll of and adjust in getting position - +
) => this._scroll = e.currentTarget.scrollTop)} + > + +
); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 673f670a6..be6c4343a 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -26,9 +26,11 @@ interface GridProps { */ @observer export default class Grid extends React.Component { + gridRef: React.RefObject; constructor(props: Readonly) { super(props); + this.gridRef = React.createRef(); this.onLayoutChange = this.onLayoutChange.bind(this); } @@ -50,13 +52,12 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - useCSSTransforms={true} + // useCSSTransforms={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} preventCollision={false} // change this to true later - transformScale={0.8} // 1.2/scale - style={{ height: "100%", overflowY: "scroll" }} - // draggableHandle={".documentDecorations-resizer"} + // transformScale={2} // 1.2/scale + onDrop={({ x, y, e }) => { console.log("Grid -> render -> x, y, e", x, y, e) }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2