mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
feat(console): copy to clipboard
This commit is contained in:
Gao Sun
parent
b30c431140
commit
f31a6e0db8
7 changed files with 82 additions and 9 deletions
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.light {
|
||||
--color-card-background: #fff;
|
||||
--color-on-surface: #eff1f1;
|
||||
--color-on-surface-variant: #47464e;
|
||||
--color-primary: #4f37f9;
|
||||
--color-primary-30: #3500e3;
|
||||
|
|
@ -43,6 +44,7 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
|
|||
--font-heading-small: 600 24px/32px #{$font-family};
|
||||
--font-body: normal 16px/22px #{$font-family};
|
||||
--font-small-text: normal 12px/17px #{$font-family};
|
||||
--font-caption: normal 14px/17px #{$font-family};
|
||||
--font-button: 500 14px/20px #{$font-family};
|
||||
--font-subhead-2: 500 14px/20px #{$font-family};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
padding: _.unit(3);
|
||||
border-radius: _.unit(2);
|
||||
background: var(--color-on-surface);
|
||||
color: var(--color-on-secondary-container);
|
||||
font: var(--font-caption);
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> svg {
|
||||
margin-left: _.unit(3);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
packages/console/src/components/CopyToClipboard/index.tsx
Normal file
41
packages/console/src/components/CopyToClipboard/index.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import React, { SVGProps } from 'react';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
};
|
||||
|
||||
const CopyIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M11.6667 18.3332H3.33335C2.88675 18.3487 2.45375 18.1781 2.13776 17.8621C1.82177 17.5461 1.65116 17.1131 1.66668 16.6665V8.33317C1.65116 7.88656 1.82177 7.45356 2.13776 7.13758C2.45375 6.82159 2.88675 6.65098 3.33335 6.6665H6.66668V3.33317C6.65117 2.88656 6.82177 2.45356 7.13776 2.13757C7.45375 1.82159 7.88675 1.65098 8.33335 1.6665H16.6667C17.1133 1.65098 17.5463 1.82159 17.8623 2.13757C18.1783 2.45356 18.3489 2.88656 18.3334 3.33317V11.6665C18.3486 12.113 18.1779 12.5459 17.862 12.8618C17.5461 13.1778 17.1132 13.3484 16.6667 13.3332H13.3334V16.6665C13.3486 17.113 13.1779 17.5459 12.862 17.8618C12.5461 18.1778 12.1132 18.3484 11.6667 18.3332ZM3.33335 8.33317V16.6665H11.6667V13.3332H8.33335C7.88682 13.3484 7.45396 13.1778 7.13803 12.8618C6.8221 12.5459 6.65141 12.113 6.66668 11.6665V8.33317H3.33335ZM8.33335 3.33317V11.6665H16.6667V3.33317H8.33335Z"
|
||||
fill="#747778"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CopyToClipboard = ({ value }: Props) => {
|
||||
const copy = () => {
|
||||
// TO-DO: toast after finished
|
||||
void navigator.clipboard.writeText(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.row}>
|
||||
{value}
|
||||
<CopyIcon onClick={copy} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopyToClipboard;
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
> div:not(:first-child) {
|
||||
margin-left: _.unit(4);
|
||||
|
|
|
|||
|
|
@ -9,3 +9,7 @@
|
|||
margin-top: _.unit(6);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.applicationName {
|
||||
width: 360px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import CardTitle from '@/components/CardTitle';
|
||||
import CopyToClipboard from '@/components/CopyToClipboard';
|
||||
import ImagePlaceholder from '@/components/ImagePlaceholder';
|
||||
import ItemPreview from '@/components/ItemPreview';
|
||||
|
||||
|
|
@ -18,7 +19,7 @@ const Applications = () => {
|
|||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Application Name</td>
|
||||
<td className={styles.applicationName}>Application Name</td>
|
||||
<td>Client ID</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -31,7 +32,9 @@ const Applications = () => {
|
|||
icon={<ImagePlaceholder />}
|
||||
/>
|
||||
</td>
|
||||
<td>RUMatENw0rFWO5aGbMI8tY2Qol50eOg3</td>
|
||||
<td>
|
||||
<CopyToClipboard value="RUMatENw0rFWO5aGbMI8tY2Qol50eOg3" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -23,9 +23,10 @@ table {
|
|||
border-radius: _.unit(2);
|
||||
border-spacing: 0;
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
thead {
|
||||
td {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
padding: _.unit(3) _.unit(4);
|
||||
|
||||
&:first-child,
|
||||
|
|
@ -35,14 +36,15 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
border-top: 1px solid var(--color-neutral-90);
|
||||
padding: _.unit(5) _.unit(4);
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
padding: _.unit(5) _.unit(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue