diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.scss | 32 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 19 |
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 = {}; |