minor schema stylign

3 files changed, 46 insertions, 27 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index bc84da140..d453fed47 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -42,23 +42,12 @@ export interface CellProps {
 
 @observer
 export class CollectionSchemaCell extends React.Component<CellProps> {
-    @observable protected _isEditing: boolean = this.props.isEditing ? true : false;
+    @observable protected _isEditing: boolean = false;
     protected _focusRef = React.createRef<HTMLDivElement>();
     protected _document = this.props.rowProps.original;
     private _dropDisposer?: DragManager.DragDropDisposer;
 
     componentDidMount() {
-        // if (this._focusRef.current) {
-        //     if (this.props.isFocused) {
-        //         this._focusRef.current.className += " focused";
-        //         if (!this.props.isEditable) {
-        //             this._focusRef.current.className += " inactive";
-        //         }
-        //     } else {
-        //         this._focusRef.current.className = "collectionSchemaView-cellWrapper";
-        //     }
-        // }
-
         document.addEventListener("keydown", this.onKeyDown);
 
     }
@@ -69,7 +58,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
 
     @action
     onKeyDown = (e: KeyboardEvent): void => {
-        console.log("CELL keydown");
         if (this.props.isFocused && this.props.isEditable) {
             document.removeEventListener("keydown", this.onKeyDown);
             this._isEditing = true;
@@ -146,11 +134,11 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         // };
         let onPointerEnter = (e: React.PointerEvent): void => {
             if (e.buttons === 1 && SelectionManager.GetIsDragging() && (type === "document" || type === undefined)) {
-                dragRef!.current!.className = "doc-drag-over";
+                dragRef!.current!.className = "collectionSchemaView-cellContainer doc-drag-over";
             }
         };
         let onPointerLeave = (e: React.PointerEvent): void => {
-            dragRef!.current!.className = "";
+            dragRef!.current!.className = "collectionSchemaView-cellContainer";
         };
 
         let field = props.Document[props.fieldKey];
@@ -170,7 +158,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         if (this.props.isFocused && !this.props.isEditable) className += " inactive";
 
         return (
-            <div className="" ref={dragRef} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
+            <div className="collectionSchemaView-cellContainer" ref={dragRef} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
                     <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef : null} key={props.Document[Id]}>
                         <EditableView
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index c2b0d8f42..3bc1bc060 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -75,7 +75,7 @@
             // color: $light-color;
             font-size: 12px;
             height: 30px;
-            border: 1px solid $intermediate-color;
+            // border: 1px solid $intermediate-color;
             box-shadow: none;
         }
 
@@ -95,6 +95,8 @@
 
         .rt-th {
             padding: 0;
+            border: solid lightgray;
+            border-width: 0 1px;
         }
     }
 
@@ -117,6 +119,10 @@
         direction: ltr;
         flex: 0 1 auto;
         min-height: 30px;
+        border: 0 !important;
+        // border: solid lightgray;
+        // border-width: 1px 0;
+        // border-left: 1px solid lightgray;
         // max-height: $MAX_ROW_HEIGHT;
         // for sub comp
 
@@ -128,10 +134,11 @@
         //     background-color: $light-color-secondary;
         // }
 
+        &:first-child {
+            border-top: 1px solid $light-color-secondary !important;
+        }
         &:last-child {
-            border-bottom: $intermediate-color;
-            border-bottom-style: solid;
-            border-bottom-width: 1;
+            border-bottom: 1px solid $light-color-secondary !important;
         }
     }
 
@@ -142,8 +149,10 @@
     }
 
     .rt-td {
-        border-width: 1px;
-        border-right-color: $intermediate-color;
+        // border: 1px solid $light-color-secondary !important;
+        // border-width: 0 1px;
+        // border-width: 1px;
+        // border-right-color: $intermediate-color;
         // max-height: $MAX_ROW_HEIGHT;
         padding: 0;
         font-size: 13px;
@@ -284,7 +293,7 @@ button.add-column {
     height: 100%;
 
     &.row-focused {
-        background-color: $light-color-secondary;
+        background-color: rgb(253, 191, 191);//$light-color-secondary;
     }
 
     .row-dragger {
@@ -310,6 +319,10 @@ button.add-column {
     }
 }
 
+.collectionSchemaView-cellContainer {
+    width: 100%;
+    height: 100%;
+}
 
 .collectionSchemaView-cellWrapper {
     height: 100%;
@@ -321,7 +334,7 @@ button.add-column {
 
     &.focused {
         // background-color: yellowgreen;
-        border: 2px solid yellowgreen;
+        // border: 2px solid yellowgreen;
 
         input {
             outline: 0;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index a7e435ac6..87a4a0c6a 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -292,7 +292,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 {
                     expander: true,
                     Header: "",
-                    width: 45,
+                    width: 30,
                     Expander: (rowInfo) => {
                         if (rowInfo.original.type === "collection") {
                             if (rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-up"} size="sm" /></div>;
@@ -421,6 +421,25 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         };
     }
 
+    private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => {
+        if (!rowInfo) return {};
+        if (!column) return {};
+
+        let row = rowInfo.index;
+        let col = this.columns.indexOf(column.id);
+        // 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 black" : "1px solid #f1efeb"
+            }
+        };
+    }
+
     // private createTarget = (ele: HTMLDivElement) => {
     //     this._mainCont = ele;
     //     this.props.CreateDropTarget(ele);
@@ -456,7 +475,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
-        // console.log("pointer down", StrCast(this.props.Document.title));
         this.props.setFocused(this.props.Document);
         if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) {
             if (this.props.isSelected()) e.stopPropagation();
@@ -470,7 +488,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     onKeyDown = (e: KeyboardEvent): void => {
-        console.log("schema keydown", !this._cellIsEditing, !this._headerIsEditing, this.props.isFocused(this.props.Document));
         if (!this._cellIsEditing && !this._headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected()) {
             let direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : "";
             this.changeFocusedCellByDirection(direction);
@@ -645,6 +662,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             showPagination={false}
             columns={this.tableColumns}
             getTrProps={this.getTrProps}
+            getTdProps={this.getTdProps}
             sortable={false}
             TrComponent={MovableRow}
             sorted={Array.from(this._sortedColumns.values())}