Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-17 22:31:28 -05:00
Code Issues Activity

refactor(console): connector platform icon (#923)

Browse source
This commit is contained in:
Wang Sijie 2022-05-23 17:58:46 +08:00 • committed by GitHub
parent 16ec018b71
commit 57952e4ddc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 58 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/console/src/icons/ConnectorPlatformIcon.tsx Normal file
View file

@ -0,0 +1,47 @@
import { ConnectorPlatform } from '@logto/schemas';
import React from 'react';
const Native = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.4735 10.8599L8.3735 10.7799C8.33633 10.7547 8.29598 10.7345 8.2535 10.7199L8.1335 10.6666C8.02538 10.644 7.91334 10.6486 7.80745 10.68C7.70155 10.7114 7.60512 10.7687 7.52683 10.8466C7.46794 10.9114 7.42059 10.9858 7.38683 11.0666C7.33638 11.1881 7.32298 11.3217 7.34833 11.4508C7.37368 11.5799 7.43665 11.6985 7.52929 11.7919C7.62194 11.8853 7.74014 11.9491 7.869 11.9755C7.99787 12.0018 8.13164 11.9894 8.2535 11.9399C8.33316 11.9013 8.40718 11.8519 8.4735 11.7933C8.566 11.6995 8.62867 11.5805 8.65358 11.4511C8.6785 11.3218 8.66455 11.188 8.6135 11.0666C8.58026 10.9895 8.53276 10.9194 8.4735 10.8599ZM10.6668 1.33325H5.3335C4.80306 1.33325 4.29436 1.54397 3.91928 1.91904C3.54421 2.29411 3.3335 2.80282 3.3335 3.33325V12.6666C3.3335 13.197 3.54421 13.7057 3.91928 14.0808C4.29436 14.4559 4.80306 14.6666 5.3335 14.6666H10.6668C11.1973 14.6666 11.706 14.4559 12.081 14.0808C12.4561 13.7057 12.6668 13.197 12.6668 12.6666V3.33325C12.6668 2.80282 12.4561 2.29411 12.081 1.91904C11.706 1.54397 11.1973 1.33325 10.6668 1.33325ZM11.3335 12.6666C11.3335 12.8434 11.2633 13.013 11.1382 13.138C11.0132 13.263 10.8436 13.3333 10.6668 13.3333H5.3335C5.15669 13.3333 4.98712 13.263 4.86209 13.138C4.73707 13.013 4.66683 12.8434 4.66683 12.6666V3.33325C4.66683 3.15644 4.73707 2.98687 4.86209 2.86185C4.98712 2.73682 5.15669 2.66659 5.3335 2.66659H10.6668C10.8436 2.66659 11.0132 2.73682 11.1382 2.86185C11.2633 2.98687 11.3335 3.15644 11.3335 3.33325V12.6666Z"
fill="currentColor"
/>
</svg>
);
const Web = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.6668 2H3.3335C2.80306 2 2.29436 2.21071 1.91928 2.58579C1.54421 2.96086 1.3335 3.46957 1.3335 4V9.33333C1.3335 9.86377 1.54421 10.3725 1.91928 10.7475C2.29436 11.1226 2.80306 11.3333 3.3335 11.3333H7.3335V12.6667H4.66683C4.49002 12.6667 4.32045 12.7369 4.19543 12.8619C4.0704 12.987 4.00016 13.1565 4.00016 13.3333C4.00016 13.5101 4.0704 13.6797 4.19543 13.8047C4.32045 13.9298 4.49002 14 4.66683 14H11.3335C11.5103 14 11.6799 13.9298 11.8049 13.8047C11.9299 13.6797 12.0002 13.5101 12.0002 13.3333C12.0002 13.1565 11.9299 12.987 11.8049 12.8619C11.6799 12.7369 11.5103 12.6667 11.3335 12.6667H8.66683V11.3333H12.6668C13.1973 11.3333 13.706 11.1226 14.081 10.7475C14.4561 10.3725 14.6668 9.86377 14.6668 9.33333V4C14.6668 3.46957 14.4561 2.96086 14.081 2.58579C13.706 2.21071 13.1973 2 12.6668 2ZM13.3335 9.33333C13.3335 9.51014 13.2633 9.67971 13.1382 9.80474C13.0132 9.92976 12.8436 10 12.6668 10H3.3335C3.15669 10 2.98712 9.92976 2.86209 9.80474C2.73707 9.67971 2.66683 9.51014 2.66683 9.33333V4C2.66683 3.82319 2.73707 3.65362 2.86209 3.5286C2.98712 3.40357 3.15669 3.33333 3.3335 3.33333H12.6668C12.8436 3.33333 13.0132 3.40357 13.1382 3.5286C13.2633 3.65362 13.3335 3.82319 13.3335 4V9.33333Z"
fill="currentColor"
/>
</svg>
);
const Universal = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.6665 3.33341C6.53465 3.33341 6.40576 3.37251 6.29612 3.44577C6.18649 3.51902 6.10104 3.62314 6.05058 3.74496C6.00013 3.86678 5.98692 4.00082 6.01265 4.13014C6.03837 4.25946 6.10186 4.37825 6.1951 4.47149C6.28833 4.56472 6.40712 4.62821 6.53644 4.65394C6.66576 4.67966 6.79981 4.66646 6.92163 4.616C7.04344 4.56554 7.14756 4.48009 7.22082 4.37046C7.29407 4.26083 7.33317 4.13194 7.33317 4.00008C7.33317 3.82327 7.26293 3.6537 7.13791 3.52868C7.01288 3.40365 6.84331 3.33341 6.6665 3.33341ZM3.99984 3.33341C3.86798 3.33341 3.73909 3.37251 3.62946 3.44577C3.51982 3.51902 3.43438 3.62314 3.38392 3.74496C3.33346 3.86678 3.32026 4.00082 3.34598 4.13014C3.3717 4.25946 3.4352 4.37825 3.52843 4.47149C3.62167 4.56472 3.74046 4.62821 3.86978 4.65394C3.9991 4.67966 4.13314 4.66646 4.25496 4.616C4.37678 4.56554 4.4809 4.48009 4.55415 4.37046C4.6274 4.26083 4.6665 4.13194 4.6665 4.00008C4.6665 3.82327 4.59627 3.6537 4.47124 3.52868C4.34622 3.40365 4.17665 3.33341 3.99984 3.33341ZM9.33317 3.33341C9.20132 3.33341 9.07242 3.37251 8.96279 3.44577C8.85316 3.51902 8.76771 3.62314 8.71725 3.74496C8.66679 3.86678 8.65359 4.00082 8.67931 4.13014C8.70504 4.25946 8.76853 4.37825 8.86177 4.47149C8.955 4.56472 9.07379 4.62821 9.20311 4.65394C9.33243 4.67966 9.46648 4.66646 9.58829 4.616C9.71011 4.56554 9.81423 4.48009 9.88748 4.37046C9.96074 4.26083 9.99984 4.13194 9.99984 4.00008C9.99984 3.82327 9.9296 3.6537 9.80457 3.52868C9.67955 3.40365 9.50998 3.33341 9.33317 3.33341ZM13.3332 0.666748H2.6665C2.13607 0.666748 1.62736 0.877462 1.25229 1.25253C0.877218 1.62761 0.666504 2.13631 0.666504 2.66675V13.3334C0.666504 13.8638 0.877218 14.3726 1.25229 14.7476C1.62736 15.1227 2.13607 15.3334 2.6665 15.3334H13.3332C13.8636 15.3334 14.3723 15.1227 14.7474 14.7476C15.1225 14.3726 15.3332 13.8638 15.3332 13.3334V2.66675C15.3332 2.13631 15.1225 1.62761 14.7474 1.25253C14.3723 0.877462 13.8636 0.666748 13.3332 0.666748ZM13.9998 13.3334C13.9998 13.5102 13.9296 13.6798 13.8046 13.8048C13.6796 13.9298 13.51 14.0001 13.3332 14.0001H2.6665C2.48969 14.0001 2.32012 13.9298 2.1951 13.8048C2.07008 13.6798 1.99984 13.5102 1.99984 13.3334V7.33341H13.9998V13.3334ZM13.9998 6.00008H1.99984V2.66675C1.99984 2.48994 2.07008 2.32037 2.1951 2.19534C2.32012 2.07032 2.48969 2.00008 2.6665 2.00008H13.3332C13.51 2.00008 13.6796 2.07032 13.8046 2.19534C13.9296 2.32037 13.9998 2.48994 13.9998 2.66675V6.00008Z"
fill="currentColor"
/>
</svg>
);
type Props = {
platform: ConnectorPlatform;
};
const ConnectorPlatformIcon = ({ platform }: Props) => {
if (platform === ConnectorPlatform.Native) {
return <Native />;
}
if (platform === ConnectorPlatform.Web) {
return <Web />;
}
return <Universal />;
};
export default ConnectorPlatformIcon;

