removed fixed row height

4 files changed, 126 insertions, 94 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 55185e30e..2dd3eeff4 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -20,6 +20,7 @@ import { CollectionView } from "./CollectionView";
 import { NumCast, StrCast, BoolCast, FieldValue, Cast } from "../../../new_fields/Types";
 import { Docs } from "../../documents/Documents";
 import { DocumentContentsView } from "../nodes/DocumentContentsView";
+import { SelectionManager } from "../../util/SelectionManager";
 
 
 export interface CellProps {
@@ -118,6 +119,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
     }
 
     renderCellWithType(type: string | undefined) {
+        let dragRef: React.RefObject<HTMLDivElement> = React.createRef();
+
         let props: FieldViewProps = {
             Document: this.props.rowProps.original,
             DataDoc: this.props.rowProps.original,
@@ -136,10 +139,19 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             PanelWidth: returnZero,
             addDocTab: this.props.addDocTab,
         };
+
         let onItemDown = (e: React.PointerEvent) => {
             SetupDrag(this._focusRef, () => this._document[props.fieldKey] instanceof Doc ? this._document[props.fieldKey] : this._document,
                 this._document[props.fieldKey] instanceof Doc ? (doc: Doc, target: Doc, addDoc: (newDoc: Doc) => any) => addDoc(doc) : this.props.moveDocument, this._document[props.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e);
         };
+        let onPointerEnter = (e: React.PointerEvent): void => {
+            if (e.buttons === 1 && SelectionManager.GetIsDragging() && (type === "document" || type === undefined)) {
+                dragRef!.current!.className = "doc-drag-over";
+            }
+        };
+        let onPointerLeave = (e: React.PointerEvent): void => {
+            dragRef!.current!.className = "";
+        };
 
         let field = props.Document[props.fieldKey];
         let contents: any = "incorrect type";
@@ -153,40 +165,42 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         }
 
         return (
-            <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
-                <div className="collectionSchemaView-cellContents" ref={this.dropRef} onPointerDown={onItemDown} key={props.Document[Id]}>
-                    <EditableView
-                        editing={this._isEditing}
-                        isEditingCallback={this.isEditingCallback}
-                        display={"inline"}
-                        contents={contents}
-                        height={Number(MAX_ROW_HEIGHT)}
-                        GetValue={() => {
-                            let field = props.Document[props.fieldKey];
-                            if (Field.IsField(field)) {
-                                return Field.toScriptString(field);
+            <div className="" ref={dragRef} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
+                <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
+                    <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef: null} onPointerDown={onItemDown} key={props.Document[Id]}>
+                        <EditableView
+                            editing={this._isEditing}
+                            isEditingCallback={this.isEditingCallback}
+                            display={"inline"}
+                            contents={contents}
+                            height={Number(MAX_ROW_HEIGHT)}
+                            GetValue={() => {
+                                let field = props.Document[props.fieldKey];
+                                if (Field.IsField(field)) {
+                                    return Field.toScriptString(field);
+                                }
+                                return "";
                             }
-                            return "";
-                        }
-                        }
-                        SetValue={(value: string) => {
-                            let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } });
-                            if (!script.compiled) {
-                                return false;
                             }
-                            return this.applyToDoc(props.Document, script.run);
-                        }}
-                        OnFillDown={async (value: string) => {
-                            let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } });
-                            if (!script.compiled) {
-                                return;
-                            }
-                            const run = script.run;
-                            //TODO This should be able to be refactored to compile the script once
-                            const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]);
-                            val && val.forEach(doc => this.applyToDoc(doc, run));
-                        }} />
-                </div >
+                            SetValue={(value: string) => {
+                                let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } });
+                                if (!script.compiled) {
+                                    return false;
+                                }
+                                return this.applyToDoc(props.Document, script.run);
+                            }}
+                            OnFillDown={async (value: string) => {
+                                let script = CompileScript(value, { requiredType: type, addReturn: true, params: { this: Doc.name } });
+                                if (!script.compiled) {
+                                    return;
+                                }
+                                const run = script.run;
+                                //TODO This should be able to be refactored to compile the script once
+                                const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]);
+                                val && val.forEach(doc => this.applyToDoc(doc, run));
+                            }} />
+                    </div >
+                </div>
             </div>
         );
     }
@@ -218,6 +232,13 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell {
 }
 
 @observer
+export class CollectionSchemaDocCell extends CollectionSchemaCell {
+    render() {
+        return this.renderCellWithType("document");
+    }
+}
+
+@observer
 export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
     @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false;
 
