From 5be1dbe28b612f3b38f92ff2b115fd0733e4ac0c Mon Sep 17 00:00:00 2001
From: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Date: Mon, 9 Nov 2020 14:23:43 -0800
Subject: [PATCH] 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 +++++++++++--------
.../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 9246a2cae2..0030f35bb7 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 (
- onClick([...path, `LABEL-${column}`])}>
-
-
-
- {name.toUpperCase()}
- {value.length ? `: ${value.join(', ')}` : ''}
+
+
+
+
+ {name.toUpperCase()}
+ {value.length ? ': ' : ''}
+
+ {value.length ? value.join(', ') : ''}
);
};
@@ -93,16 +104,8 @@ const DetailsPanelPopover = ({
}
}
- const total =
- appliedIndicators.length +
- incompatibleIndicators.length +
- unsetIndicators.length;
-
const content = (
-
- {tn('%d Scoped Filter', '%d Scoped Filters', total, total)}
-
{' '}
- {t('Applied (%d)', appliedIndicators.length)}
+ {t('Applied Filters (%d)', appliedIndicators.length)}
}
>
@@ -136,7 +139,10 @@ const DetailsPanelPopover = ({
header={
{' '}
- {t('Incompatible (%d)', incompatibleIndicators.length)}
+ {t(
+ 'Incompatible Filters (%d)',
+ incompatibleIndicators.length,
+ )}
}
>
@@ -157,7 +163,7 @@ const DetailsPanelPopover = ({
header={
{' '}
- {t('Unset (%d)', unsetIndicators.length)}
+ {t('Unset Filters (%d)', unsetIndicators.length)}
}
disabled={!unsetIndicators.length}
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 4039fdc033..c76bb4e2b8 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`
+ 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;
+`;