extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-14 13:56:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

clipboard improvements

Browse Source
This commit is contained in:
Michael Quigley 2025-02-18 12:55:54 -05:00
parent 7fdd6a4a86
commit 9f8b3c8e9f
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/ClipboardText.tsx
View File

@ -1,4 +1,5 @@
import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckMarkIcon from "@mui/icons-material/Check";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {Button, Popover, Typography} from "@mui/material"; import {Button, Popover, Typography} from "@mui/material";
@ -8,13 +9,13 @@ interface ClipboardTextProps {
const ClipboardText = ({ text }: ClipboardTextProps) => { const ClipboardText = ({ text }: ClipboardTextProps) => {
const [copied, setCopied] = useState<boolean>(false); const [copied, setCopied] = useState<boolean>(false);
const [color, setColor] = useState<string>("black"); const [control, setControl] = useState<React.JSX.Element>(<ContentCopyIcon />);
useEffect(() => { useEffect(() => {
if(copied) { if(copied) {
setColor("red"); setControl(<CheckMarkIcon />);
} else { } else {
setColor("black"); setControl(<ContentCopyIcon />);
} }
}, [copied]); }, [copied]);
@ -26,7 +27,7 @@ const ClipboardText = ({ text }: ClipboardTextProps) => {
return ( return (
<> <>
<Button onClick={copy} sx={{ minWidth: "30px" }} style={{ color: color }} ><ContentCopyIcon /></Button> <Button onClick={copy} sx={{ minWidth: "30px" }} style={{ color: "black" }}>{control}</Button>
<Popover anchorOrigin={{ vertical: "top", horizontal: "right" }} open={copied}><Typography sx={{ p: 2 }}>Copied!</Typography></Popover> <Popover anchorOrigin={{ vertical: "top", horizontal: "right" }} open={copied}><Typography sx={{ p: 2 }}>Copied!</Typography></Popover>
</> </>
); );