diff options
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 31 |
1 files changed, 23 insertions, 8 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 966552cd2..c115fd34b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -104,6 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _highlightedCells: Array<HTMLDivElement> = []; @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>(); @observable _docs: Doc[] = []; + @observable _pauseSortHighlights: boolean = false; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -200,7 +201,7 @@ export class CollectionSchemaView extends CollectionSubView() { ) this._disposers.sortHighlight = reaction( () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCells], - () => {setTimeout(() => this.highlightSortedColumn(), 5)}, + () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 5)}, {fireImmediately: true} ) } @@ -497,9 +498,9 @@ export class CollectionSchemaView extends CollectionSubView() { highlightSortedColumn = (field?: string, descending?: boolean) => { let index = -1; let highlightColors: string[] = []; + const rowCount: number = this._rowEles.size + 1; if (field || this.sortField){ index = this.columnKeys.indexOf(field || this.sortField); - const rowCount: number = this._rowEles.size + 1; const increment: number = 100/rowCount; for (let i = 0; i < rowCount; ++i){ const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i); @@ -513,7 +514,7 @@ export class CollectionSchemaView extends CollectionSubView() { const cellEles = [ colRef, ...this.docsWithDrag.docs - .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)) + .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc))) .map(doc => this._rowEles.get(doc).children[1].children[i]), ]; const cellCount = cellEles.length; @@ -523,7 +524,7 @@ export class CollectionSchemaView extends CollectionSubView() { cellEles[ele].style.borderRight = style; } cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : ''; - cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; + if (!(cellCount < rowCount)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}` : ''; }); } @@ -896,8 +897,14 @@ export class CollectionSchemaView extends CollectionSubView() { this.setColumnSort(undefined); const field = this.columnKeys[index]; this._docs = this.sortDocs(field, false); - setTimeout(() => this.highlightSortedColumn(field, false), 20); - setTimeout(() => this.highlightSortedColumn(), 500); + this._pauseSortHighlights = true; + setTimeout(() => { + this.highlightSortedColumn(field, false); + setTimeout(() => { + this._pauseSortHighlights = false; + this.highlightSortedColumn(); + }, 480); + }, 20); }, icon: 'arrow-down-a-z',}); sortOptions.push({ @@ -906,8 +913,14 @@ export class CollectionSchemaView extends CollectionSubView() { this.setColumnSort(undefined); const field = this.columnKeys[index]; this._docs = this.sortDocs(field, true); - setTimeout(() => this.highlightSortedColumn(field, true), 20); - setTimeout(() => this.highlightSortedColumn(), 500); + this._pauseSortHighlights = true; + setTimeout(() => { + this.highlightSortedColumn(field, true); + setTimeout(() => { + this._pauseSortHighlights = false; + this.highlightSortedColumn(); + }, 480); + }, 20); }, icon: 'arrow-up-z-a'}); sortOptions.push({ @@ -915,6 +928,7 @@ export class CollectionSchemaView extends CollectionSubView() { event: () => { if (fieldSortedAsc){ this.setColumnSort(undefined); + this.highlightSortedColumn(); } else { this.sortDocs(this.columnKeys[index], false); this.setColumnSort(this.columnKeys[index], false); @@ -926,6 +940,7 @@ export class CollectionSchemaView extends CollectionSubView() { event: () => { if (fieldSortedDesc){ this.setColumnSort(undefined); + this.highlightSortedColumn(); } else { this.sortDocs(this.columnKeys[index], true); this.setColumnSort(this.columnKeys[index], true); |