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) 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"); diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx index 6e3821e23..a00fa59a2 100644 --- a/src/dash-table/components/CellFactory.tsx +++ b/src/dash-table/components/CellFactory.tsx @@ -63,7 +63,8 @@ export default class CellFactory { columns, relevantStyles, virtualized.data, - virtualized.offset + virtualized.offset, + selected_cells ); const dataOpStyles = this.dataOpStyles( 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 4d919b91e..3b6a69667 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; } @@ -257,10 +251,6 @@ td { background-color: inherit; - &.cell--selected { - background-color: var(--selected-background); - } - &.focused { margin: -1px; z-index: 200; @@ -367,7 +357,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); } diff --git a/src/dash-table/derived/cell/wrapperStyles.ts b/src/dash-table/derived/cell/wrapperStyles.ts index 764acf72f..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 } 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'; @@ -12,9 +12,10 @@ 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 => { + return R.addIndex(R.map)((datum, index) => R.addIndex(R.map)((column, columnIndex) => { const relevantStyles = R.map( s => s.style, R.filter( @@ -25,7 +26,11 @@ function getter( columnStyles ) ); - + 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 ? R.omit( BORDER_PROPERTIES_AND_FRAGMENTS, diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index f0c813578..3ba8334b6 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -33,9 +33,7 @@ class Wrappers { (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}` + 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 527dd3abe..2bba3adcf 100644 --- a/tests/visual/percy-storybook/Style.percy.tsx +++ b/tests/visual/percy-storybook/Style.percy.tsx @@ -134,5 +134,42 @@ 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 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: [ {