mirror of https://github.com/apache/superset.git
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`
|
||||
${({ theme }) => `
|
||||
max-width: ${theme.gridUnit * 87.5}px;
|
||||
padding: ${theme.gridUnit * 4}px;
|
||||
height: 100%;
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
|
|
|
@ -17,6 +17,9 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { ReactElement, JSXElementConstructor } from 'react';
|
||||
import { useTheme } from '@superset-ui/core';
|
||||
import ResizableSidebar from 'src/components/ResizableSidebar';
|
||||
|
||||
import {
|
||||
StyledLayoutWrapper,
|
||||
LeftColumn,
|
||||
|
@ -46,14 +49,25 @@ export default function DatasetLayout({
|
|||
rightPanel,
|
||||
footer,
|
||||
}: DatasetLayoutProps) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledLayoutWrapper data-test="dataset-layout-wrapper">
|
||||
{header && <StyledLayoutHeader>{header}</StyledLayoutHeader>}
|
||||
<OuterRow>
|
||||
{leftPanel && (
|
||||
<LeftColumn>
|
||||
<StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
|
||||
</LeftColumn>
|
||||
<ResizableSidebar
|
||||
id="dataset"
|
||||
initialWidth={theme.gridUnit * 80}
|
||||
minWidth={theme.gridUnit * 80}
|
||||
enable
|
||||
>
|
||||
{adjustedWidth => (
|
||||
<LeftColumn width={adjustedWidth}>
|
||||
<StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
|
||||
</LeftColumn>
|
||||
)}
|
||||
</ResizableSidebar>
|
||||
)}
|
||||
<RightColumn>
|
||||
<PanelRow>
|
||||
|
|
|
@ -25,22 +25,17 @@ export const StyledLayoutWrapper = styled.div`
|
|||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
`;
|
||||
|
||||
const Column = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
export const LeftColumn = styled.div<{ width?: number }>`
|
||||
width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
|
||||
max-width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
|
||||
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;
|
||||
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`
|
||||
|
@ -52,6 +47,7 @@ const Row = styled.div`
|
|||
|
||||
export const OuterRow = styled(Row)`
|
||||
flex: 1 0 auto;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const PanelRow = styled(Row)`
|
||||
|
@ -87,7 +83,6 @@ export const StyledCreateDatasetTitle = styled.div`
|
|||
|
||||
export const StyledLayoutLeftPanel = styled.div`
|
||||
${({ theme }) => `
|
||||
width: ${theme.gridUnit * 80}px;
|
||||
height: 100%;
|
||||
border-right: 1px solid ${theme.colors.grayscale.light2};
|
||||
`}
|
||||
|
|
Loading…
Reference in New Issue