IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: footer with bottom alignment in modal dialog with aside view

Browse Source
This commit is contained in:
Andrey Savihin 2019-11-11 15:00:18 +03:00
parent 9640fb7633
commit 688a2913f8
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/ASC.Web.Components/src/components/layout/sub-components/aside.js
View File

@ -26,6 +26,15 @@ const StyledAside = styled(Container)`
transition: transform 0.3s ease-in-out;
width: ${props => (props.scale ? "100%" : "320px")};
z-index: ${props => props.zIndex};
&.modal-dialog-aside {
padding-bottom: 64px;
.modal-dialog-aside-footer {
position: fixed;
bottom: 16px;
}
}
`;
const Aside = React.memo(props => {

4
web/ASC.Web.Components/src/components/modal-dialog/index.js
View File

@ -146,14 +146,14 @@ class ModalDialog extends React.Component {
) : (
<>
<Backdrop visible={visible} onClick={onClose} zIndex={zIndex}/>
<Aside visible={visible} scale={scale} zIndex={zIndex}>
<Aside visible={visible} scale={scale} zIndex={zIndex} className="modal-dialog-aside">
<Content>
<Header>
<HeaderText>{headerContent}</HeaderText>
{scale ? <CloseButton onClick={onClose}></CloseButton> : ""}
</Header>
<Body>{bodyContent}</Body>
<Footer>{footerContent}</Footer>
<Footer className="modal-dialog-aside-footer">{footerContent}</Footer>
</Content>
</Aside>
</>