You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by gr...@apache.org on 2019/11/13 08:16:24 UTC
[incubator-superset] branch scoped-filter-modal-improvement created
(now e96cfd4)
This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a change to branch scoped-filter-modal-improvement
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git.
at e96cfd4 improve modal scroll
This branch includes the following new commits:
new e96cfd4 improve modal scroll
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-superset] 01/01: improve modal scroll
Posted by gr...@apache.org.
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 e96cfd444c0035f36968f61d6f7c9bb9e38e2c5d
Author: Grace <gr...@airbnb.com>
AuthorDate: Wed Nov 13 00:15:02 2019 -0800
improve modal scroll
---
.../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,
},