mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix(dataset): resizable dataset layout left column (#24829)
This commit is contained in:
parent
aee2695413
commit
6ff7fae0b0
@ -37,7 +37,6 @@ interface LeftPanelProps {
|
|||||||
|
|
||||||
const LeftPanelStyle = styled.div`
|
const LeftPanelStyle = styled.div`
|
||||||
${({ theme }) => `
|
${({ theme }) => `
|
||||||
max-width: ${theme.gridUnit * 87.5}px;
|
|
||||||
padding: ${theme.gridUnit * 4}px;
|
padding: ${theme.gridUnit * 4}px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: ${theme.colors.grayscale.light5};
|
background-color: ${theme.colors.grayscale.light5};
|
||||||
|
@ -17,6 +17,9 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { ReactElement, JSXElementConstructor } from 'react';
|
import React, { ReactElement, JSXElementConstructor } from 'react';
|
||||||
|
import { useTheme } from '@superset-ui/core';
|
||||||
|
import ResizableSidebar from 'src/components/ResizableSidebar';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
StyledLayoutWrapper,
|
StyledLayoutWrapper,
|
||||||
LeftColumn,
|
LeftColumn,
|
||||||
@ -46,14 +49,25 @@ export default function DatasetLayout({
|
|||||||
rightPanel,
|
rightPanel,
|
||||||
footer,
|
footer,
|
||||||
}: DatasetLayoutProps) {
|
}: DatasetLayoutProps) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledLayoutWrapper data-test="dataset-layout-wrapper">
|
<StyledLayoutWrapper data-test="dataset-layout-wrapper">
|
||||||
{header && <StyledLayoutHeader>{header}</StyledLayoutHeader>}
|
{header && <StyledLayoutHeader>{header}</StyledLayoutHeader>}
|
||||||
<OuterRow>
|
<OuterRow>
|
||||||
{leftPanel && (
|
{leftPanel && (
|
||||||
<LeftColumn>
|
<ResizableSidebar
|
||||||
<StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
|
id="dataset"
|
||||||
</LeftColumn>
|
initialWidth={theme.gridUnit * 80}
|
||||||
|
minWidth={theme.gridUnit * 80}
|
||||||
|
enable
|
||||||
|
>
|
||||||
|
{adjustedWidth => (
|
||||||
|
<LeftColumn width={adjustedWidth}>
|
||||||
|
<StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
|
||||||
|
</LeftColumn>
|
||||||
|
)}
|
||||||
|
</ResizableSidebar>
|
||||||
)}
|
)}
|
||||||
<RightColumn>
|
<RightColumn>
|
||||||
<PanelRow>
|
<PanelRow>
|
||||||
|
@ -25,22 +25,17 @@ export const StyledLayoutWrapper = styled.div`
|
|||||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Column = styled.div`
|
export const LeftColumn = styled.div<{ width?: number }>`
|
||||||
width: 100%;
|
width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
|
||||||
height: 100%;
|
max-width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
|
||||||
|
|
||||||
export const LeftColumn = styled(Column)`
|
|
||||||
width: ${({ theme }) => theme.gridUnit * 80}px;
|
|
||||||
height: auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const RightColumn = styled(Column)`
|
|
||||||
height: auto;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
width: calc(100% - ${({ theme }) => theme.gridUnit * 80}px);
|
`;
|
||||||
|
|
||||||
|
export const RightColumn = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Row = styled.div`
|
const Row = styled.div`
|
||||||
@ -52,6 +47,7 @@ const Row = styled.div`
|
|||||||
|
|
||||||
export const OuterRow = styled(Row)`
|
export const OuterRow = styled(Row)`
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const PanelRow = styled(Row)`
|
export const PanelRow = styled(Row)`
|
||||||
@ -87,7 +83,6 @@ export const StyledCreateDatasetTitle = styled.div`
|
|||||||
|
|
||||||
export const StyledLayoutLeftPanel = styled.div`
|
export const StyledLayoutLeftPanel = styled.div`
|
||||||
${({ theme }) => `
|
${({ theme }) => `
|
||||||
width: ${theme.gridUnit * 80}px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-right: 1px solid ${theme.colors.grayscale.light2};
|
border-right: 1px solid ${theme.colors.grayscale.light2};
|
||||||
`}
|
`}
|
||||||
|
Loading…
Reference in New Issue
Block a user