From ac38a7f3ac13b90ffb2ea8a94d40a390d652a62b Mon Sep 17 00:00:00 2001 From: wangsijie Date: Tue, 18 Oct 2022 13:54:04 +0800 Subject: [PATCH] fix(console): responsive modal items layout (#2160) --- .../src/components/RadioGroup/Radio.tsx | 36 +++--- .../components/RadioGroup/index.module.scss | 106 +++++++++--------- .../components/CreateForm/index.module.scss | 12 ++ .../components/CreateForm/index.tsx | 1 + .../components/SdkSelector/index.module.scss | 4 + .../components/TypeDescription/index.tsx | 8 +- .../components/CreateForm/index.module.scss | 55 +++++++-- .../components/CreateForm/index.tsx | 61 ++++++---- packages/console/src/scss/_dimensions.scss | 3 + 9 files changed, 178 insertions(+), 108 deletions(-) diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx index 4a75f7ec9..1fa795168 100644 --- a/packages/console/src/components/RadioGroup/Radio.tsx +++ b/packages/console/src/components/RadioGroup/Radio.tsx @@ -6,13 +6,10 @@ import { useTranslation } from 'react-i18next'; import * as styles from './index.module.scss'; const Check = () => ( - - + ); @@ -29,7 +26,6 @@ export type Props = { type?: 'card' | 'plain'; isDisabled?: boolean; disabledLabel?: AdminConsoleKey; - size?: 'normal' | 'small'; }; const Radio = ({ @@ -44,7 +40,6 @@ const Radio = ({ type, isDisabled, disabledLabel, - size = 'normal', }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -68,7 +63,6 @@ const Radio = ({ styles.radio, isChecked && styles.checked, isDisabled && styles.disabled, - styles[size], className )} // eslint-disable-next-line jsx-a11y/role-has-required-aria-props @@ -77,14 +71,22 @@ const Radio = ({ onClick={isDisabled ? undefined : onClick} onKeyPress={handleKeyPress} > - - {type === 'card' && } - {children} - {type === 'plain' &&
} - {title && t(title)} - {isDisabled && disabledLabel && ( -
{t(disabledLabel)}
- )} +
+ + {type === 'card' && ( +
+ +
+ )} + {children} + {type === 'plain' &&
} + {title && t(title)} + {isDisabled && disabledLabel && ( +
+ {t(disabledLabel)} +
+ )} +
); }; diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss index f1d1e882a..599320e9b 100644 --- a/packages/console/src/components/RadioGroup/index.module.scss +++ b/packages/console/src/components/RadioGroup/index.module.scss @@ -11,18 +11,8 @@ } .card { - display: flex; - flex-wrap: wrap; - gap: _.unit(3); - > .radio { - position: relative; - flex: 1; - min-width: 170px; - max-width: 230px; - padding: _.unit(5); - display: flex; - flex-direction: column; + padding: _.unit(3); border-radius: _.unit(4); border: 1px solid transparent; outline: 1px solid var(--color-neutral-90); @@ -45,39 +35,36 @@ box-shadow: var(--shadow-2); } - svg { - opacity: 0%; - position: absolute; - right: _.unit(5); - top: _.unit(5); - } + .content { + position: relative; - &.small { - padding: _.unit(3); + .indicator { + position: absolute; + right: 0; + top: 0; - svg { - right: _.unit(3); - top: _.unit(3); + svg { + opacity: 0%; + } } - } - .disabledLabel { - position: absolute; - right: _.unit(3); - top: _.unit(3); - background: var(--color-neutral-90); - padding: _.unit(0.5) _.unit(2); - border-radius: 10px; - font: var(--font-label-medium); - color: var(--color-text); + .disabledLabel { + background: var(--color-neutral-90); + padding: _.unit(0.5) _.unit(2); + border-radius: 10px; + font: var(--font-label-medium); + color: var(--color-text); + } } &.checked { border-color: var(--color-primary); outline: 1px solid var(--color-primary); - svg { - opacity: 100%; + .indicator { + svg { + opacity: 100%; + } } } } @@ -88,8 +75,6 @@ /* stylelint-disable-next-line no-descending-specificity */ > .radio { - display: flex; - align-items: center; cursor: pointer; /* stylelint-disable-next-line no-descending-specificity */ @@ -97,29 +82,36 @@ margin-bottom: _.unit(2); } - .indicator { - border-radius: 50%; - border: 2px solid var(--color-neutral-60); - display: inline-block; - margin-right: _.unit(2); + .content { + display: flex; + align-items: center; - &::before { - content: ''; - background: var(--color-layer-1); - width: 10px; - height: 10px; - display: block; + .indicator { border-radius: 50%; - border: 2px solid var(--color-layer-1); + border: 2px solid var(--color-neutral-60); + display: inline-block; + margin-right: _.unit(2); + + &::before { + content: ''; + background: var(--color-layer-1); + width: 10px; + height: 10px; + display: block; + border-radius: 50%; + border: 2px solid var(--color-layer-1); + } } } &.checked { - .indicator { - border-color: var(--color-primary); + .content { + .indicator { + border-color: var(--color-primary); - &::before { - background: var(--color-primary); + &::before { + background: var(--color-primary); + } } } } @@ -128,11 +120,13 @@ cursor: not-allowed; color: var(--color-disabled); - .indicator { - border-color: var(--color-disabled); + .content { + .indicator { + border-color: var(--color-disabled); - &::before { - background: var(--color-layer-1); + &::before { + background: var(--color-layer-1); + } } } } diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.module.scss b/packages/console/src/pages/Applications/components/CreateForm/index.module.scss index 112da9ab7..1ab29e909 100644 --- a/packages/console/src/pages/Applications/components/CreateForm/index.module.scss +++ b/packages/console/src/pages/Applications/components/CreateForm/index.module.scss @@ -1,7 +1,19 @@ @use '@/scss/underscore' as _; +@use '@/scss/dimensions' as dim; .radioGroup { margin-top: _.unit(2); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: _.unit(4); + + @media screen and (max-width: dim.$modal-layout-grid-medium) { + grid-template-columns: repeat(2, 1fr); + } + + @media screen and (max-width: dim.$modal-layout-grid-small) { + grid-template-columns: repeat(1, 1fr); + } } .error { diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx index f50a5e4d3..80d04307b 100644 --- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx +++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx @@ -90,6 +90,7 @@ const CreateForm = ({ onClose }: Props) => { {Object.values(ApplicationType).map((value) => ( { +const TypeDescription = ({ title, subtitle, description, type }: Props) => { return ( <> +
{title}
{subtitle}
{description}
diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss b/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss index 4c9df39cf..588ce46fe 100644 --- a/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss +++ b/packages/console/src/pages/Connectors/components/CreateForm/index.module.scss @@ -1,15 +1,42 @@ @use '@/scss/underscore' as _; +@use '@/scss/dimensions' as dim; .body { .connectorGroup { gap: _.unit(4); + display: grid; + grid-template-columns: repeat(4, 1fr); - .connectorRadio { - // Override radio style - min-width: 276px; - max-width: 276px; - width: 276px; - height: 96px; + @media screen and (max-width: dim.$modal-layout-grid-large) { + grid-template-columns: repeat(3, 1fr); + } + + @media screen and (max-width: dim.$modal-layout-grid-medium) { + grid-template-columns: repeat(2, 1fr); + } + + @media screen and (max-width: dim.$modal-layout-grid-small) { + grid-template-columns: repeat(1, 1fr); + } + + &.medium { + grid-template-columns: repeat(2, 1fr); + + @media screen and (max-width: dim.$modal-layout-grid-small) { + grid-template-columns: repeat(1, 1fr); + } + } + + &.large { + grid-template-columns: repeat(3, 1fr); + + @media screen and (max-width: dim.$modal-layout-grid-medium) { + grid-template-columns: repeat(2, 1fr); + } + + @media screen and (max-width: dim.$modal-layout-grid-small) { + grid-template-columns: repeat(1, 1fr); + } } .connector { @@ -17,14 +44,15 @@ display: flex; .logo { - width: 48px; - height: 48px; + width: 40px; + height: 40px; display: flex; align-items: center; + margin-right: _.unit(3); img { - width: 36px; - height: 36px; + width: 40px; + height: 40px; } } @@ -33,6 +61,11 @@ .name { font: var(--font-subhead-2); + @include _.multi-line-ellipsis(1); + + &.nameWithRightPadding { + padding-right: _.unit(12); /* For check mark and added label */ + } } .connectorId { @@ -45,7 +78,7 @@ font: var(--font-body-small); color: var(--color-text-secondary); margin-top: _.unit(1); - @include _.multi-line-ellipsis(3); + @include _.multi-line-ellipsis(4); } } } diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx index 806067889..6548e1a86 100644 --- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx +++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx @@ -1,4 +1,5 @@ import { ConnectorType } from '@logto/schemas'; +import classNames from 'classnames'; import { useMemo, useState } from 'react'; import Modal from 'react-modal'; @@ -78,6 +79,18 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => { setActiveConnectorId(undefined); }; + const modalSize = useMemo(() => { + if (!groups || groups.length <= 2) { + return 'medium'; + } + + if (groups.length === 3) { + return 'large'; + } + + return 'xlarge'; + }, [groups]); + return ( { /> } className={styles.body} - size="xlarge" + size={modalSize} onClose={onClose} > {isLoading && 'Loading...'} @@ -107,33 +120,35 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => { name="group" value={activeGroupId} type="card" - className={styles.connectorGroup} + className={classNames(styles.connectorGroup, styles[modalSize])} onChange={handleGroupChange} > - {groups.map(({ id, name, logo, description, connectors }) => ( - enabled)} - disabledLabel="general.added" - size="small" - > -
-
- logo -
-
-
- + {groups.map(({ id, name, logo, description, connectors }) => { + const isDisabled = connectors.every(({ enabled }) => enabled); + + return ( + +
+
+ logo
-
- +
+
+ +
+
+ +
-
- - ))} + + ); + })} )} {activeGroup && ( diff --git a/packages/console/src/scss/_dimensions.scss b/packages/console/src/scss/_dimensions.scss index 62eca0605..c4e473c34 100644 --- a/packages/console/src/scss/_dimensions.scss +++ b/packages/console/src/scss/_dimensions.scss @@ -2,4 +2,7 @@ $modal-layout-width-xlarge: 1224px; $modal-layout-width-large: 784px; $modal-layout-width-medium: 600px; $modal-layout-width-small: 352px; +$modal-layout-grid-large: 850px; +$modal-layout-grid-medium: 668px; +$modal-layout-grid-small: 500px; $form-text-field-width: 556px;