Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(admin): add CopyOnClick button to NodeConfigurationContainer

Browse source
This commit is contained in:
Matthew Penner 2021-03-06 16:08:42 -07:00
parent 5d1568cf84
commit e9546c70bd
2 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
View file

@ -1,11 +1,12 @@
import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import AdminBox from '@/components/admin/AdminBox'; import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro'; import tw from 'twin.macro';
import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons'; import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import CopyOnClick from '@/components/elements/CopyOnClick';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
export default () => { export default () => {
const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes); const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@ -32,9 +33,18 @@ export default () => {
return ( return (
<div> <div>
<AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}> <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
<div css={tw`relative`}>
<div css={tw`absolute top-0 right-0`}>
<CopyOnClick text={configuration} hideTextInToast={true}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5 text-neutral-500 hover:text-neutral-400 cursor-pointer mt-1 mr-1`}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
</svg>
</CopyOnClick>
</div>
<pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}> <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
{configuration} {configuration}
</pre> </pre>
</div>
</AdminBox> </AdminBox>
<AdminBox title={'Auto Deploy'} icon={faDragon}> <AdminBox title={'Auto Deploy'} icon={faDragon}>

6
resources/scripts/components/elements/CopyOnClick.tsx
View file

@ -19,7 +19,7 @@ const Toast = styled.div`
} }
`; `;
const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => { const CopyOnClick: React.FC<{ text: any, hideTextInToast?: boolean }> = ({ text, hideTextInToast, children }) => {
const [ copied, setCopied ] = useState(false); const [ copied, setCopied ] = useState(false);
useEffect(() => { useEffect(() => {
@ -45,7 +45,11 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
{copied ? {copied ?
<Toast> <Toast>
<div> <div>
{hideTextInToast ?
<p>Copied text to clipboard.</p>
:
<p>Copied &quot;{text}&quot; to clipboard.</p> <p>Copied &quot;{text}&quot; to clipboard.</p>
}
</div> </div>
</Toast> </Toast>
: :