You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by su...@apache.org on 2020/11/09 22:24:13 UTC
[incubator-superset] branch master updated: feat(dashboard): leaner
filter indicator panel with wrapped text (#11592)
This is an automated email from the ASF dual-hosted git repository.
suddjian pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 5be1dbe feat(dashboard): leaner filter indicator panel with wrapped text (#11592)
5be1dbe is described below
commit 5be1dbe28b612f3b38f92ff2b115fd0733e4ac0c
Author: David Aaron Suddjian <18...@users.noreply.github.com>
AuthorDate: Mon Nov 9 14:23:43 2020 -0800
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
---
.../components/FiltersBadge/DetailsPanel.tsx | 42 ++++++++++++----------
.../dashboard/components/FiltersBadge/Styles.tsx | 31 ++++++++++------
2 files changed, 44 insertions(+), 29 deletions(-)
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
index 9246a2c..0030f35 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
@@ -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}
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 4039fdc..c76bb4e 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -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;
+`;