pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: icon to icons for nativeFilter components (#15528)

Browse Source 
* 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:
Phillip Kelley-Dotson 2021-07-07 14:13:44 -07:00 committed by GitHub
parent c732d2dada
commit 58cda8f8d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
View File

@ -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>
)} )}
</> </>

11
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
View File

@ -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