diff options
4 files changed, 59 insertions, 21 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index b84b75172..8494f3dca 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -285,6 +285,7 @@ export interface KeysDropdownProps { addNew: boolean; onSelect: (oldKey: string, newKey: string, addnew: boolean) => void; setIsEditing: (isEditing: boolean) => void; + width?: string; } @observer export class KeysDropdown extends React.Component<KeysDropdownProps> { @@ -357,12 +358,13 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1; const options = keyOptions.map(key => { - return <div key={key} className="key-option" onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>; + return <div key={key} className="key-option" style={{ border: "1px solid lightgray" }} + onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>; }); // if search term does not already exist as a group type, give option to create new group type if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { - options.push(<div key={""} className="key-option" + options.push(<div key={""} className="key-option" style={{ border: "1px solid lightgray" }} onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key</div>); } @@ -373,13 +375,15 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { render() { return ( <div className="keys-dropdown"> - <input className="keys-search" ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown} + <input className="keys-search" style={{ width: this.props.width }} + ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown} onChange={e => this.onChange(e.target.value)} onClick={(e) => { //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}></input> - <div className="keys-options-wrapper" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> + <div className="keys-options-wrapper" style={{ backgroundColor: "white" }} + onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> {this.renderOptions()} </div> </div > diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a21249c58..5608cb7ab 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -266,6 +266,7 @@ button.add-column { .keys-dropdown { position: relative; width: 100%; + background-color: white; input { border: 2px solid $light-color-secondary; @@ -285,9 +286,11 @@ button.add-column { position: absolute; top: 28px; box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1); + background-color: white; .key-option { - background-color: $light-color; + //background-color: $light-color; + background-color: white; border: 1px solid lightgray; padding: 2px 3px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 900949b94..a9c599e0e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -60,7 +60,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @observable _menuWidth = 0; - @observable _menuContent: any = ""; @observable _headerOpen = false; @observable _isOpen = false; @observable _node: HTMLDivElement | null = null; @@ -288,8 +287,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @action - openHeader = (col: any, menu: any, screenx: number, screeny: number) => { - this._menuContent = menu; + openHeader = (col: any, screenx: number, screeny: number) => { this._col = col; this._headerOpen = !this._headerOpen; this._pointerX = screenx; @@ -363,8 +361,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onWheel(e: React.WheelEvent) { const scale = this.props.ScreenToLocalTransform().Scale; this.props.active(true) && e.stopPropagation(); - this.menuCoordinates[0] -= e.screenX / scale; - this.menuCoordinates[1] -= e.screenY / scale; + //this.menuCoordinates[0] -= e.screenX / scale; + //this.menuCoordinates[1] -= e.screenY / scale; } @computed get renderMenu() { @@ -505,6 +503,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onResizedChange={this.onResizedChange} setColumns={this.setColumns} reorderColumns={this.reorderColumns} + changeColumns={this.changeColumns} + setHeaderIsEditing={this.setHeaderIsEditing} />; } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index b9df2fe6b..5df0a676e 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -20,12 +20,13 @@ import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; -import { CollectionSchemaAddColumnHeader } from "./CollectionSchemaHeaders"; +import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; +import { TouchScrollableMenuItem } from "../TouchScrollableMenu"; enum ColumnType { @@ -72,11 +73,13 @@ export interface SchemaTableProps { columns: SchemaHeaderField[]; documentKeys: any[]; headerIsEditing: boolean; - openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; + openHeader: (column: any, screenx: number, screeny: number) => void; onPointerDown: (e: React.PointerEvent) => void; onResizedChange: (newResized: Resize[], event: any) => void; setColumns: (columns: SchemaHeaderField[]) => void; reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; + changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; + setHeaderIsEditing: (isEditing: boolean) => void; } @observer @@ -91,6 +94,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @observable _showDataDoc: any = ""; @observable _showDocPos: number[] = []; + @observable _showTitleDropdown: boolean = false; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @@ -126,6 +131,9 @@ export class SchemaTable extends React.Component<SchemaTableProps> { }, [] as SortingRule[]); } + @action + changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column<Doc>[] { @@ -156,26 +164,48 @@ export class SchemaTable extends React.Component<SchemaTableProps> { const cols = this.props.columns.map(col => { + const keysDropdown = <KeysDropdown + keyValue={col.heading} + possibleKeys={possibleKeys} + 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} + width={"100%"} + />; + const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; + const headerText = this._showTitleDropdown ? keysDropdown : col.heading; - - const menuContent = <div><FontAwesomeIcon icon={icon} size="sm" /> {col.heading}</div>; + 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" + <div //className="collectionSchemaView-header" //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + className="collectionSchemaView-menuOptions" style={{ - background: col.color, padding: "4px", - letterSpacing: "2px", - textTransform: "uppercase" + background: col.color, padding: "2px", + // letterSpacing: "2px", + // textTransform: "uppercase", + display: "flex" }}> {menuContent} - <div onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} - style={{ float: "right" }}> - <FontAwesomeIcon icon={"caret-down"} size="2x" /> + <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)} + style={{ float: "right", paddingRight: "6px" }}> + <FontAwesomeIcon icon={"caret-down"} id={"down arrow"} size="2x" /> </div> </div>; @@ -342,6 +372,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); } + @action getColumnType = (column: SchemaHeaderField): ColumnType => { // added functionality to convert old column type stuff to new column type stuff -syip if (column.type && column.type !== 0) { |