diff options
5 files changed, 26 insertions, 88 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index fc7c2400d..efff4db98 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -365,7 +365,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { const options = keyOptions.map(key => { return <div key={key} className="key-option" style={{ border: "1px solid lightgray", - width: this.props.width, overflowX: "hidden" + width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }} onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>; }); @@ -374,7 +374,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { options.push(<div key={""} className="key-option" style={{ border: "1px solid lightgray", - width: this.props.width, overflowX: "hidden" + width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }} onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key</div>); @@ -385,8 +385,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { render() { return ( - <div className="keys-dropdown" style={{ width: this.props.width }}> - <input className="keys-search" style={{ width: this.props.width, maxWidth: "1000" }} + <div className="keys-dropdown" style={{ width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }}> + <input className="keys-search" //style={{ width: this.props.width, maxWidth: "1000" }} ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown} onChange={e => this.onChange(e.target.value)} onClick={(e) => { @@ -395,7 +395,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { }} onFocus={this.onFocus} onBlur={this.onBlur}></input> <div className="keys-options-wrapper" style={{ backgroundColor: "white", - width: this.props.width, overflowX: "hidden" + width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> {this.renderOptions()} diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 2330fcc8a..5226a60f1 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -500,7 +500,7 @@ button.add-column { } .collectionSchemaView-toolbar { - z-index: 1000; + z-index: 100; } .collectionSchemaView-toolbar { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index dc4e75443..c75012595 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,7 +24,7 @@ import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; import { SchemaTable } from "./SchemaTable"; -import { civicinfo } from "googleapis/build/src/apis/civicinfo"; +import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -185,7 +185,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this._openTypes = bool; } - @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); @@ -353,29 +352,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } - @action - renderContent = (col: any) => { - return ( - <div className="collectionSchema-header-menuOptions"> - <div className="collectionSchema-headerMenu-group"> - <label>Key:</label> - {this.renderKeysDropDown(col)} - </div> - {false ? <></> : - <> - {this.renderTypes(col)} - {this.renderSorting(col)} - {this.renderColors(col)} - <div className="collectionSchema-headerMenu-group"> - <button onClick={() => { this.deleteColumn(col.heading); }} - >Delete Column</button> - </div> - </> - } - </div> - ); - } - @undoBatch @action deleteColumn = (key: string) => { @@ -410,43 +386,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @action renderMenu() { - const scale = this.props.ScreenToLocalTransform().Scale; - return ( - <div className="collectionSchema-header-menu" ref={this.setNode} - onWheel={e => this.props.active(true) && e.stopPropagation()} - onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> - <Measure offset onResize={action((r: any) => { - const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); - this._menuWidth = dim[0]; this._menuHeight = dim[1]; - })}> - {({ measureRef }) => <div ref={measureRef}> - <div className="collectionSchema-header-menuOptions"> - <div className="collectionSchema-headerMenu-group"> - <label>Key:</label> - {this.renderKeysDropDown(this._col)} - </div> - {false ? <></> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} - <div className="collectionSchema-headerMenu-group"> - <button onClick={() => { this.deleteColumn(this._col.heading); }} - >Delete Column</button> - </div> - </> - } - </div> - - </div>} - </Measure> + @computed get renderMenuContent() { + TraceMobx(); + return <div className="collectionSchema-header-menuOptions"> + <div className="collectionSchema-headerMenu-group"> + <label>Key:</label> + {this.renderKeysDropDown(this._col)} </div> - ); + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} + <div className="collectionSchema-headerMenu-group"> + <button onClick={() => { this.deleteColumn(this._col.heading); }} + >Delete Column</button> + </div> + </div>; } private createTarget = (ele: HTMLDivElement) => { @@ -623,6 +577,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + TraceMobx(); + const menuContent = this.renderMenuContent; const scale = this.props.ScreenToLocalTransform().Scale; const menu = <div className="collectionSchema-header-menu" ref={this.setNode} onWheel={e => this.props.active(true) && e.stopPropagation()} @@ -635,26 +591,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) => <div ref={measureRef}> - <div className="collectionSchema-header-menuOptions"> - <div className="collectionSchema-headerMenu-group"> - <label>Key:</label> - {this.renderKeysDropDown(this._col)} - </div> - {false ? <></> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} - <div className="collectionSchema-headerMenu-group"> - <button onClick={() => { this.deleteColumn(this._col.heading); }} - >Delete Column</button> - </div> - </> - } - </div> - - </div>} + {({ measureRef }) => <div ref={measureRef}> {menuContent} </div>} </Measure> </div>; diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 2885ac763..822e15aed 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -16,6 +16,7 @@ height: 32px; border-bottom: .5px solid rgb(180, 180, 180); overflow: visible; + z-index: 9001; .collectionViewBaseChrome { display: flex; diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5152b16b0..9e3b4d961 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -221,7 +221,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { }}> <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} /> <div className="keys-dropdown" - style={{ display: "inline", zIndex: 10000 }}> + style={{ display: "inline", zIndex: 1000 }}> {keysDropdown} </div> <div onClick={e => this.changeSorting(col)} |