feat: Adds visual stacking to nested modals (#1189)

Fixes various mobile styling/layout issues
This commit is contained in:
Tom Moor
2020-02-26 19:36:23 -08:00
committed by GitHub
parent f8c53f8a88
commit afba1edae4
5 changed files with 76 additions and 20 deletions

View File

@ -69,6 +69,7 @@ export const Outline = styled(Flex)`
border-radius: 4px;
font-weight: normal;
align-items: center;
overflow: hidden;
`;
export const LabelText = styled.div`

View File

@ -4,7 +4,7 @@ import keydown from 'react-keydown';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import { withRouter, type RouterHistory } from 'react-router-dom';
import { withTheme } from 'styled-components';
import styled, { withTheme } from 'styled-components';
import { SearchIcon } from 'outline-icons';
import { searchUrl } from 'utils/routeHelpers';
import Input from './Input';
@ -49,7 +49,7 @@ class InputSearch extends React.Component<Props> {
const { theme, placeholder = 'Search…' } = this.props;
return (
<Input
<InputMaxWidth
ref={ref => (this.input = ref)}
type="search"
placeholder={placeholder}
@ -67,4 +67,8 @@ class InputSearch extends React.Component<Props> {
}
}
const InputMaxWidth = styled(Input)`
max-width: 30vw;
`;
export default withTheme(withRouter(InputSearch));

View File

@ -5,7 +5,7 @@ import styled, { createGlobalStyle } from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import ReactModal from 'react-modal';
import { transparentize } from 'polished';
import { CloseIcon } from 'outline-icons';
import { CloseIcon, BackIcon } from 'outline-icons';
import NudeButton from 'components/NudeButton';
import { fadeAndScaleIn } from 'shared/styles/animations';
import Flex from 'shared/components/Flex';
@ -26,6 +26,23 @@ const GlobalStyles = createGlobalStyle`
z-index: 100;
}
${breakpoint('tablet')`
.ReactModalPortal + .ReactModalPortal {
.ReactModal__Overlay {
margin-left: 12px;
box-shadow: 0 -2px 10px ${props => props.theme.shadow};
border-radius: 8px 0 0 8px;
overflow: hidden;
}
}
.ReactModalPortal + .ReactModalPortal + .ReactModalPortal {
.ReactModal__Overlay {
margin-left: 24px;
}
}
`};
.ReactModal__Body--open {
overflow: hidden;
}
@ -51,12 +68,16 @@ const Modal = ({
>
<Content onClick={ev => ev.stopPropagation()} column>
{title && <h1>{title}</h1>}
<Close onClick={onRequestClose}>
<CloseIcon size={40} color="currentColor" />
<Esc>esc</Esc>
</Close>
{children}
</Content>
<Back onClick={onRequestClose}>
<BackIcon size={32} color="currentColor" />
<Text>Back</Text>
</Back>
<Close onClick={onRequestClose}>
<CloseIcon size={32} color="currentColor" />
</Close>
</StyledModal>
</React.Fragment>
);
@ -84,21 +105,27 @@ const StyledModal = styled(ReactModal)`
overflow-y: auto;
background: ${props => props.theme.background};
transition: ${props => props.theme.backgroundTransition};
padding: 13vh 2rem 2rem;
padding: 8vh 2rem 2rem;
outline: none;
${breakpoint('tablet')`
padding-top: 13vh;
`};
`;
const Esc = styled.span`
display: block;
text-align: center;
font-size: 13px;
height: 1em;
const Text = styled.span`
font-size: 16px;
font-weight: 500;
padding-right: 12px;
user-select: none;
`;
const Close = styled(NudeButton)`
position: fixed;
top: 16px;
right: 16px;
position: absolute;
display: block;
top: 0;
right: 0;
margin: 12px;
opacity: 0.75;
color: ${props => props.theme.text};
width: auto;
@ -109,8 +136,27 @@ const Close = styled(NudeButton)`
}
${breakpoint('tablet')`
top: 3rem;
right: 3rem;
display: none;
`};
`;
const Back = styled(NudeButton)`
position: absolute;
display: none;
align-items: center;
top: 2rem;
left: 2rem;
opacity: 0.75;
color: ${props => props.theme.text};
width: auto;
height: auto;
&:hover {
opacity: 1;
}
${breakpoint('tablet')`
display: flex;
`};
`;

View File

@ -42,7 +42,11 @@ class Sidebar extends React.Component<Props> {
onClick={this.toggleSidebar}
mobileSidebarVisible={ui.mobileSidebarVisible}
>
{ui.mobileSidebarVisible ? <CloseIcon /> : <MenuIcon />}
{ui.mobileSidebarVisible ? (
<CloseIcon size={32} />
) : (
<MenuIcon size={32} />
)}
</Toggle>
{children}
</Container>
@ -106,7 +110,6 @@ const Toggle = styled.a`
right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
z-index: 1;
margin: 12px;
height: 32px;
${breakpoint('tablet')`
display: none;

View File

@ -69,6 +69,7 @@ export const light = {
sidebarBackground: colors.warmGrey,
sidebarItemBackground: colors.black05,
sidebarText: 'rgb(78, 92, 110)',
shadow: 'rgba(0, 0, 0, 0.2)',
menuBackground: colors.white,
menuShadow:
@ -119,6 +120,7 @@ export const dark = {
sidebarBackground: colors.veryDarkBlue,
sidebarItemBackground: colors.veryDarkBlue,
sidebarText: colors.slate,
shadow: 'rgba(0, 0, 0, 0.6)',
menuBackground: lighten(0.015, colors.almostBlack),
menuShadow: