diff options
Diffstat (limited to 'src')
3 files changed, 27 insertions, 4 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 5fd37cbb1..53c0823ea 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -224,6 +224,7 @@ display: none; } +.schema-table-cell-selected, .schema-table-cell, .row-menu { border: 1px solid global.$medium-gray; @@ -232,6 +233,14 @@ display: inline-flex; padding: 0; align-items: center; + input[type='text'] { + border: unset; + } +} +.schema-table-cell-selected { + input[type='text'] { + background: lightgray; + } } .schemaRTFCell { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 8e9e8e1cc..05670562e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -252,7 +252,8 @@ export class CollectionSchemaView extends CollectionSubView() { @action onKeyDown = (e: KeyboardEvent) => { if (this._selectedDocs.length > 0) { - switch (e.key) { + switch (e.key + (e.shiftKey ? 'Shift' : '')) { + case 'Enter': case 'ArrowDown': { const lastDoc = this._selectedDocs.lastElement(); @@ -272,6 +273,7 @@ export class CollectionSchemaView extends CollectionSubView() { e.preventDefault(); } break; + case 'EnterShift': case 'ArrowUp': { const firstDoc = this._selectedDocs.lastElement(); @@ -291,6 +293,7 @@ export class CollectionSchemaView extends CollectionSubView() { e.preventDefault(); } break; + case 'Tab': case 'ArrowRight': if (this._selectedCells) { this._selectedCol = Math.min(this._colEles.length - 1, this._selectedCol + 1); @@ -298,6 +301,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.selectCell(this._selectedDocs[0], 0, false, false); } break; + case 'TabShift': case 'ArrowLeft': if (this._selectedCells) { this._selectedCol = Math.max(0, this._selectedCol - 1); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 5d0a03967..1b4f200a3 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -186,6 +186,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro return ( <div className="schemacell-edit-wrapper" + tabIndex={1} style={{ color, textDecoration, @@ -259,7 +260,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro render() { return ( <div - className="schema-table-cell" + className={`schema-table-cell${selectedCell(this._props) ? '-selected' : ''}`} onContextMenu={e => StopEvent(e)} onPointerDown={action(e => { if (this.lockedInteraction) { @@ -395,10 +396,10 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp const { pointerEvents } = SchemaTableCell.renderProps(this._props); return ( <> - <div style={{ pointerEvents: 'none' }}> + <div style={{ pointerEvents: 'none' }} tabIndex={1}> <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} /> </div> - {pointerEvents === 'none' ? null : ( + {pointerEvents === 'none' || !selectedCell(this._props) ? null : ( <Popup icon={<FontAwesomeIcon size="xs" icon="caret-down" />} size={Size.XSMALL} @@ -493,14 +494,22 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC <div style={{ width: '100%' }}> <Select styles={{ + dropdownIndicator: base => ({ + ...base, + display: selectedCell(this._props) ? 'unset' : 'none', + }), container: base => ({ ...base, height: 20, + border: 'unset !important', + pointerEvents: selectedCell(this._props) ? 'all' : 'none', }), control: base => ({ ...base, height: 20, minHeight: 20, + border: 'unset !important', + background: selectedCell(this._props) ? 'lightgray' : undefined, }), placeholder: base => ({ ...base, @@ -516,6 +525,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC ...base, height: 20, transform: 'scale(0.75)', + border: 'unset !important', }), menuPortal: base => ({ ...base, |