diff options
author | Erlend <erlendniko@hotmail.com> | 2022-07-04 09:37:33 +0200 |
---|---|---|
committer | Erlend <erlendniko@hotmail.com> | 2022-07-04 09:37:33 +0200 |
commit | 4c235d3b8db1b046c20a1d8f75f8fb9e6e28b4fe (patch) | |
tree | 6ca3e44da3c46c919b8c253029397048dd472e5e /client/js | |
parent | 19cd92e1ea8e186c0d518f5cc00ce43a7880aff4 (diff) |
Added feedback to CopyResponseButton when clicked
Diffstat (limited to 'client/js')
3 files changed, 26 insertions, 13 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx index de0079a21f9..d01daa7b0d6 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx @@ -1,24 +1,40 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import OverlayImageButton from './OverlayImageButton'; import copyImage from '../../assets/img/copy.svg'; import { ResponseContext } from '../Contexts/ResponseContext'; +import { OverlayTrigger, Tooltip } from 'react-bootstrap'; export default function CopyResponseButton() { const { response } = useContext(ResponseContext); + const [show, setShow] = useState(false); const handleCopy = () => { + setShow(true); navigator.clipboard.writeText(response); + setTimeout(() => { + setShow(false); + }, 2000); }; return ( - <OverlayImageButton - className="intro-copy" - image={copyImage} - height="30" - width="30" - tooltip="Copy" - onClick={handleCopy} - /> + <OverlayTrigger + placement="left-end" + show={show} + overlay={ + <Tooltip id="copy-tooltip">Response copied to clipboard</Tooltip> + } + > + <span> + <OverlayImageButton + className="intro-copy" + image={copyImage} + height="30" + width="30" + tooltip="Copy" + onClick={handleCopy} + /> + </span> + </OverlayTrigger> ); } diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx index 2cb9c7d6e9a..788d88fd0e6 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx @@ -36,5 +36,3 @@ export default function OverlayImageButton({ </OverlayTrigger> ); } - -// diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx index 73b68b707fb..df380c62fa1 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx @@ -4,14 +4,13 @@ import pasteImage from '../../assets/img/paste.svg'; import { QueryInputContext } from '../Contexts/QueryInputContext'; export default function PasteJSONButton() { - const { inputs, setInputs, id, setId, levelZeroParameters, childMap } = + const { setInputs, setId, levelZeroParameters, childMap } = useContext(QueryInputContext); const [paste, setPaste] = useState(false); //TODO: fix that the second-level dropdowns do not get set properly when pasting a JSON query const handleClick = () => { - //alert('Button is non-functional'); setPaste(true); window.addEventListener('paste', handlePaste); }; |