Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +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, useTheme,
} from '@mui/material'; } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; 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 { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { CheckCircle, HelpOutline } from '@mui/icons-material'; import { CheckCircle, HelpOutline } from '@mui/icons-material';
@ -31,6 +31,7 @@ interface IChangeRequestSidebarProps {
const StyledPageContent = styled(PageContent)(({ theme }) => ({ const StyledPageContent = styled(PageContent)(({ theme }) => ({
height: '100vh', height: '100vh',
overflow: 'auto', overflow: 'auto',
minWidth: '50vw',
padding: theme.spacing(7.5, 6), padding: theme.spacing(7.5, 6),
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
padding: theme.spacing(4, 2), padding: theme.spacing(4, 2),
@ -147,7 +148,11 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
if (!loading && !draft) { if (!loading && !draft) {
return ( return (
<SidebarModal open={open} onClose={onClose} label="Review changes"> <DynamicSidebarModal
open={open}
onClose={onClose}
label="Review changes"
>
<StyledPageContent <StyledPageContent
header={ header={
<PageHeader <PageHeader
@ -160,12 +165,16 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
{/* FIXME: empty state */} {/* FIXME: empty state */}
<BackButton onClick={onClose}>Close</BackButton> <BackButton onClick={onClose}>Close</BackButton>
</StyledPageContent> </StyledPageContent>
</SidebarModal> </DynamicSidebarModal>
); );
} }
return ( return (
<SidebarModal open={open} onClose={onClose} label="Review changes"> <DynamicSidebarModal
open={open}
onClose={onClose}
label="Review changes"
>
<StyledPageContent <StyledPageContent
header={ header={
<PageHeader <PageHeader
@ -343,6 +352,6 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
</Box> </Box>
))} ))}
</StyledPageContent> </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 { Modal, Backdrop, styled } from '@mui/material';
import Fade from '@mui/material/Fade'; import Fade from '@mui/material/Fade';
import { SIDEBAR_MODAL_ID } from 'utils/testIds'; import { SIDEBAR_MODAL_ID } from 'utils/testIds';
import * as React from 'react';
interface ISidebarModalProps { interface ISidebarModalProps {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
label: string; label: string;
children: ReactNode; children: React.ReactElement<any, any>;
} }
const TRANSITION_DURATION = 250; const TRANSITION_DURATION = 250;
@ -19,17 +20,20 @@ const ModalContentWrapper = styled('div')({
bottom: 0, bottom: 0,
height: '100vh', height: '100vh',
maxWidth: '98vw', maxWidth: '98vw',
width: 1300,
overflow: 'auto', overflow: 'auto',
boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)', 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, open,
onClose, onClose,
label, label,
children, children,
}: ISidebarModalProps) => { }) => {
return ( return (
<Modal <Modal
open={open} open={open}
@ -41,8 +45,26 @@ export const SidebarModal = ({
data-testid={SIDEBAR_MODAL_ID} data-testid={SIDEBAR_MODAL_ID}
> >
<Fade timeout={TRANSITION_DURATION} in={open}> <Fade timeout={TRANSITION_DURATION} in={open}>
<ModalContentWrapper>{children}</ModalContentWrapper> {children}
</Fade> </Fade>
</Modal> </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>
);
};