@@ -245,21 +266,3 @@ export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
         );
     }
 }
-
-@observer
-export class CollectionSchemaDocCell extends CollectionSchemaCell {
-    render() {
-        return this.renderCellWithType("document");
-        // let reference = React.createRef<HTMLDivElement>();
-        // let onItemDown = (e: React.PointerEvent) => {
-        //     // (!this.props.CollectionView.props.isSelected() ? undefined :
-        //     //     SetupDrag(reference, () => props.Document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
-        // };
-        // return (
-        //     <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
-        //         <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={this._document[Id]} ref={reference}>
-        //         </div >
-        //     </div>
-        // );
-    }
-}
diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index 3a61881a7..8ed71d70f 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -105,6 +105,7 @@ export interface MovableRowProps {
     ScreenToLocalTransform: () => Transform;
     addDoc: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean;
     moveDoc: DragManager.MoveFunction;
+    rowFocused: boolean;
 }
 
 export class MovableRow extends React.Component<MovableRowProps> {
@@ -178,8 +179,10 @@ export class MovableRow extends React.Component<MovableRowProps> {
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = SetupDrag(reference, () => doc, this.props.moveDoc);
 
+        console.log("row focused", this.props.rowFocused);
+
         return (
-            <div className="collectionSchema-row" ref={this.createRowDropTarget}>
+            <div className={this.props.rowFocused ? "collectionSchema-row row-focused" : "collectionSchema-row"} ref={this.createRowDropTarget}>
                 <div className="collectionSchema-row-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                     <div className="row-dragger" ref={reference} onPointerDown={onItemDown}>
                         <ReactTableDefaults.TrComponent>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index e511bc1bd..ef93e381b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -11,6 +11,7 @@
     height: calc(100% - 25px);
     // overflow: hidden;
     overflow-x: scroll;
+    border: none;
 
     .collectionSchemaView-previewRegion {
         position: relative;
@@ -70,10 +71,11 @@
 
     .rt-thead {
         &.-header {
-            background: $intermediate-color;
-            color: $light-color;
+            // background: $intermediate-color;
+            // color: $light-color;
             font-size: 12px;
             height: 30px;
+            border: 1px solid $intermediate-color;
         }
 
         .rt-resizable-header {
@@ -89,11 +91,14 @@
             height: 100%;
             overflow: visible;
         }
+
+        .rt-th {
+            padding: 0;
+        }
     }
 
     .rt-th {
-        max-height: $MAX_ROW_HEIGHT;
-        padding: 3px 7px;
+        // max-height: $MAX_ROW_HEIGHT;
         font-size: 13px;
         text-align: center;
         
@@ -108,16 +113,17 @@
 
     .rt-tr-group {
         direction: ltr;
-        max-height: $MAX_ROW_HEIGHT;
+        flex: 0 1 auto;
+        // max-height: $MAX_ROW_HEIGHT;
         // for sub comp
 
-        &:nth-child(even) {
-            background-color: $light-color;
-        }
+        // &:nth-child(even) {
+        //     background-color: $light-color;
+        // }
     
-        &:nth-child(odd) {
-            background-color: $light-color-secondary;
-        }
+        // &:nth-child(odd) {
+        //     background-color: $light-color-secondary;
+        // }
 
         &:last-child {
             border-bottom: $intermediate-color;
@@ -128,13 +134,13 @@
 
     .rt-tr {
         width: 100%;
-        height: $MAX_ROW_HEIGHT;
+        // height: $MAX_ROW_HEIGHT;
     }
 
     .rt-td {
         border-width: 1px;
         border-right-color: $intermediate-color;
-        max-height: $MAX_ROW_HEIGHT;
+        // max-height: $MAX_ROW_HEIGHT;
         padding: 0;
         font-size: 13px;
         text-align: center;
@@ -184,6 +190,7 @@
 
 .collectionSchemaView-header {
     height: 100%;
+    color: $intermediate-color;
 
     .collectionSchema-header-menu {
         height: 100%;
@@ -223,10 +230,6 @@
         position: relative;
         max-width: 175px;
 
-        // .keys-search {
-
-        // }
-
         .keys-options-wrapper {
             width: 100%;
             max-height: 150px;
@@ -261,17 +264,18 @@
 }
 
 .collectionSchema-row {
-    height: $MAX_ROW_HEIGHT;
-    // display: flex;
+    // height: $MAX_ROW_HEIGHT;
+
+    &.row-focused {
+        background-color: $light-color-secondary;
+    }
 
     .row-dragger {
-        height: $MAX_ROW_HEIGHT;
+        // height: $MAX_ROW_HEIGHT;
     }
 
     .collectionSchema-row-wrapper {
-        max-height: $MAX_ROW_HEIGHT;
-        // width: 100%;
-        // border: 1px solid lightgray;
+        // max-height: $MAX_ROW_HEIGHT;
 
         &.row-above {
             border-top: 1px solid red;
@@ -287,8 +291,6 @@
 
 
 .collectionSchemaView-cellWrapper {
-    // height: $MAX_ROW_HEIGHT;
-    // background-color: red;
     height: 100%;
     padding: 4px;
 
@@ -311,6 +313,21 @@
             border: none;
         }
     }
+
+    p {
+        width: 100%;
+        height: 100%;
+        word-wrap: break-word;
+    }
+}
+
+.doc-drag-over {
+    background-color: red;
+}
+
+.collectionSchemaView-toolbar {
+    display: flex;
+    justify-content: flex-end;
 }
 
 #preview-schema-checkbox-div {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index ea09926d4..a1251b028 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -81,6 +81,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
         let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.toUpperCase() === key.toUpperCase()) === -1);
+        let columns: Column<Doc>[] = [
+            {
+            expander: true,
+            Header: "",
+            width: 45,
+            Expander: (rowInfo) => {
+                if (rowInfo.original.type === "collection") {
+                    return <div>+</div>;
+                } else {
+                    return null;
+                }
+            }
+        }
+        ];
+        
         let cols = this.columns.map(col => {
             let focusedRow = this._focusedCell.row;
             let focusedCol = this._focusedCell.col;
@@ -139,22 +154,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 },
                 minWidth: 200,
             };
-        }) as {Header?: TableCellRenderer, accessor?: (doc: Doc) => FieldResult<Field>, id?: string, Cell?: (rowProps: CellInfo) => JSX.Element, width?: number, resizable?: boolean, expander?: boolean, Expander?: (rowInfo: RowInfo) => JSX.Element | null, minWidth?: number}[];
-
-        // cols.push({
-        //     expander: true,
-        //     Header: "",
-        //     width: 45,
-        //     Expander: (rowInfo) => {
-        //         if (rowInfo.original.type === "collection") {
-        //             return <div>+</div>;
-        //         } else {
-        //             return null;
-        //         }
-        //     }
-        // });
-
-        cols.push({
+        });// as {Header?: TableCellRenderer, accessor?: (doc: Doc) => FieldResult<Field>, id?: string, Cell?: (rowProps: CellInfo) => JSX.Element, width?: number, resizable?: boolean, expander?: boolean, Expander?: (rowInfo: RowInfo) => JSX.Element | null, minWidth?: number}[];
+        columns.push(...cols);
+
+        columns.push({
             Header: <CollectionSchemaAddColumnHeader
                 createColumn={this.createColumn}
                 // possibleKeys={possibleKeys}
@@ -171,7 +174,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
         // SubComponent={row => row.original.type === "collection" && <div>SUB</div>}
 
-        return cols;
+        return columns;
     }
 
     // onHeaderDrag = (columnName: string) => {
@@ -201,11 +204,17 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         if (!rowInfo) {
             return {};
         }
+        let isSelected = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0].props.Document === this.props.Document : false;
         return {
             ScreenToLocalTransform: this.props.ScreenToLocalTransform,
             addDoc: (doc: Doc, relativeTo?: Doc, before?: boolean) => Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before),
             moveDoc: (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => this.props.moveDocument(d, target, addDoc),
             rowInfo, 
+            rowFocused: !this._headerIsEditing && isSelected && rowInfo.index === this._focusedCell.row,
+            // style: {
+            //     background: rowInfo.index === this._focusedCell.row ? "lightGray" : "white",
+            //     //color: rowInfo.index === this._selectedIndex ? "white" : "black"
+            // }
             // onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
             //     that.props.select(e.ctrlKey);
             //     that._selectedIndex = rowInfo.index;
@@ -486,7 +495,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             sortable={false}
             TrComponent={MovableRow}
             sorted={Array.from(this._sortedColumns.values())}
-            // SubComponent={row => row.original.type === "collection" && <div>this is the sub component</div>}
+            SubComponent={row => row.original.type === "collection" && <div>this is the sub component</div>}
         />;