You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/01/25 13:12:02 UTC
[superset] 26/38: fix: explore page style fix,
remove unnecessary scroll bars (#12649)
This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch 1.0
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 41505bb2d410ab81cff5d00449b9a965f76069c4
Author: Jesse Yang <je...@airbnb.com>
AuthorDate: Fri Jan 22 09:18:13 2021 -0800
fix: explore page style fix, remove unnecessary scroll bars (#12649)
* fix: various style touch on Explore page
* More style fixes
* Force 100% height for sidebars
* Fix linting
---
superset-frontend/src/components/Select/styles.tsx | 26 +++++++++++++---------
.../explore/components/ControlPanelsContainer.jsx | 26 ++++++++++++----------
.../src/explore/components/DataTablesPane.tsx | 1 +
.../src/explore/components/ExploreChartPanel.jsx | 7 +++---
.../explore/components/ExploreViewContainer.jsx | 7 ++++--
5 files changed, 38 insertions(+), 29 deletions(-)
diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx
index 9358021..c990416 100644
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@@ -161,10 +161,8 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
) => {
const isPseudoFocused = isFocused && !menuIsOpen;
let borderColor = colors.grayBorder;
- if (isPseudoFocused) {
+ if (isPseudoFocused || menuIsOpen) {
borderColor = colors.grayBorderDark;
- } else if (menuIsOpen) {
- borderColor = `${colors.grayBorderDark} ${colors.grayBorder} ${colors.grayBorderLight}`;
}
return [
provider,
@@ -185,22 +183,28 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
`,
];
},
- menu: (provider, { theme: { borderRadius, zIndex, colors } }) => [
+ menu: (provider, { theme: { zIndex } }) => [
+ provider,
+ css`
+ padding-bottom: 2em;
+ z-index: ${zIndex}; /* override at least multi-page pagination */
+ width: auto;
+ min-width: 100%;
+ max-width: 80vw;
+ box-shadow: none;
+ border: 0;
+ `,
+ ],
+ menuList: (provider, { theme: { borderRadius, colors } }) => [
provider,
css`
border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
- border: 1px solid #ccc;
+ border: 1px solid ${colors.grayBorderDark};
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
margin-top: -1px;
border-top-color: ${colors.grayBorderLight};
min-width: 100%;
width: auto;
- z-index: ${zIndex}; /* override at least multi-page pagination */
- `,
- ],
- menuList: (provider, { theme: { borderRadius } }) => [
- provider,
- css`
border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
padding-top: 0;
padding-bottom: 0;
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
index 70c347c..a534438 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
@@ -22,7 +22,6 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Alert } from 'react-bootstrap';
-import { css } from '@emotion/core';
import { t, styled, getChartControlPanelRegistry } from '@superset-ui/core';
import Tabs from 'src/common/components/Tabs';
@@ -46,16 +45,16 @@ const propTypes = {
const Styles = styled.div`
height: 100%;
- max-height: 100%;
+ width: 100%;
overflow: auto;
+ overflow-x: visible;
+ overflow-y: auto;
.remove-alert {
cursor: pointer;
}
#controlSections {
- display: flex;
- flex-direction: column;
- height: 100%;
- max-height: 100%;
+ min-height: 100%;
+ overflow: visible;
}
.nav-tabs {
flex: 0 0 1;
@@ -64,15 +63,18 @@ const Styles = styled.div`
overflow: auto;
flex: 1 1 100%;
}
+ .Select__menu {
+ max-width: 100%;
+ }
`;
const ControlPanelsTabs = styled(Tabs)`
- ${({ fullWidth }) =>
- css`
- .ant-tabs-nav-list {
- width: ${fullWidth ? '100%' : '50%'};
- }
- `}
+ .ant-tabs-nav-list {
+ width: ${({ fullWidth }) => (fullWidth ? '100%' : '50%')};
+ }
+ .ant-tabs-content-holder {
+ overflow: visible;
+ }
`;
class ControlPanelsContainer extends React.Component {
diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
index e0a7445..a3c74d6 100644
--- a/superset-frontend/src/explore/components/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -57,6 +57,7 @@ const SouthPane = styled.div`
position: relative;
background-color: ${({ theme }) => theme.colors.grayscale.light5};
z-index: 5;
+ overflow: hidden;
`;
const TabsWrapper = styled.div<{ contentHeight: number }>`
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index bb9bd60..bc7e5c7 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -66,6 +66,8 @@ const Styles = styled.div`
align-items: stretch;
align-content: stretch;
overflow: auto;
+ box-shadow: none;
+ height: 100%;
& > div:last-of-type {
flex-basis: 100%;
@@ -235,10 +237,7 @@ const ExploreChartPanel = props => {
});
return (
- <Styles
- className="panel panel-default chart-container"
- style={{ height: props.height }}
- >
+ <Styles className="panel panel-default chart-container">
<div className="panel-heading" ref={headerRef}>
{header}
</div>
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index 349bded..5ea90a2 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -95,6 +95,9 @@ const Styles = styled.div`
flex: 1;
min-width: ${({ theme }) => theme.gridUnit * 128}px;
border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ .panel {
+ margin-bottom: 0;
+ }
}
.controls-column {
align-self: flex-start;
@@ -404,7 +407,7 @@ function ExploreViewContainer(props) {
/>
)}
<Resizable
- defaultSize={{ width: 300 }}
+ defaultSize={{ width: 300, height: '100%' }}
minWidth={300}
maxWidth="33%"
enable={{ right: true }}
@@ -456,7 +459,7 @@ function ExploreViewContainer(props) {
</div>
) : null}
<Resizable
- defaultSize={{ width: 320 }}
+ defaultSize={{ width: 320, height: '100%' }}
minWidth={320}
maxWidth="33%"
enable={{ right: true }}