Skip to content

fix: explore page style fix, remove unnecessary scroll bars #12649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ktmud merged 4 commits into from
Jan 22, 2021
Merged

fix: explore page style fix, remove unnecessary scroll bars #12649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d26a1e8
fix: various style touch on Explore page
ktmud Jan 21, 2021
79d5880
More style fixes
ktmud Jan 21, 2021
215502b
Force 100% height for sidebars
ktmud Jan 21, 2021
c8b410f
Fix linting
ktmud Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions superset-frontend/src/components/Select/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down
26 changes: 14 additions & 12 deletions superset-frontend/src/explore/components/ControlPanelsContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/explore/components/DataTablesPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>`
Expand Down
7 changes: 3 additions & 4 deletions superset-frontend/src/explore/components/ExploreChartPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -240,10 +242,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>
Expand Down
7 changes: 5 additions & 2 deletions superset-frontend/src/explore/components/ExploreViewContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -404,7 +407,7 @@ function ExploreViewContainer(props) {
/>
)}
<Resizable
defaultSize={{ width: 300 }}
defaultSize={{ width: 300, height: '100%' }}
minWidth={300}
maxWidth="33%"
enable={{ right: true }}
Expand Down Expand Up @@ -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 }}
Expand Down