re-setup of grid view

3 files changed, 88 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
new file mode 100644
index 000000000..c089585a0
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -0,0 +1,13 @@
+.collectionGridView_contents {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+
+    .document-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+        height: 100px;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
new file mode 100644
index 000000000..2e496fe7f
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -0,0 +1,41 @@
+import { action, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from "react";
+import { Doc } from '../../../../new_fields/Doc';
+import { documentSchema } from '../../../../new_fields/documentSchemas';
+import { makeInterface } from '../../../../new_fields/Schema';
+import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types';
+import { DragManager } from '../../../util/DragManager';
+import { Transform } from '../../../util/Transform';
+import { undoBatch } from '../../../util/UndoManager';
+import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { CollectionSubView } from '../CollectionSubView';
+import { List } from '../../../../new_fields/List';
+import { returnZero } from '../../../../Utils';
+import Grid from "./Grid";
+
+
+type GridSchema = makeInterface<[typeof documentSchema]>;
+const GridSchema = makeInterface(documentSchema);
+
+export class CollectionGridView extends CollectionSubView(GridSchema) {
+    render(): JSX.Element {
+        const layout = [
+            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
+            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
+        ];
+        return (
+            <div className="collectionGridView_contents"
+                style={{
+                    marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin),
+                    marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
+                }} ref={this.createDashEventsTarget}>
+
+                <Grid>
+
+                </Grid>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
new file mode 100644
index 000000000..550459299
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { observer } from "mobx-react";
+import { observable, action } from "mobx";
+
+
+interface Props {
+
+}
+
+import "../../../../../node_modules/react-grid-layout/css/styles.css";
+import "../../../../../node_modules/react-resizable/css/styles.css";
+
+import * as GridLayout from 'react-grid-layout';
+
+@observer
+export default class Grid extends React.Component {
+    render() {
+        // layout is an array of objects, see the demo for more complete usage
+        const layout = [
+            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
+            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
+        ];
+        return (
+            // <div className="collectionGridView_contents"
+            // style={}>
+            <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
+                <div key="a">a</div>
+                <div key="b">b</div>
+                <div key="c">c</div>
+            </GridLayout>
+        );
+    }
+}