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 <[email protected]> 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 }}
