diff options
Diffstat (limited to 'src')
6 files changed, 46 insertions, 25 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c79cabd6a..5b690bf33 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -55,7 +55,7 @@ export interface EditableProps { placeholder?: string; wrap?: string; // nowrap, pre-wrap, etc - showKeyNotVal?: boolean; + schemaHeader?: boolean; updateAlt?: (newAlt: string) => void; updateSearch?: (value: string) => void; } @@ -77,6 +77,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { super(props); makeObservable(this); this._editing = !!this._props.editing; + if (this._props.schemaHeader) this._editing = true; } componentDidMount(): void { @@ -184,9 +185,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> { }; @action - onClick = (e: React.MouseEvent) => { + onClick = (e?: React.MouseEvent) => { if (this._props.editing !== false) { - e.nativeEvent.stopPropagation(); + e?.nativeEvent.stopPropagation(); if (this._ref.current && this._props.showMenuOnLoad) { this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); } else { @@ -280,12 +281,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> { ); } - display = () => { + staticDisplay = () => { let toDisplay; const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if (this._props.showKeyNotVal){ + if (this._props.schemaHeader){ toDisplay = <input className="editableView-input" - value={this._props.GetValue()} + value={gval} + placeholder='Add key' readOnly style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}} // eslint-disable-next-line jsx-a11y/no-autofocus @@ -335,7 +337,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { fontSize: this._props.fontSize, }} onClick={this.onClick}> - {this.display()} + {this.staticDisplay()} </div> ); } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 3d89a479a..ceffc7e44 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -302,7 +302,3 @@ } } -.header-dropdown-container { - height: 0px; - width: 60px; -} diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 39bde7d37..ec1341b14 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -758,6 +758,8 @@ const filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs. @action openColumnMenu = (index: number, newCol: boolean) => { + this.closeFilterMenu(); + this._makeNewColumn = false; this._columnMenuIndex = index; this._menuValue = ''; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 03cf64fc8..bda9fc9b7 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -57,6 +57,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea @computed get fieldKey() { return this._props.columnKeys[this._props.columnIndex]; } + + constructor(props: SchemaColumnHeaderProps){ + super(props); + this._props.schemaView.openColumnMenu(0, false) + } getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey)); setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);} @@ -77,10 +82,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea }; openKeyDropdown = () => { - if (this.isDefaultTitle(this.fieldKey)){ - this._props.schemaView.openColumnMenu(this._props.columnIndex, false) - this._displayKeysDropdown = true; - } + this._props.schemaView.openColumnMenu(this._props.columnIndex, false) } @action @@ -125,7 +127,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea @computed get editableView() { const { color, fieldProps, pointerEvents } = this.renderProps(this._props); - return <div className='schema-column-edit-wrapper' onPointerUp={() => this.openKeyDropdown()} + return <div className='schema-column-edit-wrapper' onPointerUp={() => {SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}} style={{ color, width: '100%', @@ -138,11 +140,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea contents={undefined} fieldContents={fieldProps} editing={undefined} + placeholder={'Add key'} updateAlt={this.updateAlt} // alternate title to display updateSearch={this.updateKeyDropdown} - showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value + schemaHeader={true} GetValue={() => { - if (this.isDefaultTitle(this.fieldKey)) return ''; + if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return ''; else if (this._altTitle) return this._altTitle; else return this.fieldKey; }} @@ -160,7 +163,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea </div> } - isDefaultTitle = (key: string) => { + public static isDefaultField = (key: string) => { const defaultPattern = /EmptyColumnKey/; let isDefault: boolean = (defaultPattern.exec(key) != null); return isDefault; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 8ac2c0314..8cac302ce 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -113,7 +113,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { }}> <IconButton tooltip="Open actions menu" - icon={ <CgMenu size="12px" /> } + icon={ <CgMenu size="16px" /> } size={Size.XSMALL} onPointerDown={e => setupMoveUpEvents( @@ -133,6 +133,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { {this.schemaView?.columnKeys?.map((key, index) => ( <SchemaTableCell key={key} + rowSelected={this._props.isSelected} Document={this.Document} col={index} fieldKey={key} diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index c3a58b505..dc060218c 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -32,6 +32,7 @@ import { FieldViewProps } from '../../nodes/FieldView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; +import { SchemaColumnHeader } from './SchemaColumnHeader'; export interface SchemaTableCellProps { Document: Doc; @@ -57,12 +58,13 @@ export interface SchemaTableCellProps { autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click rootSelected?: () => boolean; cleanupField: (field: string) => string; + rowSelected: () => boolean; } function selectedCell(props: SchemaTableCellProps) { return ( props.isRowActive() && - props.selectedCol() === props.col && // + props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Document)?.length ); } @@ -74,6 +76,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro makeObservable(this); } + get defaultKey(){ + return SchemaColumnHeader.isDefaultField(this._props.fieldKey) + } + static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => { DocumentView.FocusOrOpen(toList(docs)[0]); return true; @@ -89,9 +95,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro protoCount++; doc = DocCast(doc.proto); } - const parenCount = Math.max(0, protoCount - 1); const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells - const textDecoration = color !== 'black' && parenCount ? 'underline' : ''; + const textDecoration = ''; const fieldProps: FieldViewProps = { childFilters: returnEmptyFilter, childFiltersByRanges: returnEmptyFilter, @@ -185,6 +190,14 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro } } + get backgroundColor(){ + if (this.defaultKey){ + if (this._props.rowSelected()) return '#B0D1E7' + else return '#F5F5F5' + } + return '' + } + render() { return ( <div @@ -200,8 +213,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl); } })} - style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> - {this.content} + style={{ padding: this._props.padding, + maxWidth: this._props.maxWidth?.(), + width: this._props.columnWidth() || undefined, + border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined, + backgroundColor: this.backgroundColor}}> + {this.defaultKey ? '' : this.content} </div> ); } |