pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(dataset): resizable dataset layout left column (#24829)

Browse Source
This commit is contained in:
JUST.in DO IT 2023-08-03 09:34:33 -07:00 committed by GitHub
parent aee2695413
commit 6ff7fae0b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
View File

@ -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};

20
superset-frontend/src/features/datasets/DatasetLayout/index.tsx
View File

@ -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
superset-frontend/src/features/datasets/styles.ts
View File

@ -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};
`} `}