Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console): support small-size CopyToClipBoard (#2617)

Browse source
This commit is contained in:
Xiao Yijun 2022-12-09 12:19:25 +08:00 committed by GitHub
parent ce1aaeeae3
commit 6a03e286c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,18 +31,35 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.copyToolTipAnchor { .copyToolTipAnchor {
margin-left: _.unit(3); margin-left: _.unit(2);
} }
}
.copyIconButton { &.default {
height: 20px; .row {
width: 20px; .copyToolTipAnchor {
margin-left: _.unit(3);
}
}
}
.copyIcon { &.small {
svg { .row {
width: 16px; .copyToolTipAnchor {
height: 16px; margin-left: _.unit(1);
}
.iconButton {
height: 20px;
width: 20px;
.icon {
svg {
width: 12px;
height: 12px;
}
} }
} }
} }

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

@ -18,6 +18,7 @@ type Props = {
className?: string; className?: string;
variant?: 'text' | 'contained' | 'border' | 'icon'; variant?: 'text' | 'contained' | 'border' | 'icon';
hasVisibilityToggle?: boolean; hasVisibilityToggle?: boolean;
size?: 'default' | 'small';
}; };
type CopyState = TFuncKey<'translation', 'admin_console.general'>; type CopyState = TFuncKey<'translation', 'admin_console.general'>;
@ -27,6 +28,7 @@ const CopyToClipboard = ({
className, className,
hasVisibilityToggle, hasVisibilityToggle,
variant = 'contained', variant = 'contained',
size = 'default',
}: Props) => { }: Props) => {
const copyIconReference = useRef<HTMLButtonElement>(null); const copyIconReference = useRef<HTMLButtonElement>(null);
const [copyState, setCopyState] = useState<CopyState>('copy'); const [copyState, setCopyState] = useState<CopyState>('copy');
@ -59,7 +61,7 @@ const CopyToClipboard = ({
return ( return (
<div <div
className={classNames(styles.container, styles[variant], className)} className={classNames(styles.container, styles[variant], styles[size], className)}
role="button" role="button"
tabIndex={0} tabIndex={0}
onKeyDown={onKeyDownHandler((event) => { onKeyDown={onKeyDownHandler((event) => {
@ -72,11 +74,13 @@ const CopyToClipboard = ({
<div className={styles.row}> <div className={styles.row}>
{variant !== 'icon' && <div className={styles.content}>{displayValue}</div>} {variant !== 'icon' && <div className={styles.content}>{displayValue}</div>}
{hasVisibilityToggle && ( {hasVisibilityToggle && (
<div className={styles.eye}> <IconButton
<IconButton onClick={toggleHiddenContent}> className={styles.iconButton}
{showHiddenContent ? <EyeClosed /> : <Eye />} iconClassName={styles.icon}
</IconButton> onClick={toggleHiddenContent}
</div> >
{showHiddenContent ? <EyeClosed /> : <Eye />}
</IconButton>
)} )}
<Tooltip <Tooltip
className={classNames(copyState === 'copied' && styles.successfulTooltip)} className={classNames(copyState === 'copied' && styles.successfulTooltip)}
@ -85,8 +89,8 @@ const CopyToClipboard = ({
> >
<IconButton <IconButton
ref={copyIconReference} ref={copyIconReference}
className={styles.copyIconButton} className={styles.iconButton}
iconClassName={styles.copyIcon} iconClassName={styles.icon}
onClick={copy} onClick={copy}
> >
<Copy /> <Copy />

2
packages/console/src/pages/ApiResourceDetails/index.tsx
View file

@ -117,7 +117,7 @@ const ApiResourceDetails = () => {
<Icon className={styles.icon} /> <Icon className={styles.icon} />
<div className={styles.meta}> <div className={styles.meta}>
<div className={styles.name}>{data.name}</div> <div className={styles.name}>{data.name}</div>
<CopyToClipboard value={data.indicator} /> <CopyToClipboard size="small" value={data.indicator} />
</div> </div>
</div> </div>
{!isLogtoManagementApiResource && ( {!isLogtoManagementApiResource && (

2
packages/console/src/pages/ApplicationDetails/index.tsx
View file

@ -140,7 +140,7 @@ const ApplicationDetails = () => {
<div className={styles.type}>{t(`${applicationTypeI18nKey[data.type]}.title`)}</div> <div className={styles.type}>{t(`${applicationTypeI18nKey[data.type]}.title`)}</div>
<div className={styles.verticalBar} /> <div className={styles.verticalBar} />
<div className={styles.text}>App ID</div> <div className={styles.text}>App ID</div>
<CopyToClipboard value={data.id} /> <CopyToClipboard size="small" value={data.id} />
</div> </div>
</div> </div>
<div className={styles.operations}> <div className={styles.operations}>

2
packages/console/src/pages/UserDetails/index.tsx
View file

@ -110,7 +110,7 @@ const UserDetails = () => {
</> </>
)} )}
<div className={styles.text}>User ID</div> <div className={styles.text}>User ID</div>
<CopyToClipboard value={data.id} /> <CopyToClipboard size="small" value={data.id} />
</div> </div>
</div> </div>
<div> <div>