mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
refactor: icon to icons for nativeFilter components (#15528)
* initial commit for cascade filters * migrate delete icon * Update superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx Co-authored-by: Geido <60598000+geido@users.noreply.github.com> * add uniform style for icons * fix lint Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
This commit is contained in:
parent
c732d2dada
commit
58cda8f8d6
@ -17,9 +17,9 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import { styled, t, DataMask } from '@superset-ui/core';
|
import { styled, t, DataMask, css, SupersetTheme } from '@superset-ui/core';
|
||||||
import Popover from 'src/components/Popover';
|
import Popover from 'src/components/Popover';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import { Pill } from 'src/dashboard/components/FiltersBadge/Styles';
|
import { Pill } from 'src/dashboard/components/FiltersBadge/Styles';
|
||||||
import { DataMaskStateWithId } from 'src/dataMask/types';
|
import { DataMaskStateWithId } from 'src/dataMask/types';
|
||||||
import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl';
|
import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl';
|
||||||
@ -61,10 +61,10 @@ const StyledTitle = styled.h4`
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledIcon = styled(Icon)`
|
const IconStyles = (theme: SupersetTheme) => css`
|
||||||
margin-right: ${({ theme }) => theme.gridUnit}px;
|
margin-right: ${theme.gridUnit}px;
|
||||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
color: ${theme.colors.grayscale.dark1};
|
||||||
width: ${({ theme }) => theme.gridUnit * 4}px;
|
width: ${theme.gridUnit * 4}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledPill = styled(Pill)`
|
const StyledPill = styled(Pill)`
|
||||||
@ -163,10 +163,17 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
|
|||||||
const title = (
|
const title = (
|
||||||
<StyledTitleBox>
|
<StyledTitleBox>
|
||||||
<StyledTitle>
|
<StyledTitle>
|
||||||
<StyledIcon name="edit" />
|
<Icons.Edit
|
||||||
|
iconSize="l"
|
||||||
|
css={(theme: SupersetTheme) => IconStyles(theme)}
|
||||||
|
/>
|
||||||
{t('Select parent filters')} ({allFilters.length})
|
{t('Select parent filters')} ({allFilters.length})
|
||||||
</StyledTitle>
|
</StyledTitle>
|
||||||
<StyledIcon name="close" onClick={() => onVisibleChange(false)} />
|
<Icons.Close
|
||||||
|
iconSize="l"
|
||||||
|
css={(theme: SupersetTheme) => IconStyles(theme)}
|
||||||
|
onClick={() => onVisibleChange(false)}
|
||||||
|
/>
|
||||||
</StyledTitleBox>
|
</StyledTitleBox>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -207,7 +214,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
|
|||||||
<>
|
<>
|
||||||
{filter.cascadeChildren.length !== 0 && (
|
{filter.cascadeChildren.length !== 0 && (
|
||||||
<StyledPill onClick={() => onVisibleChange(true)}>
|
<StyledPill onClick={() => onVisibleChange(true)}>
|
||||||
<Icon name="filter" /> {allFilters.length}
|
<Icons.Filter iconSize="m" /> {allFilters.length}
|
||||||
</StyledPill>
|
</StyledPill>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
@ -20,7 +20,7 @@ import { PlusOutlined } from '@ant-design/icons';
|
|||||||
import { styled, t } from '@superset-ui/core';
|
import { styled, t } from '@superset-ui/core';
|
||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import { LineEditableTabs } from 'src/components/Tabs';
|
import { LineEditableTabs } from 'src/components/Tabs';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import { FilterRemoval } from './types';
|
import { FilterRemoval } from './types';
|
||||||
import { REMOVAL_DELAY_SECS } from './utils';
|
import { REMOVAL_DELAY_SECS } from './utils';
|
||||||
|
|
||||||
@ -51,7 +51,7 @@ export const StyledAddFilterBox = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const StyledTrashIcon = styled(Icon)`
|
export const StyledTrashIcon = styled(Icons.Trash)`
|
||||||
color: ${({ theme }) => theme.colors.grayscale.light3};
|
color: ${({ theme }) => theme.colors.grayscale.light3};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -124,14 +124,13 @@ const FilterTabsContainer = styled(LineEditableTabs)`
|
|||||||
margin: 0 ${theme.gridUnit * 2}px 0 0;
|
margin: 0 ${theme.gridUnit * 2}px 0 0;
|
||||||
padding: ${theme.gridUnit}px
|
padding: ${theme.gridUnit}px
|
||||||
${theme.gridUnit * 2}px;
|
${theme.gridUnit * 2}px;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&-active {
|
&-active {
|
||||||
color: ${theme.colors.grayscale.dark1};
|
color: ${theme.colors.grayscale.dark1};
|
||||||
border-radius: ${theme.borderRadius}px;
|
border-radius: ${theme.borderRadius}px;
|
||||||
background-color: ${theme.colors.secondary.light4};
|
background-color: ${theme.colors.secondary.light4};
|
||||||
|
|
||||||
.ant-tabs-tab-remove > svg {
|
.ant-tabs-tab-remove > span {
|
||||||
color: ${theme.colors.grayscale.base};
|
color: ${theme.colors.grayscale.base};
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
@ -238,9 +237,7 @@ const FilterTabs: FC<FilterTabsProps> = ({
|
|||||||
</FilterTabTitle>
|
</FilterTabTitle>
|
||||||
}
|
}
|
||||||
key={id}
|
key={id}
|
||||||
closeIcon={
|
closeIcon={removedFilters[id] ? <></> : <StyledTrashIcon />}
|
||||||
removedFilters[id] ? <></> : <StyledTrashIcon name="trash" />
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
Loading…
Reference in New Issue
Block a user