From c00001086a957e806e5684559559127130b5e2ca Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 26 Sep 2021 15:26:10 -0700 Subject: [PATCH] fix: IconPicker unclosable on mobile --- app/components/ContextMenu/index.js | 3 ++- app/components/IconPicker.js | 21 ++++++++++++--- package.json | 2 +- yarn.lock | 42 ++++++++++++++--------------- 4 files changed, 42 insertions(+), 26 deletions(-) diff --git a/app/components/ContextMenu/index.js b/app/components/ContextMenu/index.js index 69c141132..d49c1eeae 100644 --- a/app/components/ContextMenu/index.js +++ b/app/components/ContextMenu/index.js @@ -20,6 +20,7 @@ type Props = {| children: React.Node, onOpen?: () => void, onClose?: () => void, + hide?: () => void, |}; export default function ContextMenu({ @@ -68,7 +69,7 @@ export default function ContextMenu({ {(rest.visible || rest.animating) && ( - + )} diff --git a/app/components/IconPicker.js b/app/components/IconPicker.js index b1c230ef6..0547ddfeb 100644 --- a/app/components/IconPicker.js +++ b/app/components/IconPicker.js @@ -35,6 +35,7 @@ import * as React from "react"; import { useTranslation } from "react-i18next"; import { useMenuState, MenuButton, MenuItem } from "reakit/Menu"; import styled from "styled-components"; +import breakpoint from "styled-components-breakpoint"; import ContextMenu from "components/ContextMenu"; import Flex from "components/Flex"; import HelpText from "components/HelpText"; @@ -188,12 +189,13 @@ const colors = [ type Props = {| onOpen?: () => void, + onClose?: () => void, onChange: (color: string, icon: string) => void, icon: string, color: string, |}; -function IconPicker({ onOpen, icon, color, onChange }: Props) { +function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) { const { t } = useTranslation(); const menu = useMenuState({ modal: true, @@ -216,7 +218,12 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) { )} - + {Object.keys(icons).map((name) => { return ( @@ -259,7 +266,10 @@ const Label = styled.label` const Icons = styled.div` padding: 16px 8px 0 16px; - width: 276px; + + ${breakpoint("tablet")` + width: 276px; + `}; `; const Button = styled(NudeButton)` @@ -282,6 +292,11 @@ const Loading = styled(HelpText)` const ColorPicker = styled(TwitterPicker)` box-shadow: none !important; background: transparent !important; + width: auto !important; + + ${breakpoint("tablet")` + width: 276px; + `}; `; const Wrapper = styled("div")` diff --git a/package.json b/package.json index 5aac34ea1..d5b7c9dc8 100644 --- a/package.json +++ b/package.json @@ -147,7 +147,7 @@ "react-virtualized-auto-sizer": "^1.0.5", "react-waypoint": "^10.1.0", "react-window": "^1.8.6", - "reakit": "^1.3.8", + "reakit": "^1.3.10", "regenerator-runtime": "^0.13.7", "rich-markdown-editor": "^11.17.10", "semver": "^7.3.2", diff --git a/yarn.lock b/yarn.lock index 94ed34685..2a07ef9a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12077,35 +12077,35 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" -reakit-system@^0.15.1: - version "0.15.1" - resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.15.1.tgz#bf5cc7a03f60a817373bc9cbb4a689c1f4100547" - integrity sha512-PkqfAyEohtcEu/gUvKriCv42NywDtUgvocEN3147BI45dOFAB89nrT7wRIbIcKJiUT598F+JlPXAZZVLWhc1Kg== +reakit-system@^0.15.2: + version "0.15.2" + resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.15.2.tgz#a485fab84b3942acbed6212c3b56a6ef8611c457" + integrity sha512-TvRthEz0DmD0rcJkGamMYx+bATwnGNWJpe/lc8UV2Js8nnPvkaxrHk5fX9cVASFrWbaIyegZHCWUBfxr30bmmA== dependencies: - reakit-utils "^0.15.1" + reakit-utils "^0.15.2" -reakit-utils@^0.15.1: - version "0.15.1" - resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.1.tgz#797f0a43f6a1dbc22d161224d5d2272e287dbfe3" - integrity sha512-6cZgKGvOkAMQgkwU9jdYbHfkuIN1Pr+vwcB19plLvcTfVN0Or10JhIuj9X+JaPZyI7ydqTDFaKNdUcDP69o/+Q== +reakit-utils@^0.15.2: + version "0.15.2" + resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.2.tgz#b4d5836e534576bfd175171541d43182ad97f2d2" + integrity sha512-i/RYkq+W6hvfFmXw5QW7zvfJJT/K8a4qZ0hjA79T61JAFPGt23DsfxwyBbyK91GZrJ9HMrXFVXWMovsKBc1qEQ== -reakit-warning@^0.6.1: - version "0.6.1" - resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.6.1.tgz#dba33bb8866aebe30e67ac433ead707d16d38a36" - integrity sha512-poFUV0EyxB+CcV9uTNBAFmcgsnR2DzAbOTkld4Ul+QOKSeEHZB3b3+MoZQgcYHmbvG19Na1uWaM7ES+/Eyr8tQ== +reakit-warning@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.6.2.tgz#9c346ae483eb1f284f2088653f90cabd26dbee56" + integrity sha512-z/3fvuc46DJyD3nJAUOto6inz2EbSQTjvI/KBQDqxwB0y02HDyeP8IWOJxvkuAUGkWpeSx+H3QWQFSNiPcHtmw== dependencies: - reakit-utils "^0.15.1" + reakit-utils "^0.15.2" -reakit@^1.3.8: - version "1.3.8" - resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.8.tgz#717e1a3b7cc6da803362a0edc2c55d2b6a001baf" - integrity sha512-8SVejx6FUaFi2+Q9eXoDAd4wWi/xAn6v8JgXH8x2xnzye8pb6v5bYvegACVpYVZnrS5w/JUgMTGh1Xy8MkkPww== +reakit@^1.3.10: + version "1.3.10" + resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.10.tgz#9b04efb8962cc17ecaffa31bae0396940177d431" + integrity sha512-HxHtnegMDwidGU4Ik/fKTZ3coihf4nKeycs0QSIFWcau77qL5wL6xnqZrAxcjjDDPOIANct3LxTiAlf+qGLOlw== dependencies: "@popperjs/core" "^2.5.4" body-scroll-lock "^3.1.5" - reakit-system "^0.15.1" - reakit-utils "^0.15.1" - reakit-warning "^0.6.1" + reakit-system "^0.15.2" + reakit-utils "^0.15.2" + reakit-warning "^0.6.2" rechoir@^0.6.2: version "0.6.2"