12
packages/console/src/icons/Native.tsx
View file

@ -1,12 +0,0 @@
import React from 'react';
const Native = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.4735 10.8599L8.3735 10.7799C8.33633 10.7547 8.29598 10.7345 8.2535 10.7199L8.1335 10.6666C8.02538 10.644 7.91334 10.6486 7.80745 10.68C7.70155 10.7114 7.60512 10.7687 7.52683 10.8466C7.46794 10.9114 7.42059 10.9858 7.38683 11.0666C7.33638 11.1881 7.32298 11.3217 7.34833 11.4508C7.37368 11.5799 7.43665 11.6985 7.52929 11.7919C7.62194 11.8853 7.74014 11.9491 7.869 11.9755C7.99787 12.0018 8.13164 11.9894 8.2535 11.9399C8.33316 11.9013 8.40718 11.8519 8.4735 11.7933C8.566 11.6995 8.62867 11.5805 8.65358 11.4511C8.6785 11.3218 8.66455 11.188 8.6135 11.0666C8.58026 10.9895 8.53276 10.9194 8.4735 10.8599ZM10.6668 1.33325H5.3335C4.80306 1.33325 4.29436 1.54397 3.91928 1.91904C3.54421 2.29411 3.3335 2.80282 3.3335 3.33325V12.6666C3.3335 13.197 3.54421 13.7057 3.91928 14.0808C4.29436 14.4559 4.80306 14.6666 5.3335 14.6666H10.6668C11.1973 14.6666 11.706 14.4559 12.081 14.0808C12.4561 13.7057 12.6668 13.197 12.6668 12.6666V3.33325C12.6668 2.80282 12.4561 2.29411 12.081 1.91904C11.706 1.54397 11.1973 1.33325 10.6668 1.33325ZM11.3335 12.6666C11.3335 12.8434 11.2633 13.013 11.1382 13.138C11.0132 13.263 10.8436 13.3333 10.6668 13.3333H5.3335C5.15669 13.3333 4.98712 13.263 4.86209 13.138C4.73707 13.013 4.66683 12.8434 4.66683 12.6666V3.33325C4.66683 3.15644 4.73707 2.98687 4.86209 2.86185C4.98712 2.73682 5.15669 2.66659 5.3335 2.66659H10.6668C10.8436 2.66659 11.0132 2.73682 11.1382 2.86185C11.2633 2.98687 11.3335 3.15644 11.3335 3.33325V12.6666Z"
fill="currentColor"
/>
</svg>
);
export default Native;

