some preview stuff

2 files changed, 37 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 9ad52db4c..98ec971ef 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -40,22 +40,23 @@
 
     .collectionSchemaView-dividerDragger {
         position: relative;
-        background: black;
         float: left;
-        height: 37px;
+        height: 100%;
         width: 20px;
         z-index: 20;
         right: 0;
         top: 0;
-        background: $main-accent;
-        box-sizing: border-box;
-        border-left: 1px solid $intermediate-color;
-        border-right: 1px solid $intermediate-color;
+        background: gray;
+        cursor: col-resize;
+        // background: $main-accent;
+        // box-sizing: border-box;
+        // border-left: 1px solid $intermediate-color;
+        // border-right: 1px solid $intermediate-color;
     }
 }
 
 .ReactTable {
-    width: 100% !important;
+    width: 100%;
     height: 100%;
     background: white;
     box-sizing: border-box;
@@ -400,9 +401,16 @@ button.add-column {
 }
 
 .collectionSchemaView-toolbar {
-    height: 50px;
+    height: 30px;
     display: flex;
     justify-content: flex-end;
+    padding: 0 10px;
+
+    .collectionSchemaView-toolbar-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
 }
 
 #preview-schema-checkbox-div {
@@ -410,6 +418,10 @@ button.add-column {
     font-size: 12px;
 }
 
+.collectionSchemaView-table {
+    width: calc(100% - 7px);
+}
+
 .sub {
     padding: 10px 30px;
     // padding-left: 80px;
@@ -429,6 +441,10 @@ button.add-column {
     .rt-table {
         background-color: rgb(252, 252, 252);
     }
+
+    .collectionSchemaView-table {
+        width: 100%;
+    }
 }
 
 .collectionSchemaView-expander {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index a8692ee95..ed2c88f19 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -66,7 +66,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     private DIVIDER_WIDTH = 4;
 
     @observable previewScript: string = "";
-    @observable previewDoc: Doc | undefined = this.childDocs.length ? this.childDocs[0] : undefined;
+    @observable previewDoc: Doc | undefined = undefined;
     @observable private _node: HTMLDivElement | null = null;
     @observable private _focusedTable: Doc = this.props.Document;
 
@@ -100,6 +100,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     @action
     setPreviewDoc = (doc: Doc): void => {
+        console.log("set");
         this.previewDoc = doc;
     }
 
@@ -147,6 +148,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get previewDocument(): Doc | undefined {
         let selected = this.previewDoc;
         let pdc = selected ? (this.previewScript && this.previewScript !== "this" ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
+        console.log("preview document", pdc);
         return pdc;
     }
 
@@ -209,6 +211,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 isSelected={this.props.isSelected}
                 isFocused={this.isFocused}
                 setFocused={this.setFocused}
+                setPreviewDoc={this.setPreviewDoc}
             />
         );
     }
@@ -217,7 +220,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get schemaToolbar() {
         return (
             <div className="collectionSchemaView-toolbar">
-                <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />Show Preview</div>
+                <div className="collectionSchemaView-toolbar-item">
+                    <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />Show Preview</div>
+                </div>
             </div>
         );
     }
@@ -258,6 +263,7 @@ export interface SchemaTableProps {
     isSelected: () => boolean;
     isFocused: (document: Doc) => boolean;
     setFocused: (document: Doc) => void;
+    setPreviewDoc: (document: Doc) => void;
 }
 
 @observer
@@ -430,9 +436,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         // let col = column ? this.columns.indexOf(column!) : -1;
         let isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document);
         // let column = this.columns.indexOf(column.id!);
-
-        console.log("td style", row, col, this._focusedCell.row, this._focusedCell.col);
-
         return {
             style: {
                 border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb"
@@ -519,12 +522,16 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 this._focusedCell = { row: this._focusedCell.row + 1 === this.props.childDocs.length ? this._focusedCell.row : this._focusedCell.row + 1, col: this._focusedCell.col };
                 break;
         }
+        let doc = this.props.childDocs[this._focusedCell.row];
+        this.props.setPreviewDoc(doc);
     }
 
     @action
     changeFocusedCellByIndex = (row: number, col: number): void => {
         this._focusedCell = { row: row, col: col };
         this.props.setFocused(this.props.Document);
+        let doc = this.props.childDocs[this._focusedCell.row];
+        this.props.setPreviewDoc(doc);
     }
 
     @action
@@ -647,7 +654,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
     @computed
     get reactTable() {
-        let previewWidth = this.previewWidth() + 2 * this.borderWidth + this.DIVIDER_WIDTH + 1;
+        let previewWidth = this.previewWidth(); // + 2 * this.borderWidth + this.DIVIDER_WIDTH + 1;
         let hasCollectionChild = this.props.childDocs.reduce((found, doc) => found || doc.type === "collection", false);
         let expandedRowsList = this._openCollections.map(col => this.props.childDocs.findIndex(doc => doc[Id] === col).toString());
         let expanded = {};