diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 31 |
1 files changed, 22 insertions, 9 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index ba2d2a764..df160a3a4 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -4,7 +4,7 @@ import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-component import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; +import { ClientUtils, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { AclPrivate, DocData } from '../../../../fields/DocSymbols'; @@ -101,7 +101,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colKeysFiltered: boolean = false; @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>(); @observable _highlightedCells: Array<HTMLDivElement> = []; - @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string>(); + @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>(); @observable _docs: Doc[] = []; // target HTMLelement portal for showing a popup menu to edit cell values. @@ -515,24 +515,37 @@ export class CollectionSchemaView extends CollectionSubView() { } removeCellHighlights = () => { - this._highlightedCells.forEach(cell => cell.style.border = ''); + this._highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';}); this._highlightedCells = []; } highlightCells = (text: string) => { this.removeCellHighlights(); - const randNum = (): number => {return Math.floor(Math.random() * (255 - 1));} - const randomRGBColor = (): string => { - const r = randNum(); const g = randNum(); const b = randNum(); // prettier-ignore - return `rgb(${r}, ${g}, ${b})`; + const randomRGBColor = (): string[] => { + let r; let g; let b; + do { + r = Math.floor(Math.random() * 256); + g = Math.floor(Math.random() * 256); + b = Math.floor(Math.random() * 256); + } while ((r + g + b) < 400 || (r + g + b) > 450); + + const rL = ClientUtils.lightenRGB(r, g, b, 60)[0]; + const gL = ClientUtils.lightenRGB(r, g, b, 60)[1]; + const bL = ClientUtils.lightenRGB(r, g, b, 60)[2]; + const backgroundRGB = {rL, gL, bL}; + + return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${backgroundRGB.rL}, ${backgroundRGB.gL}, ${backgroundRGB.bL})`); } const cellsToHighlight = this.findCellRefs(text); this._highlightedCells = [...cellsToHighlight]; this._highlightedCells.forEach(cell => { - if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, `solid 2px ${randomRGBColor()}`)} - cell.style.border = this._cellHighlightColors.get(cell); + const color = randomRGBColor(); + console.log('border: ' + color[0] + ' background: ' + color[1]) + if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, new Array<string>(`solid 2px ${color[0]}`, color[1]))} + cell.style.border = this._cellHighlightColors.get(cell)[0]; + cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1]; }); } |