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