diff options
4 files changed, 133 insertions, 18 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 83164a82a..1d0ab459d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -11,11 +11,12 @@ .schema-row { display: flex; flex-direction: row; + max-height: 70px; + overflow: auto; .schema-column-header, .schema-table-cell, .row-menu { - min-width: 50px; border: 1px solid $medium-gray; padding: 5px; overflow: hidden; @@ -31,6 +32,34 @@ flex-direction: row; justify-content: space-between; align-items: center; + padding: 0; + + .schema-column-title { + flex-grow: 2; + margin: 5px; + } + + .schema-header-menu { + margin: 5px; + } + + .schema-column-resizer { + height: 100%; + width: 3px; + cursor: ew-resize; + + &:hover { + background-color: $light-blue; + } + } + + .schema-column-resizer.right { + align-self: flex-end; + } + + .schema-column-resizer.left { + align-self: flex-start; + } } } @@ -41,6 +70,7 @@ display: flex; flex-direction: row; justify-content: center; + min-width: 50px; } .row-cells { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4d96d5f7e..a09d2722c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -2,25 +2,25 @@ import React = require('react'); import { action, computed, observable, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } from '../../../../fields/Doc'; +import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; +import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; import { Cast, StrCast } from '../../../../fields/Types'; +import { ImageField } from '../../../../fields/URLField'; +import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../../Utils'; +import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; -import { CollectionSubView } from '../CollectionSubView'; -import './CollectionSchemaView.scss'; -import { SchemaColumnHeader } from './SchemaColumnHeader'; -import { SchemaRowBox } from './SchemaRowBox'; import { SelectionManager } from '../../../util/SelectionManager'; import { undoBatch } from '../../../util/UndoManager'; -import { EditableView } from '../../EditableView'; -import { returnEmptyString } from '../../../../Utils'; -import { Docs, DocUtils } from '../../../documents/Documents'; -import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; -import { Id } from '../../../../fields/FieldSymbols'; -import { RichTextField } from '../../../../fields/RichTextField'; -import { ImageField } from '../../../../fields/URLField'; +import { EditableView } from '../../EditableView'; +import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; +import { CollectionSubView } from '../CollectionSubView'; +import './CollectionSchemaView.scss'; +import { SchemaColumnHeader } from './SchemaColumnHeader'; +import { SchemaRowBox } from './SchemaRowBox'; export enum ColumnType { Number, @@ -38,16 +38,18 @@ export class CollectionSchemaView extends CollectionSubView() { private _lastSelectedRow: number | undefined; private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; + private _minColWidth: number = 120; @observable _rowMenuWidth: number = 100; @observable _selectedDocs: ObservableSet = new ObservableSet<SchemaRowBox>(); @observable _isDragging: boolean = false; + @observable _displayColumnWidths: number[] | undefined; @computed get columnKeys() { return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys); } - @computed get columnWidths() { + @computed get storedColumnWidths() { return Cast( this.layoutDoc.columnWidths, listSpec('number'), @@ -55,6 +57,10 @@ export class CollectionSchemaView extends CollectionSubView() { ); } + @computed get displayColumnWidths() { + return this._displayColumnWidths ?? this.storedColumnWidths; + } + @undoBatch @action changeColumnKey = (index: number, newKey: string) => { @@ -81,6 +87,51 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action + startResize = (e: any, index: number, left: boolean) => { + this._displayColumnWidths = this.storedColumnWidths; + setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index, left), this.finishResize, emptyFunction); + }; + + @action + resizeColumn = (e: PointerEvent, index: number, left: boolean) => { + if (this._displayColumnWidths) { + let shrinking; + let growing; + + let change = e.movementX; + + if (left && index !== 0) { + growing = change < 0 ? index : index - 1; + shrinking = change < 0 ? index - 1 : index; + } else if (!left && index !== this.columnKeys.length - 1) { + growing = change > 0 ? index : index + 1; + shrinking = change > 0 ? index + 1 : index; + } + + if (shrinking === undefined || growing === undefined) return true; + + change = Math.abs(change); + if (this._displayColumnWidths[shrinking] - change < this._minColWidth) { + change = this._displayColumnWidths[shrinking] - this._minColWidth; + } + + this._displayColumnWidths[shrinking] -= change; + this._displayColumnWidths[growing] += change; + + return false; + } + return true; + }; + + // @undoBatch + @action + finishResize = () => { + console.log('finished'); + this.layoutDoc.columnWidths = new List<number>(this._displayColumnWidths); + this._displayColumnWidths = undefined; + }; + + @action selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { const ctrl = e.ctrlKey || e.metaKey; const shift = e.shiftKey; @@ -136,6 +187,21 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action + onExternalDrop = async (e: React.DragEvent): Promise<void> => { + console.log('hello'); + super.onExternalDrop( + e, + {}, + undoBatch( + action(docus => { + this._isDragging = false; + docus.map((doc: Doc) => this.addDocument(doc)); + }) + ) + ); + }; + + @action startDrag = (e: React.PointerEvent, doc: Doc) => { if (!this._selectedDocs.has(doc)) { this._selectedDocs.clear(); @@ -251,11 +317,20 @@ export class CollectionSchemaView extends CollectionSubView() { this._ref = ele; this.createDashEventsTarget(ele); }} - onPointerDown={() => this._selectedDocs.clear()}> + onPointerDown={() => this._selectedDocs.clear()} + onDrop={this.onExternalDrop.bind(this)}> <div className="schema-table"> <div className="schema-header-row"> {this.columnKeys.map((key, index) => ( - <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} addColumn={this.addColumn} removeColumn={this.removeColumn} /> + <SchemaColumnHeader + columnIndex={index} + columnKeys={this.columnKeys} + columnWidths={this.displayColumnWidths} + changeColumnKey={this.changeColumnKey} + addColumn={this.addColumn} + removeColumn={this.removeColumn} + resizeColumn={this.startResize} + /> ))} </div> <div className="schema-table-content"> @@ -267,7 +342,7 @@ export class CollectionSchemaView extends CollectionSubView() { ContainingCollectionView={this.props.CollectionView} rowIndex={index} columnKeys={this.columnKeys} - columnWidths={this.columnWidths} + columnWidths={this.displayColumnWidths} rowMenuWidth={this._rowMenuWidth} selectedRows={this._selectedDocs} selectRow={this.selectRow} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index f93a3d13d..bee76bb24 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -12,6 +12,7 @@ export interface SchemaColumnHeaderProps { changeColumnKey: (index: number, newKey: string) => boolean; addColumn: (index: number) => void; removeColumn: (index: number) => void; + resizeColumn: (e: any, index: number, left: boolean) => void; } @observer @@ -23,7 +24,10 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> render() { return ( <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}> - <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> + <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div> + <div className="schema-column-title"> + <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> + </div> <div className="schema-header-menu"> <div @@ -41,6 +45,8 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> <FontAwesomeIcon icon="trash" /> </div> </div> + + <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div> </div> ); } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 3d1fa0ee2..661056553 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -6,7 +6,7 @@ import { Doc } from '../../../../fields/Doc'; import { undoBatch } from '../../../util/UndoManager'; import { ViewBoxBaseComponent } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; -import { FieldViewProps } from '../../nodes/FieldView'; +import { FieldView, FieldViewProps } from '../../nodes/FieldView'; import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; @@ -26,6 +26,10 @@ export interface SchemaRowBoxProps extends FieldViewProps { @observer export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(SchemaRowBox, fieldKey); + } + private _ref: HTMLDivElement | null = null; isSelected = () => this.props.selectedRows.has(this.props.Document); |