This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch feature--dashboard-scoped-filter
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to
refs/heads/feature--dashboard-scoped-filter by this push:
new 26e6b6f [dashboard scoped filter] Improve scrollbar inside modal
(#8553)
26e6b6f is described below
commit 26e6b6f39f18c7cfc6b183f2164a2dd9cd224a87
Author: Grace Guo <[email protected]>
AuthorDate: Thu Nov 14 17:28:06 2019 -0800
[dashboard scoped filter] Improve scrollbar inside modal (#8553)
* improve scroll inside modal
* make left pane and right pane scroll separately
* fix review comments
---
.../components/filterscope/FilterScopeSelector.jsx | 19 +++++----
.../filterscope/renderFilterFieldTreeNodes.jsx | 1 +
.../stylesheets/filter-scope-selector.less | 48 +++++++++++++++++-----
.../src/dashboard/util/getFilterFieldNodesTree.js | 2 +
4 files changed, 51 insertions(+), 19 deletions(-)
diff --git
a/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
index 9435d7b..aeab376 100644
---
a/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
+++
b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@@ -487,15 +487,17 @@ 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>
+ <div className="warning-message">
+ {t('There are no filters in this dashboard.')}
+ </div>
) : (
<div className="filters-scope-selector">
<div className={cx('filter-field-pane multi-edit-mode')}>
@@ -507,6 +509,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 +518,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..0f65c7f 100644
--- a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
+++ b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
@@ -19,14 +19,44 @@
@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);
+
+ .filter-field-pane,
+ .filter-scope-pane {
+ overflow-y: scroll;
+ }
+ }
+
+ .dashboard-modal-actions-container {
+ height: 64px;
+ border-top: 1px solid #ccc;
+ padding: 24px;
+ margin: 0 0 0 -24px;
+ }
+
+ .warning-message {
+ padding: 24px;
+ }
}
.filter-scope-header {
+ height: 64px;
+ border-bottom: 1px solid #ccc;
+ padding-left: 24px;
+ margin-left: -24px;
+
h4 {
margin-top: 0;
}
@@ -46,13 +76,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;
+ height: 100%;
a, a:active, a:hover {
color: @almost-black;
@@ -81,7 +108,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 +135,10 @@
}
.react-checkbox-tree {
+ .rct-title .root {
+ font-weight: bold;
+ }
+
.rct-text {
height: 40px;
}
@@ -159,11 +190,7 @@
}
&.root {
- font-weight: 700;
- }
-
- &.tab {
- font-weight: 700;
+ font-weight: bold;
}
}
@@ -196,7 +223,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,
},
