QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 16:14:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Browse Source 
Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
Maxime Beauchemin
2025-06-20 13:38:58 -07:00
committed by GitHub
parent 2cc1ef88c8
commit dd129fa403
1267 changed files with 32958 additions and 23592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
superset-frontend/src/explore/components/DataTableControl/index.tsx
View File

@@ -29,19 +29,16 @@ import {
} from '@superset-ui/core';
import { Column } from 'react-table';
import { debounce } from 'lodash';
import { Input } from 'src/components/Input';
import {
BOOL_FALSE_DISPLAY,
BOOL_TRUE_DISPLAY,
NULL_DISPLAY,
SLOW_DEBOUNCE,
} from 'src/constants';
import { Radio } from 'src/components/Radio';
import { Icons } from 'src/components/Icons';
import Button from 'src/components/Button';
import Popover from 'src/components/Popover';
Constants,
Button,
Icons,
Input,
Popover,
Radio,
} from '@superset-ui/core/components';
import { CopyToClipboard } from 'src/components';
import { prepareCopyToClipboardTabularData } from 'src/utils/common';
import CopyToClipboard from 'src/components/CopyToClipboard';
import { getTimeColumns, setTimeColumns } from './utils';
export const CellNull = styled('span')`
@@ -49,15 +46,15 @@ export const CellNull = styled('span')`
`;
export const CopyButton = styled(Button)`
font-size: ${({ theme }) => theme.typography.sizes.s}px;
font-size: ${({ theme }) => theme.fontSizeSM}px;
// needed to override button's first-of-type margin: 0
&& {
margin: 0 ${({ theme }) => theme.gridUnit * 2}px;
margin: 0 ${({ theme }) => theme.sizeUnit * 2}px;
}
i {
padding: 0 ${({ theme }) => theme.gridUnit}px;
padding: 0 ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -105,7 +102,10 @@ export const FilterInput = ({
}, []);
const theme = useTheme();
const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
const debouncedChangeHandler = debounce(
onChangeHandler,
Constants.SLOW_DEBOUNCE,
);
return (
<Input
prefix={<Icons.SearchOutlined iconSize="l" />}
@@ -116,7 +116,7 @@ export const FilterInput = ({
}}
css={css`
width: 200px;
margin-right: ${theme.gridUnit * 2}px;
margin-right: ${theme.sizeUnit * 2}px;
`}
ref={inputRef}
/>
@@ -156,13 +156,13 @@ const FormatPickerContainer = styled.div`
display: flex;
flex-direction: column;
padding: ${({ theme }) => `${theme.gridUnit * 4}px`};
padding: ${({ theme }) => `${theme.sizeUnit * 4}px`};
`;
const FormatPickerLabel = styled.span`
font-size: ${({ theme }) => theme.typography.sizes.s}px;
font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.base};
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const DataTableTemporalHeaderCell = ({
@@ -188,7 +188,9 @@ const DataTableTemporalHeaderCell = ({
const overlayContent = useMemo(
() =>
datasourceId ? ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
<FormatPickerContainer onClick={e => e.stopPropagation()}>
<FormatPickerContainer
onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
>
{/* hack to disable click propagation from popover content to table header, which triggers sorting column */}
<FormatPickerLabel>{t('Column Formatting')}</FormatPickerLabel>
<FormatPicker
@@ -215,8 +217,8 @@ const DataTableTemporalHeaderCell = ({
<Icons.SettingOutlined
iconSize="m"
iconColor={theme.colors.grayscale.light1}
css={{ marginRight: `${theme.gridUnit}px` }}
onClick={e => e.stopPropagation()}
css={{ marginRight: `${theme.sizeUnit}px` }}
onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
/>
</Popover>
{columnName}
@@ -330,13 +332,13 @@ export const useTableColumns = (
),
Cell: ({ value }) => {
if (value === true) {
return BOOL_TRUE_DISPLAY;
return Constants.BOOL_TRUE_DISPLAY;
}
if (value === false) {
return BOOL_FALSE_DISPLAY;
return Constants.BOOL_FALSE_DISPLAY;
}
if (value === null) {
return <CellNull>{NULL_DISPLAY}</CellNull>;
return <CellNull>{Constants.NULL_DISPLAY}</CellNull>;
}
if (
colType === GenericDataType.Temporal &&