This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch scoped-filter-modal-improvement
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 3eb8b3d04ec0e8551d7685b44864e72957e8d294
Author: Grace <grace....@airbnb.com>
AuthorDate: Wed Nov 13 00:34:35 2019 -0800
improve scroll inside modal
---
.../components/filterscope/FilterScopeSelector.jsx | 15 +++++----
.../filterscope/renderFilterFieldTreeNodes.jsx | 1 +
.../stylesheets/filter-scope-selector.less | 38 ++++++++++++++++------
.../src/dashboard/util/getFilterFieldNodesTree.js | 2 ++
4 files changed, 39 insertions(+), 17 deletions(-)
diff --git
a/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
index 9435d7b..6abd819 100644
---
a/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
+++
b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@@ -487,13 +487,13 @@ export default class FilterScopeSelector extends
React.PureComponent {
const { showSelector } = this.state;
return (
- <React.Fragment>
- <div className="filter-scope-container">
- <div className="filter-scope-header">
- <h4>{t('Configure filter scopes')}</h4>
- {showSelector && this.renderEditingFiltersName()}
- </div>
+ <div className="filter-scope-container">
+ <div className="filter-scope-header">
+ <h4>{t('Configure filter scopes')}</h4>
+ {showSelector && this.renderEditingFiltersName()}
+ </div>
+ <div className="filter-scope-body">
{!showSelector ? (
<div>{t('There are no filters in this dashboard.')}</div>
) : (
@@ -507,6 +507,7 @@ export default class FilterScopeSelector extends
React.PureComponent {
</div>
)}
</div>
+
<div className="dashboard-modal-actions-container">
<Button onClick={this.onClose}>{t('Close')}</Button>
{showSelector && (
@@ -515,7 +516,7 @@ export default class FilterScopeSelector extends
React.PureComponent {
</Button>
)}
</div>
- </React.Fragment>
+ </div>
);
}
}
diff --git
a/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
b/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
index 5ffd49e..5a3264c 100644
---
a/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
+++
b/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
@@ -49,6 +49,7 @@ export default function renderFilterFieldTreeNodes({ nodes,
activeKey }) {
return [
{
...root,
+ label: <span className="root">{root.label}</span>,
children,
},
];
diff --git
a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
index 6df2826..e1c59ea 100644
--- a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
+++ b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
@@ -19,14 +19,36 @@
@import "../../../stylesheets/less/cosmo/variables.less";
.filter-scope-container {
+ display: flex;
+ flex-direction: column;
+ height: 80%;
+ margin-right: -24px;
font-size: 14px;
.nav.nav-tabs {
border: none;
}
+
+ .filter-scope-body {
+ flex: 1;
+ max-height: calc(100% - 128px);
+ overflow-y: scroll;
+ }
+
+ .dashboard-modal-actions-container {
+ height: 64px;
+ border-top: 1px solid #ccc;
+ padding: 24px;
+ margin: 0 0 0 -24px;
+ }
}
.filter-scope-header {
+ height: 64px;
+ border-bottom: 1px solid #ccc;
+ padding-left: 24px;
+ margin-left: -24px;
+
h4 {
margin-top: 0;
}
@@ -46,13 +68,10 @@
}
.filters-scope-selector {
- margin: 10px -24px 20px;
display: flex;
flex-direction: row;
position: relative;
- border: 1px solid #ccc;
- border-left: none;
- border-right: none;
+ min-height: 100%;
a, a:active, a:hover {
color: @almost-black;
@@ -81,7 +100,7 @@
.filter-field-pane {
position: relative;
width: 40%;
- padding: 16px 16px 16px 24px;
+ padding: 16px 16px 16px 0;
border-right: 1px solid #ccc;
.filter-container {
@@ -108,6 +127,10 @@
}
.react-checkbox-tree {
+ .rct-title .root {
+ font-weight: bold;
+ }
+
.rct-text {
height: 40px;
}
@@ -161,10 +184,6 @@
&.root {
font-weight: 700;
}
-
- &.tab {
- font-weight: 700;
- }
}
.rct-checkbox {
@@ -196,7 +215,6 @@
.rct-title {
display: block;
- font-weight: bold;
}
// disable style from react-checkbox-trees.css
diff --git a/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
b/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
index 5d9b59e..b19d28c 100644
--- a/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
+++ b/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
@@ -20,6 +20,7 @@ import { t } from '@superset-ui/translation';
import { getDashboardFilterKey } from './getDashboardFilterKey';
import { ALL_FILTERS_ROOT } from './constants';
+import { DASHBOARD_ROOT_TYPE } from './componentTypes';
export default function getFilterFieldNodesTree({ dashboardFilters = {} }) {
const allFilters = Object.values(dashboardFilters).map(dashboardFilter => {
@@ -39,6 +40,7 @@ export default function getFilterFieldNodesTree({
dashboardFilters = {} }) {
return [
{
value: ALL_FILTERS_ROOT,
+ type: DASHBOARD_ROOT_TYPE,
label: t('All filters'),
children: allFilters,
},