12
packages/console/src/icons/Universal.tsx
View file

@ -1,12 +0,0 @@
import React from 'react';
const Universal = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.6665 3.33341C6.53465 3.33341 6.40576 3.37251 6.29612 3.44577C6.18649 3.51902 6.10104 3.62314 6.05058 3.74496C6.00013 3.86678 5.98692 4.00082 6.01265 4.13014C6.03837 4.25946 6.10186 4.37825 6.1951 4.47149C6.28833 4.56472 6.40712 4.62821 6.53644 4.65394C6.66576 4.67966 6.79981 4.66646 6.92163 4.616C7.04344 4.56554 7.14756 4.48009 7.22082 4.37046C7.29407 4.26083 7.33317 4.13194 7.33317 4.00008C7.33317 3.82327 7.26293 3.6537 7.13791 3.52868C7.01288 3.40365 6.84331 3.33341 6.6665 3.33341ZM3.99984 3.33341C3.86798 3.33341 3.73909 3.37251 3.62946 3.44577C3.51982 3.51902 3.43438 3.62314 3.38392 3.74496C3.33346 3.86678 3.32026 4.00082 3.34598 4.13014C3.3717 4.25946 3.4352 4.37825 3.52843 4.47149C3.62167 4.56472 3.74046 4.62821 3.86978 4.65394C3.9991 4.67966 4.13314 4.66646 4.25496 4.616C4.37678 4.56554 4.4809 4.48009 4.55415 4.37046C4.6274 4.26083 4.6665 4.13194 4.6665 4.00008C4.6665 3.82327 4.59627 3.6537 4.47124 3.52868C4.34622 3.40365 4.17665 3.33341 3.99984 3.33341ZM9.33317 3.33341C9.20132 3.33341 9.07242 3.37251 8.96279 3.44577C8.85316 3.51902 8.76771 3.62314 8.71725 3.74496C8.66679 3.86678 8.65359 4.00082 8.67931 4.13014C8.70504 4.25946 8.76853 4.37825 8.86177 4.47149C8.955 4.56472 9.07379 4.62821 9.20311 4.65394C9.33243 4.67966 9.46648 4.66646 9.58829 4.616C9.71011 4.56554 9.81423 4.48009 9.88748 4.37046C9.96074 4.26083 9.99984 4.13194 9.99984 4.00008C9.99984 3.82327 9.9296 3.6537 9.80457 3.52868C9.67955 3.40365 9.50998 3.33341 9.33317 3.33341ZM13.3332 0.666748H2.6665C2.13607 0.666748 1.62736 0.877462 1.25229 1.25253C0.877218 1.62761 0.666504 2.13631 0.666504 2.66675V13.3334C0.666504 13.8638 0.877218 14.3726 1.25229 14.7476C1.62736 15.1227 2.13607 15.3334 2.6665 15.3334H13.3332C13.8636 15.3334 14.3723 15.1227 14.7474 14.7476C15.1225 14.3726 15.3332 13.8638 15.3332 13.3334V2.66675C15.3332 2.13631 15.1225 1.62761 14.7474 1.25253C14.3723 0.877462 13.8636 0.666748 13.3332 0.666748ZM13.9998 13.3334C13.9998 13.5102 13.9296 13.6798 13.8046 13.8048C13.6796 13.9298 13.51 14.0001 13.3332 14.0001H2.6665C2.48969 14.0001 2.32012 13.9298 2.1951 13.8048C2.07008 13.6798 1.99984 13.5102 1.99984 13.3334V7.33341H13.9998V13.3334ZM13.9998 6.00008H1.99984V2.66675C1.99984 2.48994 2.07008 2.32037 2.1951 2.19534C2.32012 2.07032 2.48969 2.00008 2.6665 2.00008H13.3332C13.51 2.00008 13.6796 2.07032 13.8046 2.19534C13.9296 2.32037 13.9998 2.48994 13.9998 2.66675V6.00008Z"
fill="currentColor"
/>
</svg>
);
export default Universal;

