mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
refactor: icon to icons for controls (#15568)
* initial commit * Update DateFilterLabel.tsx
This commit is contained in:
parent
026eefdb36
commit
2be52c0659
@ -27,7 +27,7 @@ import {
|
|||||||
SortableElement,
|
SortableElement,
|
||||||
arrayMove,
|
arrayMove,
|
||||||
} from 'react-sortable-hoc';
|
} from 'react-sortable-hoc';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import {
|
import {
|
||||||
HeaderContainer,
|
HeaderContainer,
|
||||||
AddIconButton,
|
AddIconButton,
|
||||||
@ -156,11 +156,9 @@ class CollectionControl extends React.Component {
|
|||||||
<HeaderContainer>
|
<HeaderContainer>
|
||||||
<ControlHeader {...this.props} />
|
<ControlHeader {...this.props} />
|
||||||
<AddIconButton onClick={this.onAdd}>
|
<AddIconButton onClick={this.onAdd}>
|
||||||
<Icon
|
<Icons.PlusLarge
|
||||||
name="plus-large"
|
iconSize="s"
|
||||||
width={theme.gridUnit * 3}
|
iconColor={theme.colors.grayscale.light5}
|
||||||
height={theme.gridUnit * 3}
|
|
||||||
color={theme.colors.grayscale.light5}
|
|
||||||
/>
|
/>
|
||||||
</AddIconButton>
|
</AddIconButton>
|
||||||
</HeaderContainer>
|
</HeaderContainer>
|
||||||
|
@ -22,7 +22,6 @@ import { t, styled, supersetTheme } from '@superset-ui/core';
|
|||||||
|
|
||||||
import { Dropdown, Menu } from 'src/common/components';
|
import { Dropdown, Menu } from 'src/common/components';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import Icon from 'src/components/Icon';
|
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
|
import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
|
||||||
import DatasourceModal from 'src/datasource/DatasourceModal';
|
import DatasourceModal from 'src/datasource/DatasourceModal';
|
||||||
@ -93,6 +92,12 @@ const Styles = styled.div`
|
|||||||
margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
|
margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
|
||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
|
span[aria-label='dataset-physical'] {
|
||||||
|
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||||
|
}
|
||||||
|
span[aria-label='more-horiz'] {
|
||||||
|
color: ${({ theme }) => theme.colors.primary.base};
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CHANGE_DATASET = 'change_dataset';
|
const CHANGE_DATASET = 'change_dataset';
|
||||||
@ -190,7 +195,7 @@ class DatasourceControl extends React.PureComponent {
|
|||||||
return (
|
return (
|
||||||
<Styles data-test="datasource-control" className="DatasourceControl">
|
<Styles data-test="datasource-control" className="DatasourceControl">
|
||||||
<div className="data-container">
|
<div className="data-container">
|
||||||
<Icon name="dataset-physical" className="dataset-svg" />
|
<Icons.DatasetPhysical className="dataset-svg" />
|
||||||
{/* Add a tooltip only for long dataset names */}
|
{/* Add a tooltip only for long dataset names */}
|
||||||
{!isMissingDatasource && datasource.name.length > 25 ? (
|
{!isMissingDatasource && datasource.name.length > 25 ? (
|
||||||
<Tooltip title={datasource.name}>
|
<Tooltip title={datasource.name}>
|
||||||
@ -218,10 +223,9 @@ class DatasourceControl extends React.PureComponent {
|
|||||||
data-test="datasource-menu"
|
data-test="datasource-menu"
|
||||||
>
|
>
|
||||||
<Tooltip title={t('More dataset related options')}>
|
<Tooltip title={t('More dataset related options')}>
|
||||||
<Icon
|
<Icons.MoreHoriz
|
||||||
className="datasource-modal-trigger"
|
className="datasource-modal-trigger"
|
||||||
data-test="datasource-menu-trigger"
|
data-test="datasource-menu-trigger"
|
||||||
name="more-horiz"
|
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
@ -21,9 +21,9 @@ import rison from 'rison';
|
|||||||
import {
|
import {
|
||||||
SupersetClient,
|
SupersetClient,
|
||||||
styled,
|
styled,
|
||||||
supersetTheme,
|
|
||||||
t,
|
t,
|
||||||
TimeRangeEndpoints,
|
TimeRangeEndpoints,
|
||||||
|
useTheme,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
buildTimeRangeString,
|
buildTimeRangeString,
|
||||||
@ -39,7 +39,7 @@ import ControlHeader from 'src/explore/components/ControlHeader';
|
|||||||
import Label from 'src/components/Label';
|
import Label from 'src/components/Label';
|
||||||
import Popover from 'src/components/Popover';
|
import Popover from 'src/components/Popover';
|
||||||
import { Divider } from 'src/common/components';
|
import { Divider } from 'src/common/components';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import { Select } from 'src/components/Select';
|
import { Select } from 'src/components/Select';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
|
import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
|
||||||
@ -156,7 +156,7 @@ const ContentStyleWrapper = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const IconWrapper = styled.span`
|
const IconWrapper = styled.span`
|
||||||
svg {
|
span {
|
||||||
margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
|
margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
@ -281,6 +281,8 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
setFrame(option.value as FrameType);
|
setFrame(option.value as FrameType);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
const overlayConetent = (
|
const overlayConetent = (
|
||||||
<ContentStyleWrapper>
|
<ContentStyleWrapper>
|
||||||
<div className="control-label">{t('RANGE TYPE')}</div>
|
<div className="control-label">{t('RANGE TYPE')}</div>
|
||||||
@ -310,10 +312,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
{validTimeRange && <div>{evalResponse}</div>}
|
{validTimeRange && <div>{evalResponse}</div>}
|
||||||
{!validTimeRange && (
|
{!validTimeRange && (
|
||||||
<IconWrapper className="warning">
|
<IconWrapper className="warning">
|
||||||
<Icon
|
<Icons.ErrorSolidSmall iconColor={theme.colors.error.base} />
|
||||||
name="error-solid-small"
|
|
||||||
color={supersetTheme.colors.error.base}
|
|
||||||
/>
|
|
||||||
<span className="text error">{evalResponse}</span>
|
<span className="text error">{evalResponse}</span>
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
)}
|
)}
|
||||||
@ -345,7 +344,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
|
|
||||||
const title = (
|
const title = (
|
||||||
<IconWrapper>
|
<IconWrapper>
|
||||||
<Icon name="edit-alt" />
|
<Icons.EditAlt iconColor={theme.colors.grayscale.base} />
|
||||||
<span className="text">{t('Edit time range')}</span>
|
<span className="text">{t('Edit time range')}</span>
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user