From 3acbd9ef9c8773f550900da21811364096305072 Mon Sep 17 00:00:00 2001 From: Michael Fix Date: Sat, 14 Mar 2020 16:58:13 -0700 Subject: [PATCH] New copy action menu (#970) * move copy actions to a new menu * clean up copy menu * clean up export menu * move flex into reset styles * use real ellipses * fix copy menu id and classNames Co-authored-by: repo-ranger[bot] <39074581+repo-ranger[bot]@users.noreply.github.com> --- components/Billing.js | 4 +- components/CopyMenu.js | 120 +++++++++++++++++++++++++++++++++++ components/Editor.js | 3 +- components/ExportMenu.js | 85 ++----------------------- components/ImagePicker.js | 2 +- components/LoginButton.js | 6 +- components/SnippetToolbar.js | 4 +- components/TweetButton.js | 2 +- components/style/Reset.js | 5 ++ pages/snippets.js | 2 +- 10 files changed, 143 insertions(+), 90 deletions(-) create mode 100644 components/CopyMenu.js diff --git a/components/Billing.js b/components/Billing.js index 3dfed46..b8979c7 100644 --- a/components/Billing.js +++ b/components/Billing.js @@ -119,7 +119,7 @@ function Billing(props) { }} />
- + (By clicking subscribe, you are accepting the{' '} @@ -135,7 +135,7 @@ function Billing(props) { type="submit" color="rgba(255, 255, 255, 0.7)" > - {loading ? 'Sending...' : 'Subscribe'} + {loading ? 'Sending…' : 'Subscribe'}
{X} diff --git a/components/CopyMenu.js b/components/CopyMenu.js new file mode 100644 index 0000000..7f953f0 --- /dev/null +++ b/components/CopyMenu.js @@ -0,0 +1,120 @@ +import React from 'react' +import { withRouter } from 'next/router' +import { useCopyTextHandler, useAsyncCallback } from 'actionsack' +import morph from 'morphmorph' + +import { COLORS } from '../lib/constants' +import Button from './Button' +import Popout, { managePopout } from './Popout' +import CopySVG from './svg/Copy' + +const toIFrame = url => + ` +` + +const toURL = url => `${location.origin}${url}` +const toEncodedURL = morph.compose(encodeURI, toURL) + +function CopyButton(props) { + return ( + +
+ + + + ) +} + +export default managePopout(React.memo(CopyMenu)) diff --git a/components/Editor.js b/components/Editor.js index beef5fd..84080bc 100644 --- a/components/Editor.js +++ b/components/Editor.js @@ -14,6 +14,7 @@ import Overlay from './Overlay' import BackgroundSelect from './BackgroundSelect' import Carbon from './Carbon' import ExportMenu from './ExportMenu' +import CopyMenu from './CopyMenu' import Themes from './Themes' import TweetButton from './TweetButton' import FontFace from './FontFace' @@ -413,11 +414,11 @@ class Editor extends React.Component { />
+ diff --git a/components/ExportMenu.js b/components/ExportMenu.js index 3f3bcbc..516ae6a 100644 --- a/components/ExportMenu.js +++ b/components/ExportMenu.js @@ -1,22 +1,11 @@ import React from 'react' -import { withRouter } from 'next/router' -import { useCopyTextHandler, useOnline, useKeyboardListener, useAsyncCallback } from 'actionsack' +import { useOnline, useKeyboardListener, useAsyncCallback } from 'actionsack' import { COLORS, EXPORT_SIZES } from '../lib/constants' import Button from './Button' import Input from './Input' import Popout, { managePopout } from './Popout' -const toIFrame = url => - ` -` - -const toURL = url => encodeURI(`${location.origin}${url}`) - const MAX_PAYLOAD_SIZE = 5e6 // bytes function verifyPayloadSize(str) { if (typeof str !== 'string') return true @@ -28,25 +17,7 @@ function verifyPayloadSize(str) { return Buffer.byteLength(str, 'utf8') } -const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) => { - const text = React.useMemo(() => mapper(asPath), [mapper, asPath]) - const { onClick, copied } = useCopyTextHandler(text) - - return ( - - ) -}) - -const popoutStyle = { width: '350px', right: 0 } +const popoutStyle = { width: '240px', right: 0 } function useSafari() { const [isSafari, setSafari] = React.useState(false) @@ -61,40 +32,24 @@ function useSafari() { return isSafari } -function useClipboardSupport() { - const [isClipboardSupports, setClipboardSupport] = React.useState(false) - - React.useEffect(() => { - setClipboardSupport( - window.navigator && window.navigator.clipboard && typeof ClipboardItem === 'function' - ) - }, []) - - return isClipboardSupports -} - function ExportMenu({ backgroundImage, onChange, exportSize, isVisible, toggleVisibility, - exportImage: exp, - copyImage + exportImage: exp }) { const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage]) const online = useOnline() const isSafari = useSafari() + const input = React.useRef() const [exportImage, { loading }] = useAsyncCallback(exp) useKeyboardListener('⌘-⇧-e', () => exportImage()) const disablePNG = isSafari && (tooLarge || !online) - const clipboardSupported = useClipboardSupport() - - const input = React.useRef() - const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize) const handleExport = format => () => @@ -116,13 +71,13 @@ function ExportMenu({ data-cy="export-button" style={{ width: 92 }} > - {loading ? 'Exporting...' : 'Export'} + {loading ? 'Exporting…' : 'Export'}
- {/* IDEA: Remove open button if clipboardSupported? */}
- Copy to clipboard -
- - - {clipboardSupported && ( - - )} -
-
-
- Export + Download
{!disablePNG && ( )} diff --git a/components/LoginButton.js b/components/LoginButton.js index 48b66b5..96bceca 100644 --- a/components/LoginButton.js +++ b/components/LoginButton.js @@ -9,7 +9,7 @@ import { useAuth } from './AuthContext' function Drawer(props) { return (