feat: Show mobile-style (slide from bottom) menus on mobile (#2025)
* feat: Show mobile-style (slide from bottom) menus at responsive viewport sizes * More mobile improvements * fix: Safari compatability
This commit is contained in:
@ -3,6 +3,7 @@ import { CheckmarkIcon } from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { MenuItem as BaseMenuItem } from "reakit/Menu";
|
||||
import styled from "styled-components";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
|
||||
type Props = {|
|
||||
onClick?: (SyntheticEvent<>) => void | Promise<void>,
|
||||
@ -72,7 +73,7 @@ export const MenuAnchor = styled.a`
|
||||
display: flex;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 6px 12px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
background: none;
|
||||
@ -80,7 +81,7 @@ export const MenuAnchor = styled.a`
|
||||
props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
|
||||
@ -115,6 +116,11 @@ export const MenuAnchor = styled.a`
|
||||
background: ${props.theme.primary};
|
||||
}
|
||||
`};
|
||||
|
||||
${breakpoint("tablet")`
|
||||
padding: 6px 12px;
|
||||
font-size: 15px;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default MenuItem;
|
||||
|
@ -1,9 +1,12 @@
|
||||
// @flow
|
||||
import { rgba } from "polished";
|
||||
import * as React from "react";
|
||||
import { Portal } from "react-portal";
|
||||
import { Menu } from "reakit/Menu";
|
||||
import styled from "styled-components";
|
||||
import { fadeAndScaleIn } from "shared/styles/animations";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
import { fadeAndScaleIn, fadeAndSlideIn } from "shared/styles/animations";
|
||||
import Fade from "components/Fade";
|
||||
import usePrevious from "hooks/usePrevious";
|
||||
|
||||
type Props = {|
|
||||
@ -37,27 +40,60 @@ export default function ContextMenu({
|
||||
}, [onOpen, onClose, previousVisible, rest.visible]);
|
||||
|
||||
return (
|
||||
<Menu hideOnClickOutside preventBodyScroll {...rest}>
|
||||
{(props) => (
|
||||
<Position {...props}>
|
||||
<Background>
|
||||
{rest.visible || rest.animating ? children : null}
|
||||
</Background>
|
||||
</Position>
|
||||
<>
|
||||
<Menu hideOnClickOutside preventBodyScroll {...rest}>
|
||||
{(props) => (
|
||||
<Position {...props}>
|
||||
<Background>
|
||||
{rest.visible || rest.animating ? children : null}
|
||||
</Background>
|
||||
</Position>
|
||||
)}
|
||||
</Menu>
|
||||
{(rest.visible || rest.animating) && (
|
||||
<Portal>
|
||||
<Fade timing="200ms">
|
||||
<Backdrop />
|
||||
</Fade>
|
||||
</Portal>
|
||||
)}
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const Backdrop = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${(props) => props.theme.shadow};
|
||||
z-index: ${(props) => props.theme.depths.menu - 1};
|
||||
|
||||
${breakpoint("tablet")`
|
||||
display: none;
|
||||
`};
|
||||
`;
|
||||
|
||||
const Position = styled.div`
|
||||
position: absolute;
|
||||
z-index: ${(props) => props.theme.depths.menu};
|
||||
|
||||
${breakpoint("mobile", "tablet")`
|
||||
position: fixed !important;
|
||||
transform: none !important;
|
||||
top: auto !important;
|
||||
right: 8px !important;
|
||||
bottom: 8px !important;
|
||||
left: 8px !important;
|
||||
`};
|
||||
`;
|
||||
|
||||
const Background = styled.div`
|
||||
animation: ${fadeAndScaleIn} 200ms ease;
|
||||
transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
|
||||
background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
|
||||
animation: ${fadeAndSlideIn} 200ms ease;
|
||||
transform-origin: 50% 100%;
|
||||
max-width: 100%;
|
||||
background: ${(props) => props.theme.menuBackground};
|
||||
border: ${(props) =>
|
||||
props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
|
||||
border-radius: 6px;
|
||||
@ -66,7 +102,6 @@ const Background = styled.div`
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 75vh;
|
||||
max-width: 276px;
|
||||
box-shadow: ${(props) => props.theme.menuShadow};
|
||||
pointer-events: all;
|
||||
font-weight: normal;
|
||||
@ -74,4 +109,12 @@ const Background = styled.div`
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
${breakpoint("tablet")`
|
||||
animation: ${fadeAndScaleIn} 200ms ease;
|
||||
transform-origin: ${(props) =>
|
||||
props.left !== undefined ? "25%" : "75%"} 0;
|
||||
max-width: 276px;
|
||||
background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
|
||||
`};
|
||||
`;
|
||||
|
@ -77,7 +77,7 @@ const Actions = styled(Flex)`
|
||||
const Wrapper = styled(Flex)`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
z-index: ${(props) => props.theme.depths.header};
|
||||
background: ${(props) => transparentize(0.2, props.theme.background)};
|
||||
padding: 12px;
|
||||
transition: all 100ms ease-out;
|
||||
|
@ -211,7 +211,7 @@ const Background = styled.a`
|
||||
right: 0;
|
||||
cursor: default;
|
||||
z-index: ${(props) => props.theme.depths.sidebar - 1};
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: ${(props) => props.theme.sidebarShadow};
|
||||
`;
|
||||
|
||||
const Container = styled(Flex)`
|
||||
|
@ -126,7 +126,7 @@ const Link = styled(NavLink)`
|
||||
props.$isActiveDrop ? props.theme.slateDark : "inherit"};
|
||||
color: ${(props) =>
|
||||
props.$isActiveDrop ? props.theme.white : props.theme.sidebarText};
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
@ -158,6 +158,7 @@ const Link = styled(NavLink)`
|
||||
|
||||
${breakpoint("tablet")`
|
||||
padding: 4px 16px;
|
||||
font-size: 15px;
|
||||
`}
|
||||
`;
|
||||
|
||||
|
@ -152,7 +152,6 @@ function CollectionScene() {
|
||||
<CollectionMenu
|
||||
collection={collection}
|
||||
placement="bottom-end"
|
||||
modal={false}
|
||||
label={(props) => (
|
||||
<Button
|
||||
icon={<MoreIcon />}
|
||||
|
@ -4,6 +4,7 @@ import { observer } from "mobx-react";
|
||||
import * as React from "react";
|
||||
import Textarea from "react-autosize-textarea";
|
||||
import styled from "styled-components";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
import { MAX_TITLE_LENGTH } from "shared/constants";
|
||||
import parseTitle from "shared/utils/parseTitle";
|
||||
import Document from "models/Document";
|
||||
@ -165,11 +166,9 @@ const StarButton = styled(Star)`
|
||||
`;
|
||||
|
||||
const Title = styled(Textarea)`
|
||||
z-index: 1;
|
||||
line-height: 1.25;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: ${(props) => (props.$startsWithEmojiAndSpace ? "-1.2em" : 0)};
|
||||
background: ${(props) => props.theme.background};
|
||||
transition: ${(props) => props.theme.backgroundTransition};
|
||||
color: ${(props) => props.theme.text};
|
||||
@ -186,6 +185,10 @@ const Title = styled(Textarea)`
|
||||
-webkit-text-fill-color: ${(props) => props.theme.placeholder};
|
||||
}
|
||||
|
||||
${breakpoint("tablet")`
|
||||
margin-left: ${(props) => (props.$startsWithEmojiAndSpace ? "-1.2em" : 0)};
|
||||
`};
|
||||
|
||||
${AnimatedStar} {
|
||||
opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
|
||||
}
|
||||
|
@ -107,6 +107,7 @@ export const base = {
|
||||
},
|
||||
|
||||
depths: {
|
||||
header: 900,
|
||||
sidebar: 1000,
|
||||
modalOverlay: 2000,
|
||||
modal: 3000,
|
||||
@ -133,6 +134,7 @@ export const light = {
|
||||
sidebarBackground: colors.warmGrey,
|
||||
sidebarItemBackground: colors.black10,
|
||||
sidebarText: "rgb(78, 92, 110)",
|
||||
sidebarShadow: "rgba(0, 0, 0, 0.2)",
|
||||
shadow: "rgba(0, 0, 0, 0.2)",
|
||||
|
||||
menuBackground: colors.white,
|
||||
@ -192,6 +194,7 @@ export const dark = {
|
||||
sidebarBackground: colors.veryDarkBlue,
|
||||
sidebarItemBackground: colors.transparent,
|
||||
sidebarText: colors.slate,
|
||||
sidebarShadow: "rgba(255, 255, 255, 0.07)",
|
||||
shadow: "rgba(0, 0, 0, 0.6)",
|
||||
|
||||
menuBorder: lighten(0.1, colors.almostBlack),
|
||||
|
Reference in New Issue
Block a user