Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

fix sidebar width (#2359)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2022-11-09 16:50:48 +01:00 committed by GitHub
parent b61dbbd718
commit b9f55a3fbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
View File

@ -10,7 +10,7 @@ import {
useTheme,
} from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { CheckCircle, HelpOutline } from '@mui/icons-material';
@ -31,6 +31,7 @@ interface IChangeRequestSidebarProps {
const StyledPageContent = styled(PageContent)(({ theme }) => ({
height: '100vh',
overflow: 'auto',
minWidth: '50vw',
padding: theme.spacing(7.5, 6),
[theme.breakpoints.down('md')]: {
padding: theme.spacing(4, 2),
@ -147,7 +148,11 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
if (!loading && !draft) {
return (
<SidebarModal open={open} onClose={onClose} label="Review changes">
<DynamicSidebarModal
open={open}
onClose={onClose}
label="Review changes"
>
<StyledPageContent
header={
<PageHeader
@ -160,12 +165,16 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
{/* FIXME: empty state */}
<BackButton onClick={onClose}>Close</BackButton>
</StyledPageContent>
</SidebarModal>
</DynamicSidebarModal>
);
}
return (
<SidebarModal open={open} onClose={onClose} label="Review changes">
<DynamicSidebarModal
open={open}
onClose={onClose}
label="Review changes"
>
<StyledPageContent
header={
<PageHeader
@ -343,6 +352,6 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
</Box>
))}
</StyledPageContent>
</SidebarModal>
</DynamicSidebarModal>
);
};

34
frontend/src/component/common/SidebarModal/SidebarModal.tsx
View File

@ -1,13 +1,14 @@
import { ReactNode } from 'react';
import { ReactNode, FC } from 'react';
import { Modal, Backdrop, styled } from '@mui/material';
import Fade from '@mui/material/Fade';
import { SIDEBAR_MODAL_ID } from 'utils/testIds';
import * as React from 'react';
interface ISidebarModalProps {
open: boolean;
onClose: () => void;
label: string;
children: ReactNode;
children: React.ReactElement<any, any>;
}
const TRANSITION_DURATION = 250;
@ -19,17 +20,20 @@ const ModalContentWrapper = styled('div')({
bottom: 0,
height: '100vh',
maxWidth: '98vw',
width: 1300,
overflow: 'auto',
boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
});
export const SidebarModal = ({
const FixedWidthContentWrapper = styled(ModalContentWrapper)({
width: 1300,
});
export const BaseModal: FC<ISidebarModalProps> = ({
open,
onClose,
label,
children,
}: ISidebarModalProps) => {
}) => {
return (
<Modal
open={open}
@ -41,8 +45,26 @@ export const SidebarModal = ({
data-testid={SIDEBAR_MODAL_ID}
>
<Fade timeout={TRANSITION_DURATION} in={open}>
<ModalContentWrapper>{children}</ModalContentWrapper>
{children}
</Fade>
</Modal>
);
};
export const SidebarModal: FC<ISidebarModalProps> = props => {
return (
<BaseModal {...props}>
<FixedWidthContentWrapper>
{props.children}
</FixedWidthContentWrapper>
</BaseModal>
);
};
export const DynamicSidebarModal: FC<ISidebarModalProps> = props => {
return (
<BaseModal {...props}>
<ModalContentWrapper>{props.children}</ModalContentWrapper>
</BaseModal>
);
};