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