mirror of https://github.com/apache/superset.git
feat(dashboard): leaner filter indicator panel with wrapped text (#11592)
* feat(dashboard): leaner filter indicator panel with wrapped text * remove summary from filter indicator panel
This commit is contained in:
parent
0c6aeef927
commit
5be1dbe28b
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { t, tn, useTheme } from '@superset-ui/core';
|
||||
import { t, useTheme } from '@superset-ui/core';
|
||||
import {
|
||||
SearchOutlined,
|
||||
MinusCircleFilled,
|
||||
|
@ -25,7 +25,15 @@ import {
|
|||
ExclamationCircleFilled,
|
||||
} from '@ant-design/icons';
|
||||
import { Collapse, Popover } from 'src/common/components/index';
|
||||
import { Indent, Item, ItemIcon, Panel, Reset, Title, Summary } from './Styles';
|
||||
import {
|
||||
Indent,
|
||||
Item,
|
||||
ItemIcon,
|
||||
Panel,
|
||||
Reset,
|
||||
Title,
|
||||
FilterValue,
|
||||
} from './Styles';
|
||||
import { Indicator } from './selectors';
|
||||
|
||||
export interface IndicatorProps {
|
||||
|
@ -39,11 +47,14 @@ const Indicator = ({
|
|||
}: IndicatorProps) => {
|
||||
return (
|
||||
<Item onClick={() => onClick([...path, `LABEL-${column}`])}>
|
||||
<ItemIcon>
|
||||
<SearchOutlined />
|
||||
</ItemIcon>
|
||||
<Title bold>{name.toUpperCase()}</Title>
|
||||
{value.length ? `: ${value.join(', ')}` : ''}
|
||||
<Title bold>
|
||||
<ItemIcon>
|
||||
<SearchOutlined />
|
||||
</ItemIcon>
|
||||
{name.toUpperCase()}
|
||||
{value.length ? ': ' : ''}
|
||||
</Title>
|
||||
<FilterValue>{value.length ? value.join(', ') : ''}</FilterValue>
|
||||
</Item>
|
||||
);
|
||||
};
|
||||
|
@ -93,16 +104,8 @@ const DetailsPanelPopover = ({
|
|||
}
|
||||
}
|
||||
|
||||
const total =
|
||||
appliedIndicators.length +
|
||||
incompatibleIndicators.length +
|
||||
unsetIndicators.length;
|
||||
|
||||
const content = (
|
||||
<Panel>
|
||||
<Summary>
|
||||
{tn('%d Scoped Filter', '%d Scoped Filters', total, total)}
|
||||
</Summary>
|
||||
<Reset>
|
||||
<Collapse
|
||||
ghost
|
||||
|
@ -115,7 +118,7 @@ const DetailsPanelPopover = ({
|
|||
header={
|
||||
<Title bold>
|
||||
<CheckCircleFilled color={theme.colors.success.base} />{' '}
|
||||
{t('Applied (%d)', appliedIndicators.length)}
|
||||
{t('Applied Filters (%d)', appliedIndicators.length)}
|
||||
</Title>
|
||||
}
|
||||
>
|
||||
|
@ -136,7 +139,10 @@ const DetailsPanelPopover = ({
|
|||
header={
|
||||
<Title bold>
|
||||
<ExclamationCircleFilled color={theme.colors.alert.base} />{' '}
|
||||
{t('Incompatible (%d)', incompatibleIndicators.length)}
|
||||
{t(
|
||||
'Incompatible Filters (%d)',
|
||||
incompatibleIndicators.length,
|
||||
)}
|
||||
</Title>
|
||||
}
|
||||
>
|
||||
|
@ -157,7 +163,7 @@ const DetailsPanelPopover = ({
|
|||
header={
|
||||
<Title bold>
|
||||
<MinusCircleFilled />{' '}
|
||||
{t('Unset (%d)', unsetIndicators.length)}
|
||||
{t('Unset Filters (%d)', unsetIndicators.length)}
|
||||
</Title>
|
||||
}
|
||||
disabled={!unsetIndicators.length}
|
||||
|
|
|
@ -87,17 +87,14 @@ export interface TitleProps {
|
|||
}
|
||||
|
||||
export const Title = styled.span<TitleProps>`
|
||||
position: relative;
|
||||
margin-right: ${({ theme }) => theme.gridUnit}px;
|
||||
font-weight: ${({ bold, theme }) => {
|
||||
return bold ? theme.typography.weights.bold : 'auto';
|
||||
}};
|
||||
`;
|
||||
|
||||
export const Summary = styled.div`
|
||||
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||
`;
|
||||
|
||||
export const ItemIcon = styled.i`
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
@ -106,20 +103,26 @@ export const ItemIcon = styled.i`
|
|||
|
||||
export const Item = styled.button`
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:hover > i {
|
||||
display: block;
|
||||
& i svg {
|
||||
color: transparent;
|
||||
margin-right: ${({ theme }) => theme.gridUnit}px;
|
||||
}
|
||||
|
||||
&:hover i svg {
|
||||
color: inherit;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -134,6 +137,12 @@ export const Indent = styled.div`
|
|||
|
||||
export const Panel = styled.div`
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
max-width: 300px;
|
||||
overflow-x: hidden;
|
||||
`;
|
||||
|
||||
export const FilterValue = styled.div`
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
`;
|
||||
|
|
Loading…
Reference in New Issue