diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaHeaders.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 38 | ||||
| -rw-r--r-- | src/client/views/linking/LinkMenu.tsx | 2 |
3 files changed, 31 insertions, 15 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index d9a27f355..aaa2e6096 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -374,7 +374,11 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { return ( <div className="keys-dropdown"> <input className="keys-search" ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown} - onChange={e => this.onChange(e.target.value)} onFocus={this.onFocus} onBlur={this.onBlur}></input> + 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}> {this.renderOptions()} </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index d7038eaa9..9b2d05b6a 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -29,6 +29,7 @@ import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; +import Measure from "react-measure"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -66,7 +67,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable pointerX: number = 0; @observable pointerY: number = 0; - @computed get menuCoordinates() { return this.props.ScreenToLocalTransform().transformPoint(this.pointerX, this.pointerY); } + @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)); + return this.props.ScreenToLocalTransform().transformPoint(x, y); + } @computed get columns() { return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); @@ -297,10 +302,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @action - openHeader = (col: any, menu: any) => { + openHeader = (col: any, menu: any, screenx: number, screeny: number) => { this.menuContent = menu; this.col = col; this.headerOpen = !this.headerOpen; + this.pointerX = screenx; + this.pointerY = screeny; } @action @@ -358,17 +365,23 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //anchorPoints.TOP_CENTER + @observable _menuWidth = 0 + @observable _menuHeight = 0; @computed get renderMenu() { const scale = this.props.ScreenToLocalTransform().Scale; return ( <div className="collectionSchema-header-menu" ref={this.setNode} onWheel={e => this.props.active(true) && e.stopPropagation()} style={{ - position: "absolute", - background: "white", - transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 160 * scale}px)` + position: "absolute", background: "white", + transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1]}px)` }}> - {this.renderContent(this.col)} + <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}>{this.renderContent(this.col)}</div>} + </Measure> </div> ); } @@ -411,7 +424,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.props.select(false); } } - this.headerOpen = false; } @computed @@ -500,9 +512,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { public get schemaToolbar() { return <div className="collectionSchemaView-toolbar"> <div className="collectionSchemaView-toolbar-item"> - <div id="preview-schema-checkbox-div"><input type="checkbox" - key={"Show Preview"} checked={this.previewWidth() !== 0} - onChange={this.toggleExpander} />Show Preview</div> + <div id="preview-schema-checkbox-div"> + <input type="checkbox" + key={"Show Preview"} checked={this.previewWidth() !== 0} + onChange={this.toggleExpander} />Show Preview</div> </div> </div>; } @@ -515,7 +528,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } this.pointerY = e.screenY; this.pointerX = e.screenX; - this.headerOpen = false; } onResizedChange = (newResized: Resize[], event: any) => { @@ -594,7 +606,7 @@ export interface SchemaTableProps { columns: SchemaHeaderField[]; documentKeys: any[]; headerIsEditing: boolean; - openHeader: (column: any, menu: any) => void; + openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; onPointerDown: (e: React.PointerEvent) => void; onResizedChange: (newResized: Resize[], event: any) => void; setColumns: (columns: SchemaHeaderField[]) => void; @@ -687,7 +699,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { const menuContent = <div><FontAwesomeIcon icon={icon} size="sm" /> {col.heading}</div>; const header = <div className="collectionSchemaView-header" - onClick={e => { this.props.openHeader(col, menuContent); }} + onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} style={{ background: col.color, padding: "4px", letterSpacing: "2px", diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 0fcc0f0b9..de1d60a09 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -28,7 +28,7 @@ export class LinkMenu extends React.Component<Props> { @action onClick = (e: PointerEvent) => { - if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { + if (this._linkMenuRef?.contains(e.target as any)) { DocumentLinksButton.EditLink = undefined; } } |