Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-03 21:48:55 -05:00
Code Issues Activity

refactor(console): connector guide readme content scrollbar (#3565)

Browse source
This commit is contained in:
Xiao Yijun 2023-03-22 11:39:07 +08:00 • committed by GitHub
parent f4a21b7c12
commit 3ee26c31cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/console/src/pages/Connectors/components/Guide/index.module.scss
View file

@ -52,6 +52,7 @@
border: 1.5px solid var(--color-focused-variant); border: 1.5px solid var(--color-focused-variant);
border-radius: 16px; border-radius: 16px;
margin: 0 _.unit(6) _.unit(6) 0; margin: 0 _.unit(6) _.unit(6) 0;
overflow-y: auto;
.readmeTitle { .readmeTitle {
font: var(--font-title-2); font: var(--font-title-2);
@ -61,9 +62,7 @@
.readmeContent { .readmeContent {
flex: 1; flex: 1;
padding: 0 _.unit(6); padding: 0 _.unit(6) _.unit(4);
overflow-y: auto;
padding-bottom: _.unit(4);
} }
} }

6
packages/console/src/pages/Connectors/components/Guide/index.tsx
View file

@ -18,6 +18,7 @@ import CardTitle from '@/components/CardTitle';
import DangerousRaw from '@/components/DangerousRaw'; import DangerousRaw from '@/components/DangerousRaw';
import IconButton from '@/components/IconButton'; import IconButton from '@/components/IconButton';
import Markdown from '@/components/Markdown'; import Markdown from '@/components/Markdown';
import OverlayScrollbar from '@/components/OverlayScrollbar';
import { ConnectorsTabs } from '@/consts/page-tabs'; import { ConnectorsTabs } from '@/consts/page-tabs';
import useApi from '@/hooks/use-api'; import useApi from '@/hooks/use-api';
import useConfigs from '@/hooks/use-configs'; import useConfigs from '@/hooks/use-configs';
@ -48,7 +49,6 @@ const Guide = ({ connector, onClose }: Props) => {
const [conflictConnectorName, setConflictConnectorName] = useState<Record<string, string>>(); const [conflictConnectorName, setConflictConnectorName] = useState<Record<string, string>>();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { type: connectorType, formItems, target, isStandard, configTemplate } = connector ?? {}; const { type: connectorType, formItems, target, isStandard, configTemplate } = connector ?? {};
const { language } = i18next; const { language } = i18next;
const isSocialConnector = const isSocialConnector =
@ -181,10 +181,10 @@ const Guide = ({ connector, onClose }: Props) => {
/> />
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.readme}> <OverlayScrollbar className={styles.readme}>
<div className={styles.readmeTitle}>README: {title}</div> <div className={styles.readmeTitle}>README: {title}</div>
<Markdown className={styles.readmeContent}>{content}</Markdown> <Markdown className={styles.readmeContent}>{content}</Markdown>
</div> </OverlayScrollbar>
<div className={styles.setup}> <div className={styles.setup}>
<FormProvider {...methods}> <FormProvider {...methods}>
<form autoComplete="off" onSubmit={onSubmit}> <form autoComplete="off" onSubmit={onSubmit}>

2
packages/console/src/scss/overlayscrollbars.scss
View file

@ -4,6 +4,8 @@
&.os-theme-light { &.os-theme-light {
&.os-scrollbar-vertical { &.os-scrollbar-vertical {
width: 12px; width: 12px;
padding: 8px 2px;
> .os-scrollbar-track { > .os-scrollbar-track {
> .os-scrollbar-handle { > .os-scrollbar-handle {