StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix copy to clipboard when clicking server address

Browse source 
closes #4187
This commit is contained in:
DaneEveritt 2022-06-27 19:18:58 -04:00
parent 72f545259f
commit ad6e9f076b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 61 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/server/console/ServerDetailsBlock.tsx
View file

@ -72,7 +72,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
return (
<div className={classNames('grid grid-cols-6 gap-2 md:gap-4', className)}>
<StatBlock icon={faWifi} title={'Address'}>
<StatBlock icon={faWifi} title={'Address'} copyOnClick={allocation}>
{allocation}
</StatBlock>
<StatBlock

46
resources/scripts/components/server/console/StatBlock.tsx
View file

@ -5,9 +5,11 @@ import classNames from 'classnames';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import styles from './style.module.css';
import useFitText from 'use-fit-text';
import CopyOnClick from '@/components/elements/CopyOnClick';
interface StatBlockProps {
title: string;
copyOnClick?: string;
description?: string;
color?: string | undefined;
icon: IconDefinition;
@ -15,33 +17,35 @@ interface StatBlockProps {
className?: string;
}
export default ({ title, icon, color, description, className, children }: StatBlockProps) => {
export default ({ title, copyOnClick, icon, color, description, className, children }: StatBlockProps) => {
const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
return (
<Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
<Icon
icon={icon}
className={classNames({
'text-gray-100': !color || color === 'bg-gray-700',
'text-gray-50': color && color !== 'bg-gray-700',
})}
/>
</div>
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
<div
ref={ref}
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
style={{ fontSize }}
>
{children}
<CopyOnClick text={copyOnClick} disabled={!copyOnClick}>
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
<Icon
icon={icon}
className={classNames({
'text-gray-100': !color || color === 'bg-gray-700',
'text-gray-50': color && color !== 'bg-gray-700',
})}
/>
</div>
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
<div
ref={ref}
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
style={{ fontSize }}
>
{children}
</div>
</div>
</div>
</div>
</CopyOnClick>
</Tooltip>
);
};