From ca3868b494bfd00c0349424f622bb5010b0e1197 Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 9 Feb 2023 00:03:32 -0500 Subject: doc preview and arrow key movement --- .../collectionSchema/CollectionSchemaView.scss | 8 ++ .../collectionSchema/CollectionSchemaView.tsx | 136 ++++++++++++++++++--- .../collectionSchema/SchemaColumnHeader.tsx | 3 +- 3 files changed, 131 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 4fa5d80e2..bd0fc11b3 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -3,6 +3,8 @@ .collectionSchemaView { cursor: default; height: 100%; + display: flex; + flex-direction: row; .schema-table { background-color: $white; @@ -124,6 +126,12 @@ flex-direction: row; } } + + .schema-preview-divider { + height: 100%; + background: black; + cursor: ew-resize; + } } .schema-header-row, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4fb3f68c1..5d4777e12 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -8,7 +8,7 @@ import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, returnEmptyString, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SelectionManager } from '../../../util/SelectionManager'; @@ -23,6 +23,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { DefaultStyleProvider } from '../../StyleProvider'; export enum ColumnType { Number, @@ -43,10 +44,12 @@ export class CollectionSchemaView extends CollectionSubView() { private _minColWidth: number = 150; public static _rowMenuWidth: number = 100; + public static _previewDividerWidth: number = 4; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _rowEles: ObservableMap = new ObservableMap(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; + @observable _previewDoc: Doc | undefined; get documentKeys() { const docs = this.childDocs; @@ -63,6 +66,14 @@ export class CollectionSchemaView extends CollectionSubView() { return Array.from(Object.keys(keys)); } + @computed get previewWidth() { + return NumCast(this.props.Document.schemaPreviewWidth); + } + + @computed get tableWidth() { + return this.props.PanelWidth() - this.previewWidth - CollectionSchemaView._previewDividerWidth; + } + @computed get columnKeys() { return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys); } @@ -71,14 +82,14 @@ export class CollectionSchemaView extends CollectionSubView() { let widths = Cast( this.layoutDoc.columnWidths, listSpec('number'), - this.columnKeys.map(() => (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length) + this.columnKeys.map(() => (this.tableWidth - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length) ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); - if (totalWidth !== this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) { + if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) { widths = widths.map(w => { const proportion = w / totalWidth; - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); + return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth); }); } @@ -97,6 +108,42 @@ export class CollectionSchemaView extends CollectionSubView() { return BoolCast(this.layoutDoc.sortDesc); } + componentDidMount() { + document.addEventListener('keydown', this.onKeyDown); + } + + componentWillUnmount() { + document.removeEventListener('keydown', this.onKeyDown); + } + + @action + onKeyDown = (e: KeyboardEvent) => { + if (this._selectedDocs.size > 0) { + if (e.key == 'ArrowDown') { + const lastDoc = Array.from(this._selectedDocs.values()).lastElement(); + const lastIndex = this.childDocs.indexOf(lastDoc); + if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { + this._selectedDocs.clear(); + const newDoc = this.childDocs[lastIndex + 1]; + this._selectedDocs.add(newDoc); + SelectionManager.SelectSchemaViewDoc(newDoc); + this._previewDoc = newDoc; + } + } + if (e.key == 'ArrowUp') { + const firstDoc = Array.from(this._selectedDocs.values())[0]; + const firstIndex = this.childDocs.indexOf(firstDoc); + if (firstIndex > 0) { + this._selectedDocs.clear(); + const newDoc = this.childDocs[firstIndex - 1]; + this._selectedDocs.add(newDoc); + SelectionManager.SelectSchemaViewDoc(newDoc); + this._previewDoc = newDoc; + } + } + } + }; + @undoBatch @action setSort = (field: string, desc: boolean) => { @@ -134,10 +181,10 @@ export class CollectionSchemaView extends CollectionSubView() { } let currWidths = [...this.storedColumnWidths]; - const newColWidth = this.props.PanelWidth() / (currWidths.length + 1); + const newColWidth = this.tableWidth / (currWidths.length + 1); currWidths = currWidths.map(w => { - const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - newColWidth); + const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth); + return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth); }); currWidths.splice(index + 1, 0, newColWidth); this.layoutDoc.columnWidths = new List(currWidths); @@ -159,8 +206,8 @@ export class CollectionSchemaView extends CollectionSubView() { let currWidths = [...this.storedColumnWidths]; const removedColWidth = currWidths[index]; currWidths = currWidths.map(w => { - const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - removedColWidth); - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); + const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth - removedColWidth); + return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth); }); currWidths.splice(index, 1); this.layoutDoc.columnWidths = new List(currWidths); @@ -283,6 +330,12 @@ export class CollectionSchemaView extends CollectionSubView() { } else { SelectionManager.SelectSchemaViewDoc(undefined); } + + if (this._selectedDocs.size == 1) { + this._previewDoc = Array.from(this._selectedDocs)[0]; + } else { + this._previewDoc = undefined; + } }; @action @@ -346,6 +399,21 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; + onDividerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction); + }; + + @action + onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { + // const nativeWidth = this._previewCont!.getBoundingClientRect(); + // const minWidth = 40; + // const maxWidth = 1000; + // const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; + // const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; + this.props.Document.schemaPreviewWidth = this.previewWidth - delta[0]; + return false; + }; + @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; @@ -440,11 +508,14 @@ export class CollectionSchemaView extends CollectionSubView() { this._ref = ele; this.createDashEventsTarget(ele); }} - onPointerDown={action(() => { - this._selectedDocs.clear(); - })} onDrop={this.onExternalDrop.bind(this)}> -
+
{ + this._selectedDocs.clear(); + SelectionManager.SelectSchemaViewDoc(undefined); + this._previewDoc = undefined; + })}>
{this.columnKeys.map((key, index) => { @@ -467,7 +538,7 @@ export class CollectionSchemaView extends CollectionSubView() { ); })}
-
+
e.stopPropagation()}> {this.childDocs.map((doc: Doc, index: number) => { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; let dref: Opt; @@ -493,8 +564,43 @@ export class CollectionSchemaView extends CollectionSubView() { ); })}
+
- +
+ {this.previewWidth > 0 && ( +
+ {this._previewDoc && ( + this.previewWidth} + PanelHeight={this.props.PanelHeight} + isContentActive={returnTrue} + isDocumentActive={returnFalse} + ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0)} + docFilters={this.childDocFilters} + docRangeFilters={this.childDocRangeFilters} + searchFilterDocs={this.searchFilterDocs} + styleProvider={DefaultStyleProvider} + docViewPath={returnEmptyDoclist} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + addDocument={this.props.addDocument} + removeDocument={this.props.removeDocument} + whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + /> + )} +
+ )}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 9d5dfe507..2e303f91c 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -5,6 +5,7 @@ import { observer } from 'mobx-react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import './CollectionSchemaView.scss'; import { ColumnType } from './CollectionSchemaView'; +import { Colors } from 'browndash-components'; export interface SchemaColumnHeaderProps { columnKeys: string[]; @@ -253,7 +254,7 @@ export class SchemaColumnHeader extends React.Component }}>
-
+
this.toggleFilterMenu()}> -- cgit v1.2.3-70-g09d2