You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yo...@apache.org on 2021/01/23 05:25:11 UTC
[superset] branch master updated: fix(native-filters): Improve UI
for long native filters names (#12524)
This is an automated email from the ASF dual-hosted git repository.
yongjiezhao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new b37598c fix(native-filters): Improve UI for long native filters names (#12524)
b37598c is described below
commit b37598cc9723d727562eaa5d50e2c3dbc38a926c
Author: Agata Stawarz <47...@users.noreply.github.com>
AuthorDate: Sat Jan 23 06:24:15 2021 +0100
fix(native-filters): Improve UI for long native filters names (#12524)
* Fix UI for long native filters names
* Add Filter width const
* Refactor Filter Bar and Config Modal
* Break word for long Filter Control titles
---
.../components/nativeFilters/FilterBar.tsx | 3 +-
.../components/nativeFilters/FilterConfigModal.tsx | 43 ++++++++++++++++------
2 files changed, 34 insertions(+), 12 deletions(-)
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx
index abd189a..0b45d95 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx
@@ -157,10 +157,11 @@ const StyledCascadeChildrenList = styled.ul`
`;
const StyledFilterControlTitle = styled.h4`
+ width: 100%;
font-size: ${({ theme }) => theme.typography.sizes.s}px;
color: ${({ theme }) => theme.colors.grayscale.dark1};
margin: 0;
- text-transform: uppercase;
+ overflow-wrap: break-word;
`;
const StyledFilterControlTitleBox = styled.div`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx
index 4310ac7..7980d79 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx
@@ -19,7 +19,8 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { findLastIndex, uniq } from 'lodash';
import shortid from 'shortid';
-import { DeleteFilled, PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
+import Icon from 'src/components/Icon';
import { styled, t } from '@superset-ui/core';
import { Form } from 'src/common/components';
import { StyledModal } from 'src/common/components/Modal';
@@ -34,6 +35,7 @@ import { CancelConfirmationAlert } from './CancelConfirmationAlert';
// how long to show the "undo" button when removing a filter
const REMOVAL_DELAY_SECS = 5;
+const FILTER_WIDTH = 200;
const StyledModalBody = styled.div`
display: flex;
@@ -59,16 +61,21 @@ const StyledSpan = styled.span`
const FilterTabs = styled(LineEditableTabs)`
// extra selector specificity:
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
- min-width: 200px;
- margin-left: 0;
- padding: 0 ${({ theme }) => theme.gridUnit * 2}px
- ${({ theme }) => theme.gridUnit}px;
+ min-width: ${FILTER_WIDTH}px;
+ margin: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0;
+ padding: ${({ theme }) => theme.gridUnit}px
+ ${({ theme }) => theme.gridUnit * 2}px;
&:hover,
&-active {
color: ${({ theme }) => theme.colors.grayscale.dark1};
border-radius: ${({ theme }) => theme.borderRadius}px;
- background-color: ${({ theme }) => theme.colors.grayscale.light2};
+ background-color: ${({ theme }) => theme.colors.secondary.light4};
+
+ .ant-tabs-tab-remove > svg {
+ color: ${({ theme }) => theme.colors.grayscale.base};
+ transition: all 0.3s;
+ }
}
}
@@ -85,8 +92,6 @@ const FilterTabTitle = styled.span`
display: flex;
flex-direction: row;
justify-content: space-between;
- padding: ${({ theme }) => theme.gridUnit}px
- ${({ theme }) => theme.gridUnit * 2}px 0 0;
@keyframes tabTitleRemovalAnimation {
0%,
@@ -107,6 +112,12 @@ const FilterTabTitle = styled.span`
}
`;
+const StyledFilterTitle = styled.span`
+ width: ${FILTER_WIDTH}px;
+ white-space: normal;
+ color: ${({ theme }) => theme.colors.grayscale.dark1};
+`;
+
const StyledAddFilterBox = styled.div`
color: ${({ theme }) => theme.colors.primary.dark1};
text-align: left;
@@ -120,6 +131,10 @@ const StyledAddFilterBox = styled.div`
}
`;
+const StyledTrashIcon = styled(Icon)`
+ color: ${({ theme }) => theme.colors.grayscale.light3};
+`;
+
type FilterRemoval =
| null
| {
@@ -523,11 +538,11 @@ export function FilterConfigModal({
<FilterTabTitle
className={removedFilters[id] ? 'removed' : ''}
>
- <div>
+ <StyledFilterTitle>
{removedFilters[id]
? t('(Removed)')
: getFilterTitle(id)}
- </div>
+ </StyledFilterTitle>
{removedFilters[id] && (
<StyledSpan
role="button"
@@ -540,7 +555,13 @@ export function FilterConfigModal({
</FilterTabTitle>
}
key={id}
- closeIcon={removedFilters[id] ? <></> : <DeleteFilled />}
+ closeIcon={
+ removedFilters[id] ? (
+ <></>
+ ) : (
+ <StyledTrashIcon name="trash" />
+ )
+ }
>
<FilterConfigForm
form={form}