yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-26 08:52:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11097 from strapi/cm/add-border-to-nested-components

Browse Source 
Add border to nested compos
This commit is contained in:
cyril lopez 2021-09-28 10:05:55 +02:00 committed by GitHub
commit 2029786031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js
View File

@ -17,13 +17,15 @@ const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOf
const label = intlLabel?.id ? formatMessage(intlLabel) : ''; const label = intlLabel?.id ? formatMessage(intlLabel) : '';
return ( return (
<Row> <Box paddingBottom={1}>
<Text textColor="neutral800" htmlFor={id || name} small bold as="label"> <Row>
{label} <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
{showNumberOfEntries && <>&nbsp;({numberOfEntries})</>} {label}
</Text> {showNumberOfEntries && <>&nbsp;({numberOfEntries})</>}
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>} </Text>
</Row> {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Row>
</Box>
); );
}; };

50
packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js
View File

@ -59,31 +59,32 @@ const FieldComponent = ({
return ( return (
<Box> <Box>
<Stack size={1}> <Row justifyContent="space-between">
<Row justifyContent="space-between"> {intlLabel && (
{intlLabel && ( <Label
<Label intlLabel={intlLabel}
intlLabel={intlLabel} labelAction={labelAction}
labelAction={labelAction} name={name}
name={name} numberOfEntries={componentValueLength}
numberOfEntries={componentValueLength} showNumberOfEntries={isRepeatable}
showNumberOfEntries={isRepeatable} />
/> )}
)}
{showResetComponent && ( {showResetComponent && (
<IconButton <IconButton
label={formatMessage({ label={formatMessage({
id: getTrad('components.reset-entry'), id: getTrad('components.reset-entry'),
defaultMessage: 'Reset Entry', defaultMessage: 'Reset Entry',
})} })}
icon={<DeleteIcon />} icon={<DeleteIcon />}
onClick={() => { noBorder
removeComponentFromField(name, componentUid); onClick={() => {
}} removeComponentFromField(name, componentUid);
/> }}
)} />
</Row> )}
</Row>
<Stack size={1}>
{!isRepeatable && !isInitialized && ( {!isRepeatable && !isInitialized && (
<ComponentInitializer <ComponentInitializer
isReadOnly={isReadOnly} isReadOnly={isReadOnly}
@ -94,6 +95,7 @@ const FieldComponent = ({
<NonRepeatableComponent <NonRepeatableComponent
componentUid={componentUid} componentUid={componentUid}
isFromDynamicZone={isFromDynamicZone} isFromDynamicZone={isFromDynamicZone}
isNested={isNested}
name={name} name={name}
/> />
)} )}

20
packages/core/admin/admin/src/content-manager/components/NonRepeatableComponent/index.js
View File

@ -10,7 +10,7 @@ import { useContentTypeLayout } from '../../hooks';
import FieldComponent from '../FieldComponent'; import FieldComponent from '../FieldComponent';
import Inputs from '../Inputs'; import Inputs from '../Inputs';
const NonRepeatableComponent = ({ componentUid, name }) => { const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
const { getComponentLayout } = useContentTypeLayout(); const { getComponentLayout } = useContentTypeLayout();
const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [ const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
componentUid, componentUid,
@ -19,7 +19,15 @@ const NonRepeatableComponent = ({ componentUid, name }) => {
const fields = componentLayoutData.layouts.edit; const fields = componentLayoutData.layouts.edit;
return ( return (
<Box background="neutral100" paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}> <Box
background={isFromDynamicZone ? 'neutral0' : 'neutral100'}
paddingLeft={6}
paddingRight={6}
paddingTop={6}
paddingBottom={6}
hasRadius={isNested}
borderColor={isNested ? 'neutral200' : ''}
>
<Stack size={6}> <Stack size={6}>
{fields.map((fieldRow, key) => { {fields.map((fieldRow, key) => {
return ( return (
@ -39,6 +47,7 @@ const NonRepeatableComponent = ({ componentUid, name }) => {
id: metadatas.label, id: metadatas.label,
defaultMessage: metadatas.label, defaultMessage: metadatas.label,
}} }}
isNested
isRepeatable={fieldSchema.repeatable} isRepeatable={fieldSchema.repeatable}
max={fieldSchema.max} max={fieldSchema.max}
min={fieldSchema.min} min={fieldSchema.min}
@ -67,8 +76,15 @@ const NonRepeatableComponent = ({ componentUid, name }) => {
); );
}; };
NonRepeatableComponent.defaultProps = {
isFromDynamicZone: false,
isNested: false,
};
NonRepeatableComponent.propTypes = { NonRepeatableComponent.propTypes = {
componentUid: PropTypes.string.isRequired, componentUid: PropTypes.string.isRequired,
isFromDynamicZone: PropTypes.bool,
isNested: PropTypes.bool,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
}; };

5
packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import get from 'lodash/get'; import get from 'lodash/get';
import I18N from '@strapi/icons/I18N'; import I18N from '@strapi/icons/I18N';
// FIXME import StrikedWorld from '@strapi/icons/StrikedWorld';
import HelpIcon from '@strapi/icons/HelpIcon';
import LabelAction from '../components/LabelAction'; import LabelAction from '../components/LabelAction';
import { getTrad } from '../utils'; import { getTrad } from '../utils';
@ -45,7 +44,7 @@ const enhanceEditLayout = layout =>
? 'This value is unique for the selected locale' ? 'This value is unique for the selected locale'
: 'This value is common to all locales', : 'This value is common to all locales',
}, },
icon: hasI18nEnabled ? <I18N aria-hidden /> : <HelpIcon aria-hidden />, icon: hasI18nEnabled ? <I18N aria-hidden /> : <StrikedWorld aria-hidden />,
}; };
acc.push({ ...field, labelAction: <LabelAction {...labelActionProps} /> }); acc.push({ ...field, labelAction: <LabelAction {...labelActionProps} /> });

6
packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import I18N from '@strapi/icons/I18N'; import I18N from '@strapi/icons/I18N';
// FIXME
import HelpIcon from '@strapi/icons/HelpIcon'; import StrikedWorld from '@strapi/icons/StrikedWorld';
import LabelAction from '../../components/LabelAction'; import LabelAction from '../../components/LabelAction';
import { getTrad } from '../../utils'; import { getTrad } from '../../utils';
import mutateEditViewLayout, { import mutateEditViewLayout, {
@ -450,7 +450,7 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
labelAction: ( labelAction: (
<LabelAction <LabelAction
title={{ id: notLocalizedTrad, defaultMessage: notLocalizedTradDefaultMessage }} title={{ id: notLocalizedTrad, defaultMessage: notLocalizedTradDefaultMessage }}
icon={<HelpIcon aria-hidden />} icon={<StrikedWorld aria-hidden />}
/> />
), ),
}, },