mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): application detail header (#376)
This commit is contained in:
parent
f0ab8f0c96
commit
9b89971d34
8 changed files with 38 additions and 13 deletions
|
@ -60,4 +60,5 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
|
|||
--font-caption-bold: 600 14px/20px #{$font-family};
|
||||
--font-button: 500 14px/20px #{$font-family};
|
||||
--font-subhead-2: 500 14px/20px #{$font-family};
|
||||
--font-label-medium: 500 12px/16px #{$font-family};
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@ import * as styles from './index.module.scss';
|
|||
|
||||
type Props = {
|
||||
value: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
|
||||
|
@ -26,7 +27,7 @@ const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
|
|||
|
||||
type CopyState = TFuncKey<'translation', 'admin_console.copy'>;
|
||||
|
||||
const CopyToClipboard = ({ value }: Props) => {
|
||||
const CopyToClipboard = ({ value, className }: Props) => {
|
||||
const copyIconReference = useRef<SVGSVGElement>(null);
|
||||
const [copyState, setCopyState] = useState<CopyState>('pending');
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.copy' });
|
||||
|
@ -45,7 +46,7 @@ const CopyToClipboard = ({ value }: Props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
className={classNames(styles.container, className)}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
|
|
|
@ -12,10 +12,8 @@
|
|||
}
|
||||
|
||||
.line {
|
||||
border: 1px solid #c4c7c7;
|
||||
@include _.vertical-bar;
|
||||
height: 24px;
|
||||
width: 0;
|
||||
flex: 0 0 0;
|
||||
margin: 0 _.unit(3);
|
||||
}
|
||||
|
||||
|
|
|
@ -38,8 +38,24 @@
|
|||
}
|
||||
|
||||
.type {
|
||||
background-color: var(--color-neutral-90);
|
||||
padding: _.unit(0.5) _.unit(2);
|
||||
border-radius: 10px;
|
||||
font: var(--font-label-medium);
|
||||
}
|
||||
|
||||
.text {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
}
|
||||
|
||||
.verticalBar {
|
||||
@include _.vertical-bar;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
|
|||
import useSWR from 'swr';
|
||||
|
||||
import BackLink from '@/components/BackLink';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import CopyToClipboard from '@/components/CopyToClipboard';
|
||||
import ImagePlaceholder from '@/components/ImagePlaceholder';
|
||||
|
@ -28,16 +29,17 @@ const ApplicationDetails = () => {
|
|||
<Card className={styles.header}>
|
||||
<ImagePlaceholder size={76} borderRadius={16} />
|
||||
<div className={styles.metadata}>
|
||||
<div>
|
||||
<div className={styles.name}>{data.name}</div>
|
||||
<div>
|
||||
<div className={styles.type}>{t(`${applicationTypeI18nKey[data.type]}.title`)}</div>
|
||||
<div className={styles.verticalBar} />
|
||||
<div className={styles.text}>App ID</div>
|
||||
<CopyToClipboard value={data.id} className={styles.copy} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.type}>ID</div>
|
||||
<CopyToClipboard value={data.id} />
|
||||
<Button title="admin_console.application_details.check_help_guide" />
|
||||
</div>
|
||||
</div>
|
||||
<div>action</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -18,3 +18,8 @@
|
|||
@mixin form-text-field {
|
||||
width: 556px;
|
||||
}
|
||||
|
||||
@mixin vertical-bar {
|
||||
border: 1px solid #c4c7c7;
|
||||
width: 0;
|
||||
}
|
||||
|
|
|
@ -61,7 +61,7 @@ const translation = {
|
|||
client_id: 'Client ID',
|
||||
type: {
|
||||
native: {
|
||||
title: 'Native',
|
||||
title: 'Native App',
|
||||
subtitle: 'Mobile, desktop, CLI and smart device apps running natively.',
|
||||
description: 'E.g.: iOS, Electron, Apple TV apps',
|
||||
},
|
||||
|
@ -79,6 +79,7 @@ const translation = {
|
|||
},
|
||||
application_details: {
|
||||
back_to_applications: 'Back to Applications',
|
||||
check_help_guide: 'Check Help Guide',
|
||||
},
|
||||
api_resources: {
|
||||
title: 'API Resources',
|
||||
|
|
|
@ -63,7 +63,7 @@ const translation = {
|
|||
client_id: 'Client ID',
|
||||
type: {
|
||||
native: {
|
||||
title: 'Native',
|
||||
title: 'Native App',
|
||||
subtitle: 'Mobile, desktop, CLI and smart device apps running natively.',
|
||||
description: 'E.g.: iOS, Electron, Apple TV apps',
|
||||
},
|
||||
|
@ -81,6 +81,7 @@ const translation = {
|
|||
},
|
||||
application_details: {
|
||||
back_to_applications: '返回应用集',
|
||||
check_help_guide: 'Check Help Guide',
|
||||
},
|
||||
api_resources: {
|
||||
title: 'API Resources',
|
||||
|
|
Loading…
Reference in a new issue