From 6a9708932e3f60ed682f7812257e31c163662e85 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Tue, 28 May 2019 10:47:05 -0400 Subject: [PATCH 01/18] clean up console.log --- generator/cssPropertiesGenerator.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/generator/cssPropertiesGenerator.js b/generator/cssPropertiesGenerator.js index 131f32a77..0ebffdc45 100644 --- a/generator/cssPropertiesGenerator.js +++ b/generator/cssPropertiesGenerator.js @@ -300,9 +300,6 @@ snakes.forEach(([snake, camel]) => map.set(snake, camel)); kebabs.forEach(([kebab, camel]) => map.set(kebab, camel)); camels.forEach(([camel]) => map.set(camel, camel)); -map.forEach((value, key) => console.log(value, key)); -console.log(map.size); - const fs = require('fs'); var stream1 = fs.createWriteStream("src/dash-table/derived/style/py2jsCssProperties.ts"); From 337d8931d77a00a73d3add6f00f0aa9f97374ef6 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Tue, 28 May 2019 10:49:19 -0400 Subject: [PATCH 02/18] background set by relevantStyles instead of css --- src/dash-table/components/CellFactory.tsx | 4 ++-- src/dash-table/derived/cell/wrapperStyles.ts | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx index 6e3821e23..fa6ab25e2 100644 --- a/src/dash-table/components/CellFactory.tsx +++ b/src/dash-table/components/CellFactory.tsx @@ -63,9 +63,9 @@ export default class CellFactory { columns, relevantStyles, virtualized.data, - virtualized.offset + virtualized.offset, + selected_cells ); - const dataOpStyles = this.dataOpStyles( (row_selectable ? 1 : 0) + (row_deletable ? 1 : 0), relevantStyles, diff --git a/src/dash-table/derived/cell/wrapperStyles.ts b/src/dash-table/derived/cell/wrapperStyles.ts index 764acf72f..445ef0ff9 100644 --- a/src/dash-table/derived/cell/wrapperStyles.ts +++ b/src/dash-table/derived/cell/wrapperStyles.ts @@ -2,7 +2,7 @@ import * as R from 'ramda'; import { CSSProperties } from 'react'; import { memoizeOneFactory } from 'core/memoizer'; -import { Data, VisibleColumns, IViewportOffset } from 'dash-table/components/Table/props'; +import { Data, VisibleColumns, IViewportOffset, SelectedCells } from 'dash-table/components/Table/props'; import { IConvertedStyle } from '../style'; import { BORDER_PROPERTIES_AND_FRAGMENTS } from '../edges/type'; @@ -12,7 +12,8 @@ function getter( columns: VisibleColumns, columnStyles: IConvertedStyle[], data: Data, - offset: IViewportOffset + offset: IViewportOffset, + selectedCells: SelectedCells ): Style[][] { return R.addIndex(R.map)((datum, index) => R.map(column => { const relevantStyles = R.map( @@ -25,7 +26,10 @@ function getter( columnStyles ) ); - + let isSelectedCell: boolean = selectedCells.some(cell => cell.row === index && cell.column_id === column.id); + if (isSelectedCell === true) { + relevantStyles.push({backgroundColor: 'var(--selected-background)'}); + } return relevantStyles.length ? R.omit( BORDER_PROPERTIES_AND_FRAGMENTS, From f9193f02354ef033c4601fa733270aca18627ab9 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Tue, 28 May 2019 10:50:51 -0400 Subject: [PATCH 03/18] test cases --- tests/visual/percy-storybook/Style.percy.tsx | 38 +++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/tests/visual/percy-storybook/Style.percy.tsx b/tests/visual/percy-storybook/Style.percy.tsx index 527dd3abe..0da8c3266 100644 --- a/tests/visual/percy-storybook/Style.percy.tsx +++ b/tests/visual/percy-storybook/Style.percy.tsx @@ -134,5 +134,41 @@ storiesOf('DashTable/Style type condition', module) if: { column_id: 'Humidity', filter: '{Humidity} eq 20' }, background_color: 'yellow' }]} - + />)) + .add('single selected cells on dark themes', () => ( ({ name: i, id: i }), + R.keysIn(data[0])) + } + content_style='grow' + style_table={{ + width: '100%' + }} + style_data_conditional={[{ + background_color: 'rgb(50, 50, 50)', + color: 'white', + font_family: 'arial' + }]} + />)) + .add('multiple selected cells on dark themes', () => ( ({ name: i, id: i }), + R.keysIn(data[0])) + } + content_style='grow' + style_table={{ + width: '100%' + }} + style_data_conditional={[{ + background_color: 'rgb(50, 50, 50)', + color: 'white', + font_family: 'arial' + }]} />)); \ No newline at end of file From 27b26c722816a020e0111b8960fb62b9df68a825 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Tue, 28 May 2019 10:56:37 -0400 Subject: [PATCH 04/18] clean up selected-row --- src/dash-table/components/Table/Table.less | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index 4d919b91e..14e60df45 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -244,12 +244,6 @@ } } - .selected-row { - td, th { - background-color: var(--selected-row); - } - } - tr { background-color: white; } @@ -367,7 +361,6 @@ --faded-text-header: rgb(180, 180, 180); --selected-background: rgba(255, 65, 54, 0.2); --faded-dropdown: rgb(240, 240, 240); - --selected-row: #fff0ff; --muted: rgb(200, 200, 200); } From d97979d9842c0b186062ac8fdcce5b570272538e Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Tue, 28 May 2019 11:07:28 -0400 Subject: [PATCH 05/18] clean up css --- src/dash-table/components/Table/Table.less | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index 14e60df45..463513e64 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -251,9 +251,6 @@ td { background-color: inherit; - &.cell--selected { - background-color: var(--selected-background); - } &.focused { margin: -1px; From 0e6d73b51c92e4d3af835f166a98638550209fe4 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Tue, 28 May 2019 12:28:01 -0400 Subject: [PATCH 06/18] update CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66a40111a..ed6c5c157 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). [#434](https://github.com/plotly/dash-table/issues/434) - Fix CSS borders propeties overwrite style_* borders properties. +[#435](https://github.com/plotly/dash-table/issues/434) +- selected_cells background color is set through styling pipeline / derivations. + ## [3.7.0] - 2019-05-15 ### Added [#397](https://github.com/plotly/dash-table/pull/397), [#410](https://github.com/plotly/dash-table/pull/410) From 25573076281c4c77baac230b9d1b4e0af93aa8f0 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Wed, 29 May 2019 10:02:50 -0400 Subject: [PATCH 07/18] use column index instead of column id --- src/dash-table/derived/cell/wrapperStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/dash-table/derived/cell/wrapperStyles.ts b/src/dash-table/derived/cell/wrapperStyles.ts index 445ef0ff9..8ad3952ba 100644 --- a/src/dash-table/derived/cell/wrapperStyles.ts +++ b/src/dash-table/derived/cell/wrapperStyles.ts @@ -15,7 +15,7 @@ function getter( offset: IViewportOffset, selectedCells: SelectedCells ): Style[][] { - return R.addIndex(R.map)((datum, index) => R.map(column => { + return R.addIndex(R.map)((datum, index) => R.addIndex(R.map)((column, columnIndex) => { const relevantStyles = R.map( s => s.style, R.filter( @@ -26,7 +26,7 @@ function getter( columnStyles ) ); - let isSelectedCell: boolean = selectedCells.some(cell => cell.row === index && cell.column_id === column.id); + let isSelectedCell: boolean = selectedCells.some(cell => cell.row === index && cell.column === columnIndex); if (isSelectedCell === true) { relevantStyles.push({backgroundColor: 'var(--selected-background)'}); } From 338c1ac512d4a8ccb30a2cb8c21ed4204871890e Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Wed, 29 May 2019 11:07:19 -0400 Subject: [PATCH 08/18] add selected cells for active cells --- tests/visual/percy-storybook/DashTable.percy.tsx | 1 + tests/visual/percy-storybook/Style.percy.tsx | 5 +++-- tests/visual/percy-storybook/fixtures.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/tests/visual/percy-storybook/DashTable.percy.tsx b/tests/visual/percy-storybook/DashTable.percy.tsx index a39afdddb..70fb9477a 100644 --- a/tests/visual/percy-storybook/DashTable.percy.tsx +++ b/tests/visual/percy-storybook/DashTable.percy.tsx @@ -229,6 +229,7 @@ storiesOf('DashTable/Hidden Columns', module) id='table' data={dataA2J} columns={hiddenColumns} + active_cell={makeCell(1, 1, dataA2J, hiddenColumns)} selected_cells={makeSelection([[1, 1], [1, 2], [2, 1], [2, 2]], dataA2J, hiddenColumns)} style_data_conditional={style_data_conditional} />)); diff --git a/tests/visual/percy-storybook/Style.percy.tsx b/tests/visual/percy-storybook/Style.percy.tsx index 0da8c3266..2bba3adcf 100644 --- a/tests/visual/percy-storybook/Style.percy.tsx +++ b/tests/visual/percy-storybook/Style.percy.tsx @@ -139,6 +139,7 @@ storiesOf('DashTable/Style type condition', module) id='styling-11' data={data} selected_cells={[{row: 1, column: 1, column_id: 'Region'}]} + active_cell={{row: 1, column: 1}} columns={R.map( i => ({ name: i, id: i }), R.keysIn(data[0])) @@ -156,8 +157,8 @@ storiesOf('DashTable/Style type condition', module) .add('multiple selected cells on dark themes', () => ( ({ name: i, id: i }), R.keysIn(data[0])) diff --git a/tests/visual/percy-storybook/fixtures.ts b/tests/visual/percy-storybook/fixtures.ts index 19dc6eac5..5072a1366 100644 --- a/tests/visual/percy-storybook/fixtures.ts +++ b/tests/visual/percy-storybook/fixtures.ts @@ -410,6 +410,7 @@ export default [ id: 'table', editable: true, selected_cells: [[1, 1], [1, 2], [1, 3], [2, 1], [2, 2], [2, 3], [3, 1], [3, 2], [3, 3]], + active_cell: [1, 1], columns: [ { name: 'Column 1', @@ -444,6 +445,7 @@ export default [ id: 'table', editable: true, selected_cells: [[1, 1], [1, 2], [1, 3], [2, 1], [2, 2], [2, 3], [3, 1], [3, 2], [3, 3]], + active_cell: [1, 1], merge_duplicate_headers: true, columns: [ { From 8989ee063cb714f756108e770072a5f809d3d359 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Wed, 29 May 2019 14:19:58 -0400 Subject: [PATCH 09/18] clean up selected cell css --- src/dash-table/components/CellFactory.tsx | 3 +-- src/dash-table/components/Table/Dropdown.css | 5 ----- src/dash-table/components/Table/Table.less | 4 ++-- src/dash-table/derived/cell/wrappers.tsx | 8 +------- 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx index fa6ab25e2..5d7d7d253 100644 --- a/src/dash-table/components/CellFactory.tsx +++ b/src/dash-table/components/CellFactory.tsx @@ -96,8 +96,7 @@ export default class CellFactory { active_cell, columns, virtualized.data, - virtualized.offset, - selected_cells + virtualized.offset ); const cellContents = this.cellContents( diff --git a/src/dash-table/components/Table/Dropdown.css b/src/dash-table/components/Table/Dropdown.css index 88b288954..9d7c375ac 100644 --- a/src/dash-table/components/Table/Dropdown.css +++ b/src/dash-table/components/Table/Dropdown.css @@ -113,8 +113,3 @@ .dash-spreadsheet .Select-control { padding-left: 2px; } - -.dash-spreadsheet .cell--selected .Select-control { - background-color: var(--selected-background); - border-radius: 0; -} diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index 463513e64..2bbe47b89 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -392,8 +392,8 @@ overflow-x: visible; } - .dash-spreadsheet-inner :not(.cell--selected) tr:hover, - tr:hover input :not(.cell--selected) { + .dash-spreadsheet-inner tr:hover, + tr:hover { background-color: var(--hover); } diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index f0c813578..7c401603f 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -3,11 +3,10 @@ import React, { MouseEvent } from 'react'; import { memoizeOne } from 'core/memoizer'; import memoizerCache from 'core/cache/memoizer'; -import { Data, IVisibleColumn, VisibleColumns, ICellCoordinates, SelectedCells, Datum, ColumnId, IViewportOffset, Presentation, ICellFactoryProps } from 'dash-table/components/Table/props'; +import { Data, IVisibleColumn, VisibleColumns, ICellCoordinates, Datum, ColumnId, IViewportOffset, Presentation, ICellFactoryProps } from 'dash-table/components/Table/props'; import Cell from 'dash-table/components/Cell'; import derivedCellEventHandlerProps, { Handler } from 'dash-table/derived/cell/eventHandlerProps'; import isActiveCell from 'dash-table/derived/cell/isActive'; -import isSelectedCell from 'dash-table/derived/cell/isSelected'; export default (propsFn: () => ICellFactoryProps) => new Wrappers(propsFn).get; @@ -27,20 +26,15 @@ class Wrappers { columns: VisibleColumns, data: Data, offset: IViewportOffset, - selectedCells: SelectedCells ) => R.addIndex(R.map)( (_, rowIndex) => R.addIndex(R.map)( (column, columnIndex) => { const active = isActiveCell(activeCell, rowIndex + offset.rows, columnIndex + offset.columns); - const selected = isSelectedCell(selectedCells, rowIndex + offset.rows, columnIndex + offset.columns); - const isDropdown = column.presentation === Presentation.Dropdown; - const classes = 'dash-cell' + ` column-${columnIndex}` + (active ? ' focused' : '') + - (selected ? ' cell--selected' : '') + (isDropdown ? ' dropdown' : ''); return this.wrapper.get(rowIndex, columnIndex)( From 91526ed14cb9ae5a82659fc2e22689441a574387 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Thu, 30 May 2019 10:03:03 -0400 Subject: [PATCH 10/18] linting --- src/dash-table/derived/cell/wrappers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index 7c401603f..fac9a711f 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -25,7 +25,7 @@ class Wrappers { activeCell: ICellCoordinates | undefined, columns: VisibleColumns, data: Data, - offset: IViewportOffset, + offset: IViewportOffset ) => R.addIndex(R.map)( (_, rowIndex) => R.addIndex(R.map)( (column, columnIndex) => { From 889e77e0681d42596c7ea7372f7d6fa88ed245f1 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Thu, 30 May 2019 14:16:14 -0400 Subject: [PATCH 11/18] keep selected--cell --- src/dash-table/components/CellFactory.tsx | 3 ++- src/dash-table/components/Table/Dropdown.css | 5 +++++ src/dash-table/components/Table/Table.less | 9 ++++++--- src/dash-table/derived/cell/wrappers.tsx | 12 +++++++++++- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx index 5d7d7d253..fa6ab25e2 100644 --- a/src/dash-table/components/CellFactory.tsx +++ b/src/dash-table/components/CellFactory.tsx @@ -96,7 +96,8 @@ export default class CellFactory { active_cell, columns, virtualized.data, - virtualized.offset + virtualized.offset, + selected_cells ); const cellContents = this.cellContents( diff --git a/src/dash-table/components/Table/Dropdown.css b/src/dash-table/components/Table/Dropdown.css index 9d7c375ac..88b288954 100644 --- a/src/dash-table/components/Table/Dropdown.css +++ b/src/dash-table/components/Table/Dropdown.css @@ -113,3 +113,8 @@ .dash-spreadsheet .Select-control { padding-left: 2px; } + +.dash-spreadsheet .cell--selected .Select-control { + background-color: var(--selected-background); + border-radius: 0; +} diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index 2bbe47b89..b1a00b44b 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -251,7 +251,10 @@ td { background-color: inherit; - + &.cell--selected { + background-color: var(--selected-background); + } + &.focused { margin: -1px; z-index: 200; @@ -392,8 +395,8 @@ overflow-x: visible; } - .dash-spreadsheet-inner tr:hover, - tr:hover { + .dash-spreadsheet-inner :not(.cell--selected) tr:hover, + tr:hover input :not(.cell--selected) { background-color: var(--hover); } diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index fac9a711f..9ccc0c645 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -3,10 +3,11 @@ import React, { MouseEvent } from 'react'; import { memoizeOne } from 'core/memoizer'; import memoizerCache from 'core/cache/memoizer'; -import { Data, IVisibleColumn, VisibleColumns, ICellCoordinates, Datum, ColumnId, IViewportOffset, Presentation, ICellFactoryProps } from 'dash-table/components/Table/props'; +import { Data, IVisibleColumn, VisibleColumns, ICellCoordinates, SelectedCells, Datum, ColumnId, IViewportOffset, Presentation, ICellFactoryProps } from 'dash-table/components/Table/props'; import Cell from 'dash-table/components/Cell'; import derivedCellEventHandlerProps, { Handler } from 'dash-table/derived/cell/eventHandlerProps'; import isActiveCell from 'dash-table/derived/cell/isActive'; +import isSelectedCell from 'dash-table/derived/cell/isSelected'; export default (propsFn: () => ICellFactoryProps) => new Wrappers(propsFn).get; @@ -25,16 +26,25 @@ class Wrappers { activeCell: ICellCoordinates | undefined, columns: VisibleColumns, data: Data, +<<<<<<< HEAD offset: IViewportOffset +======= + offset: IViewportOffset, + selectedCells: SelectedCells +>>>>>>> parent of 8989ee0... clean up selected cell css ) => R.addIndex(R.map)( (_, rowIndex) => R.addIndex(R.map)( (column, columnIndex) => { const active = isActiveCell(activeCell, rowIndex + offset.rows, columnIndex + offset.columns); + const selected = isSelectedCell(selectedCells, rowIndex + offset.rows, columnIndex + offset.columns); + const isDropdown = column.presentation === Presentation.Dropdown; + const classes = 'dash-cell' + ` column-${columnIndex}` + (active ? ' focused' : '') + + (selected ? ' cell--selected' : '') + (isDropdown ? ' dropdown' : ''); return this.wrapper.get(rowIndex, columnIndex)( From b29e1529ae21f54e5cf94f6409fc0896cce4fb27 Mon Sep 17 00:00:00 2001 From: Haylee Luu Date: Thu, 30 May 2019 14:17:29 -0400 Subject: [PATCH 12/18] fix local conflicts --- src/dash-table/derived/cell/wrappers.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index 9ccc0c645..7c65c7716 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -26,12 +26,8 @@ class Wrappers { activeCell: ICellCoordinates | undefined, columns: VisibleColumns, data: Data, -<<<<<<< HEAD offset: IViewportOffset -======= - offset: IViewportOffset, selectedCells: SelectedCells ->>>>>>> parent of 8989ee0... clean up selected cell css ) => R.addIndex(R.map)( (_, rowIndex) => R.addIndex(R.map)( (column, columnIndex) => { From 1d6465c5838bdca4d9a22c65eac335a93996fa19 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Thu, 30 May 2019 14:22:48 -0400 Subject: [PATCH 13/18] whitespace --- src/dash-table/derived/cell/wrappers.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index 7c65c7716..3ba8334b6 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -26,16 +26,14 @@ class Wrappers { activeCell: ICellCoordinates | undefined, columns: VisibleColumns, data: Data, - offset: IViewportOffset + offset: IViewportOffset, selectedCells: SelectedCells ) => R.addIndex(R.map)( (_, rowIndex) => R.addIndex(R.map)( (column, columnIndex) => { const active = isActiveCell(activeCell, rowIndex + offset.rows, columnIndex + offset.columns); const selected = isSelectedCell(selectedCells, rowIndex + offset.rows, columnIndex + offset.columns); - const isDropdown = column.presentation === Presentation.Dropdown; - const classes = 'dash-cell' + ` column-${columnIndex}` + From 3fc3997cf9a9b18a61a23676c85b62401e7116de Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Thu, 30 May 2019 14:48:40 -0400 Subject: [PATCH 14/18] new line --- src/dash-table/components/CellFactory.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx index fa6ab25e2..a00fa59a2 100644 --- a/src/dash-table/components/CellFactory.tsx +++ b/src/dash-table/components/CellFactory.tsx @@ -66,6 +66,7 @@ export default class CellFactory { virtualized.offset, selected_cells ); + const dataOpStyles = this.dataOpStyles( (row_selectable ? 1 : 0) + (row_deletable ? 1 : 0), relevantStyles, From c6c319c14a08fc79d4f23e6e861c58ae699d8811 Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Fri, 31 May 2019 10:07:11 -0400 Subject: [PATCH 15/18] Ramnda function --- src/dash-table/derived/cell/wrapperStyles.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/dash-table/derived/cell/wrapperStyles.ts b/src/dash-table/derived/cell/wrapperStyles.ts index 8ad3952ba..81a61420a 100644 --- a/src/dash-table/derived/cell/wrapperStyles.ts +++ b/src/dash-table/derived/cell/wrapperStyles.ts @@ -2,7 +2,7 @@ import * as R from 'ramda'; import { CSSProperties } from 'react'; import { memoizeOneFactory } from 'core/memoizer'; -import { Data, VisibleColumns, IViewportOffset, SelectedCells } from 'dash-table/components/Table/props'; +import { Data, VisibleColumns, IViewportOffset, SelectedCells, ICellCoordinates } from 'dash-table/components/Table/props'; import { IConvertedStyle } from '../style'; import { BORDER_PROPERTIES_AND_FRAGMENTS } from '../edges/type'; @@ -26,8 +26,9 @@ function getter( columnStyles ) ); - let isSelectedCell: boolean = selectedCells.some(cell => cell.row === index && cell.column === columnIndex); - if (isSelectedCell === true) { + const matchCell = (cell: ICellCoordinates) => cell.row === index && cell.column === columnIndex; + const isSelectedCell: boolean = R.any(matchCell)(selectedCells); + if (isSelectedCell) { relevantStyles.push({backgroundColor: 'var(--selected-background)'}); } return relevantStyles.length ? From 30645661b4277fc81311acc1fa459a413589dfdf Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Fri, 31 May 2019 10:28:08 -0400 Subject: [PATCH 16/18] clean up css --- src/dash-table/components/Table/Dropdown.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/dash-table/components/Table/Dropdown.css b/src/dash-table/components/Table/Dropdown.css index 88b288954..3579ac634 100644 --- a/src/dash-table/components/Table/Dropdown.css +++ b/src/dash-table/components/Table/Dropdown.css @@ -114,7 +114,6 @@ padding-left: 2px; } -.dash-spreadsheet .cell--selected .Select-control { +.dash-spreadsheet .Select-control { background-color: var(--selected-background); - border-radius: 0; } From 1dbf19d892c28f2954d24f9060aec8caff4d3bcf Mon Sep 17 00:00:00 2001 From: alinastarkov Date: Fri, 31 May 2019 10:28:15 -0400 Subject: [PATCH 17/18] clean up css --- src/dash-table/components/Table/Table.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index b1a00b44b..3b6a69667 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -251,10 +251,6 @@ td { background-color: inherit; - &.cell--selected { - background-color: var(--selected-background); - } - &.focused { margin: -1px; z-index: 200; From bf93f53d1a57f7433118af21c9e5bf51e8446f79 Mon Sep 17 00:00:00 2001 From: Haylee Luu Date: Fri, 31 May 2019 12:03:12 -0400 Subject: [PATCH 18/18] clean up css --- src/dash-table/components/Table/Dropdown.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/dash-table/components/Table/Dropdown.css b/src/dash-table/components/Table/Dropdown.css index 3579ac634..9d7c375ac 100644 --- a/src/dash-table/components/Table/Dropdown.css +++ b/src/dash-table/components/Table/Dropdown.css @@ -113,7 +113,3 @@ .dash-spreadsheet .Select-control { padding-left: 2px; } - -.dash-spreadsheet .Select-control { - background-color: var(--selected-background); -}