Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add single select and inverse selection to numeric range (#16722) #17372

Merged
merged 7 commits into from
Dec 1, 2021
Merged

feat: Add single select and inverse selection to numeric range (#16722) #17372

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
562da7e
feat: add single select and inverse selection to numeric range (#16722)
mhoustonataegis Nov 3, 2021
4803ab2
Ignore invalid eslint errors regarding conditionally called hooks.
mhoustonataegis Nov 9, 2021
d08e280
Add license header to new file.
mhoustonataegis Nov 9, 2021
246afe6
Merge branch 'master' into matthewhouston/MinAndMaxRangeValues
mhoustonataegis Nov 15, 2021
e157fe4
Flipped the numerical range values for the minimum slider so that the…
mhoustonataegis Nov 29, 2021
af95d83
Resolved linting errors
mhoustonataegis Dec 1, 2021
8c1da02
Remove unnecessary important flag from css
mhoustonataegis Dec 1, 2021
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
37 changes: 35 additions & 2 deletions superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,39 @@ import { StatusMessage, StyledFormItem, FilterPluginStyle } from '../common';
import { getRangeExtraFormData } from '../../utils';
import { SingleValueType } from './SingleValueType';

const LIGHT_BLUE = '#99e7f0';
const DARK_BLUE = '#6dd3e3';
const LIGHT_GRAY = '#f5f5f5';
const DARK_GRAY = '#e1e1e1';

const StyledMinSlider = styled(Slider)<{
validateStatus?: 'error' | 'warning' | 'info';
}>`
${({ theme, validateStatus }) => `
.ant-slider-rail {
background-color: ${
validateStatus ? theme.colors[validateStatus]?.light1 : LIGHT_BLUE
};
}

.ant-slider-track {
background-color: ${LIGHT_GRAY} !important;
riahk marked this conversation as resolved.
Show resolved Hide resolved
}

&:hover {
.ant-slider-rail {
background-color: ${
validateStatus ? theme.colors[validateStatus]?.base : DARK_BLUE
};
}

.ant-slider-track {
background-color: ${DARK_GRAY} !important;
}
}
`}
`;

const Wrapper = styled.div<{ validateStatus?: 'error' | 'warning' | 'info' }>`
${({ theme, validateStatus }) => `
border: 1px solid transparent;
Expand Down Expand Up @@ -269,10 +302,10 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
/>
)}
{enableSingleMinValue && (
<Slider
<StyledMinSlider
validateStatus={filterState.validateStatus}
min={min}
max={max}
reverse
value={minMax[minIndex]}
tipFormatter={tipFormatter}
marks={marks}
Expand Down