mirror of
https://github.com/apache/superset.git
synced 2026-05-10 02:15:50 +00:00
feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)
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:
committed by
GitHub
parent
2cc1ef88c8
commit
dd129fa403
@@ -30,24 +30,26 @@ import {
|
||||
} from '@superset-ui/core';
|
||||
import { getTemporalColumns } from '@superset-ui/chart-controls';
|
||||
import { getUrlParam } from 'src/utils/urlUtils';
|
||||
import { Dropdown } from 'src/components/Dropdown';
|
||||
import { Menu } from 'src/components/Menu';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { Icons } from 'src/components/Icons';
|
||||
import {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Button,
|
||||
ModalTrigger,
|
||||
} from '@superset-ui/core/components';
|
||||
import {
|
||||
ChangeDatasourceModal,
|
||||
DatasourceModal,
|
||||
} from 'src/components/Datasource';
|
||||
import Button from 'src/components/Button';
|
||||
import ErrorAlert from 'src/components/ErrorMessage/ErrorAlert';
|
||||
import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
|
||||
ErrorAlert,
|
||||
} from 'src/components';
|
||||
import { Menu } from '@superset-ui/core/components/Menu';
|
||||
import { Icons } from '@superset-ui/core/components/Icons';
|
||||
import WarningIconWithTooltip from '@superset-ui/core/components/WarningIconWithTooltip';
|
||||
import { URL_PARAMS } from 'src/constants';
|
||||
import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
|
||||
import {
|
||||
userHasPermission,
|
||||
isUserAdmin,
|
||||
} from 'src/dashboard/util/permissionUtils';
|
||||
import ModalTrigger from 'src/components/ModalTrigger';
|
||||
import ViewQueryModalFooter from 'src/explore/components/controls/ViewQueryModalFooter';
|
||||
import ViewQuery from 'src/explore/components/controls/ViewQuery';
|
||||
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
|
||||
@@ -76,15 +78,15 @@ const Styles = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
padding: ${({ theme }) => 4 * theme.gridUnit}px;
|
||||
padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.colorSplit};
|
||||
padding: ${({ theme }) => 4 * theme.sizeUnit}px;
|
||||
padding-right: ${({ theme }) => 2 * theme.sizeUnit}px;
|
||||
}
|
||||
.error-alert {
|
||||
margin: ${({ theme }) => 2 * theme.gridUnit}px;
|
||||
margin: ${({ theme }) => 2 * theme.sizeUnit}px;
|
||||
}
|
||||
.antd5-dropdown-trigger {
|
||||
margin-left: ${({ theme }) => 2 * theme.gridUnit}px;
|
||||
.ant-dropdown-trigger {
|
||||
margin-left: ${({ theme }) => 2 * theme.sizeUnit}px;
|
||||
}
|
||||
.btn-group .open .dropdown-toggle {
|
||||
box-shadow: none;
|
||||
@@ -93,32 +95,30 @@ const Styles = styled.div`
|
||||
}
|
||||
}
|
||||
i.angle {
|
||||
color: ${({ theme }) => theme.colors.primary.base};
|
||||
color: ${({ theme }) => theme.colorPrimary};
|
||||
}
|
||||
svg.datasource-modal-trigger {
|
||||
color: ${({ theme }) => theme.colors.primary.base};
|
||||
color: ${({ theme }) => theme.colorPrimary};
|
||||
cursor: pointer;
|
||||
}
|
||||
.title-select {
|
||||
flex: 1 1 100%;
|
||||
display: inline-block;
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light3};
|
||||
padding: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
padding: ${({ theme }) => theme.sizeUnit * 2}px 0px;
|
||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.datasource-svg {
|
||||
margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
|
||||
margin-right: ${({ theme }) => 2 * theme.sizeUnit}px;
|
||||
flex: none;
|
||||
}
|
||||
span[aria-label='dataset-physical'] {
|
||||
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||
}
|
||||
span[aria-label='more'] {
|
||||
color: ${({ theme }) => theme.colors.primary.base};
|
||||
color: ${({ theme }) => theme.colorPrimary};
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -403,9 +403,9 @@ class DatasourceControl extends PureComponent {
|
||||
<Tooltip title={healthCheckMessage}>
|
||||
<Icons.WarningOutlined
|
||||
css={css`
|
||||
margin-left: ${theme.gridUnit * 2}px;
|
||||
margin-left: ${theme.sizeUnit * 2}px;
|
||||
`}
|
||||
iconColor={theme.colors.warning.base}
|
||||
iconColor={theme.colorWarning}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
@@ -444,19 +444,27 @@ class DatasourceControl extends PureComponent {
|
||||
{isMissingDatasource && !isMissingParams && (
|
||||
<div className="error-alert">
|
||||
<ErrorAlert
|
||||
level="warning"
|
||||
type="warning"
|
||||
errorType={t('Missing dataset')}
|
||||
description={
|
||||
descriptionPre={false}
|
||||
descriptionDetailsCollapsed={false}
|
||||
descriptionDetails={
|
||||
<>
|
||||
{t('The dataset linked to this chart may have been deleted.')}
|
||||
<Button
|
||||
buttonStyle="primary"
|
||||
onClick={() =>
|
||||
this.handleMenuItemClick({ key: CHANGE_DATASET })
|
||||
}
|
||||
>
|
||||
{t('Swap dataset')}
|
||||
</Button>
|
||||
<p>
|
||||
{t(
|
||||
'The dataset linked to this chart may have been deleted.',
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
<Button
|
||||
buttonStyle="warning"
|
||||
onClick={() =>
|
||||
this.handleMenuItemClick({ key: CHANGE_DATASET })
|
||||
}
|
||||
>
|
||||
{t('Swap dataset')}
|
||||
</Button>
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user