diff options
Diffstat (limited to 'src')
4 files changed, 135 insertions, 56 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 096b45bee..80c265ba6 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -360,7 +360,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", - maxWidth: this.props.width, overflowX: "hidden" + width: this.props.width, overflowX: "hidden" }} onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>; }); @@ -369,7 +369,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", - maxWidth: this.props.width, overflowX: "hidden" + width: this.props.width, overflowX: "hidden" }} onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key</div>); @@ -380,8 +380,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { render() { return ( - <div className="keys-dropdown"> - <input className="keys-search" style={{ width: this.props.width }} + <div className="keys-dropdown" style={{ width: this.props.width }}> + <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) => { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 9c5f2e8ac..2926a8f6f 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -265,7 +265,7 @@ button.add-column { .keys-dropdown { position: relative; - width: 100%; + //width: 100%; background-color: white; input { @@ -273,6 +273,8 @@ button.add-column { padding: 3px; height: 28px; font-weight: bold; + letter-spacing: "2px"; + text-transform: "uppercase"; &:focus { font-weight: normal; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 61581aec1..bfd5fa96f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,6 +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"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -68,6 +69,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable _menuHeight = 0; @observable _pointerX = 0; @observable _pointerY = 0; + @observable _openTypes: boolean = false; @computed get menuCoordinates() { const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)); const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)); @@ -123,7 +125,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.setHeaderIsEditing(this._isOpen); } + @action changeColumnType = (type: ColumnType, col: any): void => { + this._openTypes = false; this.setColumnType(col, type); } @@ -175,43 +179,74 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { node && (this._node = node); } + @action + typesDropdownChange = (bool: boolean) => { + this._openTypes = bool; + } + + @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); const type = col.type; + + const anyType = <div className={"columnMenu-option" + (type === ColumnType.Any ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Any, col)}> + <FontAwesomeIcon icon={"align-justify"} size="sm" /> + Any + </div>; + + const numType = <div className={"columnMenu-option" + (type === ColumnType.Number ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Number, col)}> + <FontAwesomeIcon icon={"hashtag"} size="sm" /> + Number + </div>; + + const textType = <div className={"columnMenu-option" + (type === ColumnType.String ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.String, col)}> + <FontAwesomeIcon icon={"font"} size="sm" /> + Text + </div>; + + const boolType = <div className={"columnMenu-option" + (type === ColumnType.Boolean ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Boolean, col)}> + <FontAwesomeIcon icon={"check-square"} size="sm" /> + Checkbox + </div>; + + const listType = <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.List, col)}> + <FontAwesomeIcon icon={"list-ul"} size="sm" /> + List + </div>; + + const docType = <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Doc, col)}> + <FontAwesomeIcon icon={"file"} size="sm" /> + Document + </div>; + + const imageType = <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Image, col)}> + <FontAwesomeIcon icon={"image"} size="sm" /> + Image + </div>; + + + const allColumnTypes = <div className="columnMenu-types"> + {anyType} + {numType} + {textType} + {boolType} + {listType} + {docType} + {imageType} + </div>; + + const justColType = type === ColumnType.Any ? anyType : type === ColumnType.Number ? numType : + type === ColumnType.String ? textType : type === ColumnType.Boolean ? boolType : + type === ColumnType.List ? listType : type === ColumnType.Doc ? docType : imageType; + return ( <div className="collectionSchema-headerMenu-group"> - <label>Column type:</label> - <div className="columnMenu-types"> - <div className={"columnMenu-option" + (type === ColumnType.Any ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Any, col)}> - <FontAwesomeIcon icon={"align-justify"} size="sm" /> - Any - </div> - <div className={"columnMenu-option" + (type === ColumnType.Number ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Number, col)}> - <FontAwesomeIcon icon={"hashtag"} size="sm" /> - Number - </div> - <div className={"columnMenu-option" + (type === ColumnType.String ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.String, col)}> - <FontAwesomeIcon icon={"font"} size="sm" /> - Text - </div> - <div className={"columnMenu-option" + (type === ColumnType.Boolean ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Boolean, col)}> - <FontAwesomeIcon icon={"check-square"} size="sm" /> - Checkbox - </div> - <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.List, col)}> - <FontAwesomeIcon icon={"list-ul"} size="sm" /> - List - </div> - <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Doc, col)}> - <FontAwesomeIcon icon={"file"} size="sm" /> - Document - </div> - <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Image, col)}> - <FontAwesomeIcon icon={"image"} size="sm" /> - Image - </div> + <div onClick={() => this.typesDropdownChange(!this._openTypes)}> + <label>Column type:</label> + <FontAwesomeIcon icon={"caret-down"} size="sm" style={{ float: "right" }} /> </div> + {this._openTypes ? allColumnTypes : justColType} </div > ); } @@ -288,6 +323,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action openHeader = (col: any, screenx: number, screeny: number) => { + console.log("header opening"); this._col = col; this._headerOpen = !this._headerOpen; this._pointerX = screenx; @@ -309,6 +345,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } + @action renderContent = (col: any) => { return ( <div className="collectionSchema-header-menuOptions"> @@ -365,7 +402,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @computed get renderMenu() { + @action renderMenu() { const scale = this.props.ScreenToLocalTransform().Scale; return ( <div className="collectionSchema-header-menu" ref={this.setNode} @@ -379,7 +416,26 @@ 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}>{this.renderContent(this._col)}</div>} + {({ 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> </div> ); @@ -559,6 +615,41 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + const scale = this.props.ScreenToLocalTransform().Scale; + const menu = <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> + </div>; + return <div className="collectionSchemaView-container" style={{ pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined, @@ -574,7 +665,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { </div> {this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} - {this._headerOpen ? this.renderMenu : null} + {this._headerOpen ? menu : null} </div>; } }
\ No newline at end of file diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5d1dcf199..176091661 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -186,9 +186,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> { existingKeys={this.props.columns.map(c => c.heading)} canAddNew={true} addNew={false} - // i think issue is with these two props onSelect={this.props.changeColumns} setIsEditing={this.props.setHeaderIsEditing} + + // try commenting this out width={"100%"} />; @@ -208,16 +209,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> { const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; - const menuContent = <div style={{ - display: "flex", justifyContent: "space-between", width: "90%" - }}> - <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} /> - <div className="keys-dropdown" - style={{ display: "inline", zIndex: 10000 }}> - {keysDropdown} - </div> - </div>; - const header = <div //className="collectionSchemaView-header" //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} @@ -226,18 +217,13 @@ export class SchemaTable extends React.Component<SchemaTableProps> { background: col.color, padding: "2px", display: "flex" }}> - - <div style={{ - display: "flex", justifyContent: "space-between", width: "90%" - }}> - <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} /></div> + <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} /> <div className="keys-dropdown" style={{ display: "inline", zIndex: 10000 }}> {keysDropdown} </div> - <div onClick={e => this.changeSorting(col)} - style={{ paddingRight: "6px" }}> + style={{ paddingRight: "6px", display: "inline" }}> <FontAwesomeIcon icon={sortIcon} size="sm" /> </div> <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)} |