Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

style(console): CopyToClipboard component (#2584)

Browse source
This commit is contained in:
Xiao Yijun 2022-12-05 16:37:06 +08:00 committed by GitHub
parent 8f5a8bded0
commit 2d15ead429
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/console/src/components/CopyToClipboard/index.module.scss
View file

@ -9,7 +9,7 @@
cursor: default;
&.contained {
padding: _.unit(1) _.unit(1) _.unit(1) _.unit(3);
padding: _.unit(1) _.unit(2);
background: var(--color-layer-2);
}
@ -31,12 +31,16 @@
text-overflow: ellipsis;
}
.copyIcon {
.copyIconButton {
margin-left: _.unit(3);
height: 20px;
width: 20px;
svg {
width: 16px;
height: 16px;
.copyIcon {
svg {
width: 16px;
height: 16px;
}
}
}
}

15
packages/console/src/components/CopyToClipboard/index.tsx
View file

@ -28,7 +28,7 @@ const CopyToClipboard = ({
hasVisibilityToggle,
variant = 'contained',
}: Props) => {
const copyIconReference = useRef<HTMLDivElement>(null);
const copyIconReference = useRef<HTMLButtonElement>(null);
const [copyState, setCopyState] = useState<CopyState>('copy');
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.general' });
const [showHiddenContent, setShowHiddenContent] = useState(false);
@ -78,11 +78,14 @@ const CopyToClipboard = ({
</IconButton>
</div>
)}
<div ref={copyIconReference} className={styles.copyIcon}>
<IconButton onClick={copy}>
<Copy />
</IconButton>
</div>
<IconButton
ref={copyIconReference}
className={styles.copyIconButton}
iconClassName={styles.copyIcon}
onClick={copy}
>
<Copy />
</IconButton>
<Tooltip
anchorRef={copyIconReference}
content={t(copyState)}

5
packages/console/src/components/IconButton/index.tsx
View file

@ -8,10 +8,11 @@ import * as styles from './index.module.scss';
export type Props = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
size?: 'small' | 'medium' | 'large';
tooltip?: ReactNode;
iconClassName?: string;
};
const IconButton = (
{ size = 'medium', children, className, tooltip, ...rest }: Props,
{ size = 'medium', children, className, tooltip, iconClassName, ...rest }: Props,
reference: ForwardedRef<HTMLButtonElement>
) => {
const tipRef = useRef<HTMLDivElement>(null);
@ -23,7 +24,7 @@ const IconButton = (
className={classNames(styles.button, styles[size], className)}
{...rest}
>
<div ref={tipRef} className={styles.icon}>
<div ref={tipRef} className={classNames(styles.icon, iconClassName)}>
{children}
</div>
{tooltip && (