diff options
4 files changed, 34 insertions, 34 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 4b3dd3cc1..61f21006e 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -71,6 +71,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> { document.removeEventListener("keydown", this.onKeyDown); this._isEditing = true; this.props.setIsEditing(true); + } } @@ -87,6 +88,9 @@ export class CollectionSchemaCell extends React.Component<CellProps> { this.props.changeFocusedCellByIndex(this.props.row, this.props.col); this.props.setPreviewDoc(this.props.rowProps.original); + // this._isEditing = true; + // this.props.setIsEditing(true); + let field = this.props.rowProps.original[this.props.rowProps.column.id!]; let doc = FieldValue(Cast(field, Doc)); if (typeof field === "object" && doc) this.props.setPreviewDoc(doc); @@ -122,17 +126,17 @@ export class CollectionSchemaCell extends React.Component<CellProps> { } } - expandDoc = (e: React.PointerEvent) => { - let field = this.props.rowProps.original[this.props.rowProps.column.id as string]; - let doc = FieldValue(Cast(field, Doc)); + // expandDoc = (e: React.PointerEvent) => { + // let field = this.props.rowProps.original[this.props.rowProps.column.id as string]; + // let doc = FieldValue(Cast(field, Doc)); - console.log("Expanding doc", StrCast(doc!.title)); - this.props.setPreviewDoc(doc!); + // console.log("Expanding doc", StrCast(doc!.title)); + // this.props.setPreviewDoc(doc!); - // this.props.changeFocusedCellByIndex(this.props.row, this.props.col); + // // this.props.changeFocusedCellByIndex(this.props.row, this.props.col); - e.stopPropagation(); - } + // e.stopPropagation(); + // } renderCellWithType(type: string | undefined) { let dragRef: React.RefObject<HTMLDivElement> = React.createRef(); diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index 483463c2b..5741c4191 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -225,7 +225,6 @@ export class MovableRow extends React.Component<MovableRowProps> { let className = "collectionSchema-row"; if (this.props.rowFocused) className += " row-focused"; if (this.props.rowWrapped) className += " row-wrapped"; - // if (!this.props.rowWrapped) className += " row-unwrapped"; return ( <div className={className} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}> diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 564e4f4a5..2946fc4f7 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -120,6 +120,7 @@ padding: 0; border: solid lightgray; border-width: 0 1px; + border-bottom: 2px solid lightgray; } } @@ -127,7 +128,7 @@ // max-height: $MAX_ROW_HEIGHT; font-size: 13px; text-align: center; - background-color: $light-color-secondary; + // background-color: $light-color-secondary; &:last-child { overflow: visible; @@ -145,25 +146,11 @@ 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 - - // &:nth-child(even) { - // background-color: $light-color; - // } - - // &:nth-child(odd) { - // background-color: $light-color-secondary; - // } // &:first-child { - // border-top: 1px solid $light-color-secondary !important; - // } - // &:last-child { - // border-bottom: 1px solid $light-color-secondary !important; + // .rt-td { + // border-top: 1px solid lightgray !important; + // } // } } @@ -215,7 +202,6 @@ .rt-resizable-header:last-child { overflow: visible; - border: 3px solid red !important; .rt-resizer { width: 5px !important; @@ -396,8 +382,9 @@ button.add-column { background-color: white; // white-space: nowrap; - &.row-focused .rt-tr { + &.row-focused .rt-td { background-color: rgb(255, 246, 246); //$light-color-secondary; + // background-color: $light-color; } &.row-wrapped { @@ -473,15 +460,22 @@ button.add-column { outline: none; } - &.focused { - // background-color: yellowgreen; - // border: 2px solid yellowgreen; - + &.editing { + padding: 0; input { outline: 0; border: none; - background-color: yellow; + background-color: rgb(255, 217, 217); + width: 100%; + height: 100%; + padding: 2px 3px; + min-height: 26px; } + } + + &.focused { + // background-color: yellowgreen; + // border: 2px solid yellowgreen; &.inactive { // border: 2px solid rgba(255, 255, 0, 0.4); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 508d1f99d..a666a428b 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -477,6 +477,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { //@ts-ignore let col = this.columns.map(c => c.heading).indexOf(column!.id); let isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document); + let isEditing = this.props.isFocused(this.props.Document) && this._cellIsEditing; + // TODO: editing border doesn't work :( return { style: { border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" @@ -497,6 +499,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @action setCellIsEditing = (isEditing: boolean): void => { + console.log("SET CELL IS EDITING", isEditing); this._cellIsEditing = isEditing; } |