12
packages/console/src/icons/Web.tsx
View file

@ -1,12 +0,0 @@
import React from 'react';
const Web = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.6668 2H3.3335C2.80306 2 2.29436 2.21071 1.91928 2.58579C1.54421 2.96086 1.3335 3.46957 1.3335 4V9.33333C1.3335 9.86377 1.54421 10.3725 1.91928 10.7475C2.29436 11.1226 2.80306 11.3333 3.3335 11.3333H7.3335V12.6667H4.66683C4.49002 12.6667 4.32045 12.7369 4.19543 12.8619C4.0704 12.987 4.00016 13.1565 4.00016 13.3333C4.00016 13.5101 4.0704 13.6797 4.19543 13.8047C4.32045 13.9298 4.49002 14 4.66683 14H11.3335C11.5103 14 11.6799 13.9298 11.8049 13.8047C11.9299 13.6797 12.0002 13.5101 12.0002 13.3333C12.0002 13.1565 11.9299 12.987 11.8049 12.8619C11.6799 12.7369 11.5103 12.6667 11.3335 12.6667H8.66683V11.3333H12.6668C13.1973 11.3333 13.706 11.1226 14.081 10.7475C14.4561 10.3725 14.6668 9.86377 14.6668 9.33333V4C14.6668 3.46957 14.4561 2.96086 14.081 2.58579C13.706 2.21071 13.1973 2 12.6668 2ZM13.3335 9.33333C13.3335 9.51014 13.2633 9.67971 13.1382 9.80474C13.0132 9.92976 12.8436 10 12.6668 10H3.3335C3.15669 10 2.98712 9.92976 2.86209 9.80474C2.73707 9.67971 2.66683 9.51014 2.66683 9.33333V4C2.66683 3.82319 2.73707 3.65362 2.86209 3.5286C2.98712 3.40357 3.15669 3.33333 3.3335 3.33333H12.6668C12.8436 3.33333 13.0132 3.40357 13.1382 3.5286C13.2633 3.65362 13.3335 3.82319 13.3335 4V9.33333Z"
fill="currentColor"
/>
</svg>
);
export default Web;

