Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

Issue 256, 257, 608 - Add conditional styling capabilities #729

Merged
merged 36 commits into from
Apr 21, 2020
Merged

Issue 256, 257, 608 - Add conditional styling capabilities #729

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
edc3bf1
Support arrays for conditional styling `if`: row_index, header_index,…
Apr 6, 2020
a02c8d3
- Add support for `is_active` and `is_selected` conditional styling
Apr 6, 2020
09d7f53
remove useless check (cell & filter don't support active conditions)
Apr 6, 2020
6ce6ef6
Update CHANGELOG.md
Marc-Andre-Rivet Apr 6, 2020
4fa6feb
update unit tests
Apr 6, 2020
fe025ef
Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…
Apr 6, 2020
c843e7e
consider offset when calculating edges
Apr 7, 2020
6e007b3
selectedCells || [activeCell]
Apr 7, 2020
e8257d4
clean up
Apr 7, 2020
de55351
clean up tests
Apr 7, 2020
ee5b9ff
base style for active vs. selected
Apr 7, 2020
6f93020
only apply styles for active/selected cells when updating active/sele…
Apr 7, 2020
6a0bc64
inactive -> baseline -> active style
Apr 7, 2020
2af76ce
Change deprecated R.contains to R.includes
Apr 14, 2020
b6d6300
Merge branch 'dev' into style-active-focused-cell
Marc-Andre-Rivet Apr 14, 2020
43c00fb
refactor `is_selected` and `is_active` into `state: 'active'|'selected'`
Apr 14, 2020
56b29fb
Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…
Apr 14, 2020
1db84eb
Update src/dash-table/conditional/index.ts
Marc-Andre-Rivet Apr 14, 2020
df99bf6
update unit tests
Apr 14, 2020
622325b
Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…
Apr 14, 2020
ce95cfc
fix conditional styles regression
Apr 15, 2020
65df9b2
Merge branch 'dev' into style-active-focused-cell
Marc-Andre-Rivet Apr 16, 2020
254fb2c
Replace use of var(--accent) and var(--selected-background) for backg…
Apr 16, 2020
b8d482c
Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…
Apr 16, 2020
7252b03
fix bug with row_index and header_index handling + new test
Apr 17, 2020
53753e1
clean up visual tests
Apr 17, 2020
7e9601b
update edges unit cases
Apr 17, 2020
345918a
Use hard-coded values for IE11 / browsers that don't support variable…
Apr 17, 2020
bb1f6e5
missing `;`
Apr 17, 2020
8085950
active partially overrides selected
Apr 20, 2020
e6d05fb
Merge branch 'dev' into style-active-focused-cell
Marc-Andre-Rivet Apr 20, 2020
d387aae
Merge branch 'dev' into style-active-focused-cell
Marc-Andre-Rivet Apr 20, 2020
e3d6fca
Remove invalid check - object.length === 0 -> always `le` to offset
Apr 21, 2020
8350c64
Improving typing on `data` prop and related manipulations
Apr 21, 2020
b5065ef
Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…
Apr 21, 2020
22fc0ad
Merge branch 'dev' into style-active-focused-cell
Marc-Andre-Rivet Apr 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/core/environment/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import { Edge } from 'dash-table/derived/edges/type';
const DASH_DEBUG = 'dash_debug';
const DASH_LOG = 'dash_log';

const DEFAULT_EDGE: Edge = '1px solid #d3d3d3';
const ACTIVE_EDGE: Edge = '1px solid hotpink';

interface ISearchParams {
get: (key: string) => string | null;
}

export default class Environment {
private static readonly _supportsCssVariables = Boolean(window.CSS?.supports?.('.some-selector', 'var(--some-var)'));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoa, the optional chaining operator ?. was new to me as well 🤯 🤩
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup. Using all the new things! 😀

private static readonly _activeEdge: Edge = Environment._supportsCssVariables ? '1px solid var(--accent)' : '1px solid hotpink';

public static get searchParams(): ISearchParams {
return (
typeof URL !== 'undefined' &&
Expand All @@ -40,10 +40,14 @@ export default class Environment {
}

public static get defaultEdge(): Edge {
return DEFAULT_EDGE;
return '1px solid #d3d3d3';
}

public static get activeEdge(): Edge {
return ACTIVE_EDGE;
return Environment._activeEdge;
}

public static get supportsCssVariables(): boolean {
return Environment._supportsCssVariables;
}
}
1 change: 1 addition & 0 deletions src/dash-table/components/Table/Table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,6 +521,7 @@
--background-color-ellipses: rgb(253, 253, 253);
--faded-text: rgb(250, 250, 250);
--faded-text-header: rgb(180, 180, 180);
--selected-background: rgba(255, 65, 54, 0.2)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs a semicolon ;)

--faded-dropdown: rgb(240, 240, 240);
--muted: rgb(200, 200, 200);
}
Expand Down
5 changes: 4 additions & 1 deletion src/dash-table/derived/cell/wrapperStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import { IConvertedStyle, getDataCellStyle, getDataOpCellStyle } from '../style'
import { traverseMap2, shallowClone } from 'core/math/matrixZipMap';

import isActiveCell from 'dash-table/derived/cell/isActive';
import Environment from 'core/environment';

const SELECTED_CELL_STYLE = { backgroundColor: 'rgba(255, 65, 54, 0.2)' };
const SELECTED_CELL_STYLE = {
backgroundColor: Environment.supportsCssVariables ? 'var(--selected-background)' : 'rgba(255, 65, 54, 0.2)'
};

const partialGetter = (
columns: Columns,
Expand Down