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

fix(console): application icon size (#1237)

Browse source
This commit is contained in:
Xiao Yijun 2022-06-27 10:47:38 +08:00 • committed by GitHub
parent 560408fc9a
commit 86aec6cdf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/console/src/components/ApplicationIcon/index.tsx
View file

@ -1,32 +1,20 @@
import { AppearanceMode, ApplicationType } from '@logto/schemas'; import { AppearanceMode, ApplicationType } from '@logto/schemas';
import React from 'react'; import React from 'react';
import NativeAppDark from '@/assets/images/native-app-dark.svg'; import { darkModeApplicationIconMap, lightModeApplicationIconMap } from '@/consts';
import NativeApp from '@/assets/images/native-app.svg';
import SinglePageAppDark from '@/assets/images/single-page-app-dark.svg';
import SinglePageApp from '@/assets/images/single-page-app.svg';
import TraditionalWebAppDark from '@/assets/images/traditional-web-app-dark.svg';
import TraditionalWebApp from '@/assets/images/traditional-web-app.svg';
import { useTheme } from '@/hooks/use-theme'; import { useTheme } from '@/hooks/use-theme';
type Props = { type Props = {
type: ApplicationType; type: ApplicationType;
className?: string;
}; };
const ApplicationIcon = ({ type }: Props) => { const ApplicationIcon = ({ type, className }: Props) => {
const theme = useTheme(); const theme = useTheme();
const isLightMode = theme === AppearanceMode.LightMode; const isLightMode = theme === AppearanceMode.LightMode;
const Icon = isLightMode ? lightModeApplicationIconMap[type] : darkModeApplicationIconMap[type];
switch (type) { return <Icon className={className} />;
case ApplicationType.Native:
return isLightMode ? <NativeApp /> : <NativeAppDark />;
case ApplicationType.SPA:
return isLightMode ? <SinglePageApp /> : <SinglePageAppDark />;
case ApplicationType.Traditional:
return isLightMode ? <TraditionalWebApp /> : <TraditionalWebAppDark />;
default:
return null;
}
}; };
export default ApplicationIcon; export default ApplicationIcon;

23
packages/console/src/consts/applications.ts
View file

@ -1,7 +1,30 @@
import { ApplicationType } from '@logto/schemas'; import { ApplicationType } from '@logto/schemas';
import NativeAppDark from '@/assets/images/native-app-dark.svg';
import NativeApp from '@/assets/images/native-app.svg';
import SinglePageAppDark from '@/assets/images/single-page-app-dark.svg';
import SinglePageApp from '@/assets/images/single-page-app.svg';
import TraditionalWebAppDark from '@/assets/images/traditional-web-app-dark.svg';
import TraditionalWebApp from '@/assets/images/traditional-web-app.svg';
export const applicationTypeI18nKey = Object.freeze({ export const applicationTypeI18nKey = Object.freeze({
[ApplicationType.Native]: 'applications.type.native', [ApplicationType.Native]: 'applications.type.native',
[ApplicationType.SPA]: 'applications.type.spa', [ApplicationType.SPA]: 'applications.type.spa',
[ApplicationType.Traditional]: 'applications.type.traditional', [ApplicationType.Traditional]: 'applications.type.traditional',
} as const); } as const);
type ApplicationIconMap = {
[key in ApplicationType]: SvgComponent;
};
export const lightModeApplicationIconMap: ApplicationIconMap = Object.freeze({
[ApplicationType.Native]: NativeApp,
[ApplicationType.SPA]: SinglePageApp,
[ApplicationType.Traditional]: TraditionalWebApp,
} as const);
export const darkModeApplicationIconMap: ApplicationIconMap = Object.freeze({
[ApplicationType.Native]: NativeAppDark,
[ApplicationType.SPA]: SinglePageAppDark,
[ApplicationType.Traditional]: TraditionalWebAppDark,
} as const);

6
packages/console/src/pages/ApplicationDetails/index.module.scss
View file

@ -34,6 +34,12 @@
margin-left: _.unit(6); margin-left: _.unit(6);
} }
.icon {
margin-left: _.unit(2);
width: 60px;
height: 60px;
}
.operations { .operations {
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -115,7 +115,7 @@ const ApplicationDetails = () => {
{data && oidcConfig && ( {data && oidcConfig && (
<> <>
<Card className={styles.header}> <Card className={styles.header}>
<ApplicationIcon type={data.type} /> <ApplicationIcon type={data.type} className={styles.icon} />
<div className={styles.metadata}> <div className={styles.metadata}>
<div className={styles.name}>{data.name}</div> <div className={styles.name}>{data.name}</div>
<div className={styles.details}> <div className={styles.details}>