16
packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
View file

@ -1,13 +1,11 @@
import { ConnectorDTO, ConnectorPlatform } from '@logto/schemas';
import { ConnectorDTO } from '@logto/schemas';
import classNames from 'classnames';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import useSWR from 'swr';
import Native from '@/icons/Native';
import Universal from '@/icons/Universal';
import Web from '@/icons/Web';
import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
import * as styles from './index.module.scss';
@ -32,11 +30,11 @@ const ConnectorTabs = ({ target, connectorId }: Props) => {
to={`/connectors/${connector.id}`}
className={classNames(styles.tab, connector.id === connectorId && styles.active)}
>
<div className={styles.icon}>
{connector.platform === ConnectorPlatform.Native && <Native />}
{connector.platform === ConnectorPlatform.Web && <Web />}
{connector.platform === ConnectorPlatform.Universal && <Universal />}
</div>
{connector.metadata.platform && (
<div className={styles.icon}>
<ConnectorPlatformIcon platform={connector.metadata.platform} />
</div>
)}
{connector.metadata.platform}
{!connector.enabled && (
<div className={styles.notSet}>{t('connector_details.not_set')}</div>

12
packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx
View file

@ -1,4 +1,4 @@
import { ConnectorPlatform, ConnectorType } from '@logto/schemas';
import { ConnectorType } from '@logto/schemas';
import { conditionalString } from '@silverhand/essentials';
import React from 'react';
import { useTranslation } from 'react-i18next';
@ -8,9 +8,7 @@ import Alert from '@/components/Alert';
import Transfer from '@/components/Transfer';
import UnnamedTrans from '@/components/UnnamedTrans';
import useConnectorGroups from '@/hooks/use-connector-groups';
import Native from '@/icons/Native';
import Universal from '@/icons/Universal';
import Web from '@/icons/Web';
import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
import * as styles from './ConnectorsTransfer.module.scss';
@ -49,11 +47,9 @@ const ConnectorsTransfer = ({ value, onChange }: Props) => {
{connectors.length > 1 &&
connectors
.filter(({ enabled }) => enabled)
.map(({ platform }) => (
.map(({ metadata: { platform } }) => (
<div key={platform} className={styles.icon}>
{platform === ConnectorPlatform.Web && <Web />}
{platform === ConnectorPlatform.Native && <Native />}
{platform === ConnectorPlatform.Universal && <Universal />}
{platform && <ConnectorPlatformIcon platform={platform} />}
</div>
))}
</div>