Skip to content

Commit 4d828c0

Browse files
ijreillyijreilly
committed
fix advanced settings container
1 parent f20da13 commit 4d828c0

File tree

1 file changed

+107
-102
lines changed

1 file changed

+107
-102
lines changed

‎packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

+107-102
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,13 @@ const StyledAdvancedSettingsSectionInputWrapper = styled.div`
7272
flex: 1;
7373
`;
7474

75+
const StyledAdvancedSettingsOuterContainer = styled.div`
76+
padding-top: ${({ theme }) => theme.spacing(4)};
77+
`;
78+
7579
const StyledAdvancedSettingsContainer = styled.div`
7680
display: flex;
7781
gap: ${({ theme }) => theme.spacing(2)};
78-
margin-top: ${({ theme }) => theme.spacing(4)};
7982
position: relative;
8083
width: 100%;
8184
`;
@@ -243,108 +246,110 @@ export const SettingsDataModelObjectAboutForm = ({
243246
exit="exit"
244247
variants={motionAnimationVariants}
245248
>
246-
<StyledAdvancedSettingsContainer>
247-
<StyledIconToolContainer>
248-
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
249-
</StyledIconToolContainer>
250-
<StyledAdvancedSettingsSectionInputWrapper>
251-
{[
252-
{
253-
label: 'API Name (Singular)',
254-
fieldName: 'nameSingular' as const,
255-
placeholder: 'listing',
256-
defaultValue: objectMetadataItem?.nameSingular,
257-
disabled:
258-
disabled || disableNameEdit || isLabelSyncedWithName,
259-
tooltip: apiNameTooltipText,
260-
},
261-
{
262-
label: 'API Name (Plural)',
263-
fieldName: 'namePlural' as const,
264-
placeholder: 'listings',
265-
defaultValue: objectMetadataItem?.namePlural,
266-
disabled:
267-
disabled || disableNameEdit || isLabelSyncedWithName,
268-
tooltip: apiNameTooltipText,
269-
},
270-
].map(
271-
({
272-
defaultValue,
273-
fieldName,
274-
label,
275-
placeholder,
276-
disabled,
277-
tooltip,
278-
}) => (
279-
<StyledInputContainer
280-
key={`object-${fieldName}-text-input`}
281-
>
282-
<Controller
283-
name={fieldName}
284-
control={control}
285-
defaultValue={defaultValue}
286-
render={({ field: { onChange, value } }) => (
287-
<>
288-
<TextInput
289-
label={label}
290-
placeholder={placeholder}
291-
value={value}
292-
onChange={onChange}
293-
disabled={disabled}
294-
fullWidth
295-
maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
296-
onBlur={onBlur}
297-
RightIcon={() =>
298-
tooltip && (
299-
<>
300-
<IconInfoCircle
301-
id={infoCircleElementId + fieldName}
302-
size={theme.icon.size.md}
303-
color={theme.font.color.tertiary}
304-
style={{ outline: 'none' }}
305-
/>
306-
<AppTooltip
307-
anchorSelect={`#${infoCircleElementId}${fieldName}`}
308-
content={tooltip}
309-
offset={5}
310-
noArrow
311-
place="bottom"
312-
positionStrategy="fixed"
313-
delay={TooltipDelay.shortDelay}
314-
/>
315-
</>
316-
)
317-
}
318-
/>
319-
</>
320-
)}
321-
/>
322-
</StyledInputContainer>
323-
),
324-
)}
325-
<Controller
326-
name={IS_LABEL_SYNCED_WITH_NAME_LABEL}
327-
control={control}
328-
defaultValue={
329-
objectMetadataItem?.isLabelSyncedWithName ?? true
330-
}
331-
render={({ field: { onChange, value } }) => (
332-
<SyncObjectLabelAndNameToggle
333-
value={value ?? true}
334-
disabled={!objectMetadataItem?.isCustom}
335-
onChange={(value) => {
336-
onChange(value);
337-
if (value === true) {
338-
fillNamePluralFromLabelPlural(labelPlural);
339-
fillNameSingularFromLabelSingular(labelSingular);
340-
}
341-
onBlur?.();
342-
}}
343-
/>
249+
<StyledAdvancedSettingsOuterContainer>
250+
<StyledAdvancedSettingsContainer>
251+
<StyledIconToolContainer>
252+
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
253+
</StyledIconToolContainer>
254+
<StyledAdvancedSettingsSectionInputWrapper>
255+
{[
256+
{
257+
label: 'API Name (Singular)',
258+
fieldName: 'nameSingular' as const,
259+
placeholder: 'listing',
260+
defaultValue: objectMetadataItem?.nameSingular,
261+
disabled:
262+
disabled || disableNameEdit || isLabelSyncedWithName,
263+
tooltip: apiNameTooltipText,
264+
},
265+
{
266+
label: 'API Name (Plural)',
267+
fieldName: 'namePlural' as const,
268+
placeholder: 'listings',
269+
defaultValue: objectMetadataItem?.namePlural,
270+
disabled:
271+
disabled || disableNameEdit || isLabelSyncedWithName,
272+
tooltip: apiNameTooltipText,
273+
},
274+
].map(
275+
({
276+
defaultValue,
277+
fieldName,
278+
label,
279+
placeholder,
280+
disabled,
281+
tooltip,
282+
}) => (
283+
<StyledInputContainer
284+
key={`object-${fieldName}-text-input`}
285+
>
286+
<Controller
287+
name={fieldName}
288+
control={control}
289+
defaultValue={defaultValue}
290+
render={({ field: { onChange, value } }) => (
291+
<>
292+
<TextInput
293+
label={label}
294+
placeholder={placeholder}
295+
value={value}
296+
onChange={onChange}
297+
disabled={disabled}
298+
fullWidth
299+
maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
300+
onBlur={onBlur}
301+
RightIcon={() =>
302+
tooltip && (
303+
<>
304+
<IconInfoCircle
305+
id={infoCircleElementId + fieldName}
306+
size={theme.icon.size.md}
307+
color={theme.font.color.tertiary}
308+
style={{ outline: 'none' }}
309+
/>
310+
<AppTooltip
311+
anchorSelect={`#${infoCircleElementId}${fieldName}`}
312+
content={tooltip}
313+
offset={5}
314+
noArrow
315+
place="bottom"
316+
positionStrategy="fixed"
317+
delay={TooltipDelay.shortDelay}
318+
/>
319+
</>
320+
)
321+
}
322+
/>
323+
</>
324+
)}
325+
/>
326+
</StyledInputContainer>
327+
),
344328
)}
345-
/>
346-
</StyledAdvancedSettingsSectionInputWrapper>
347-
</StyledAdvancedSettingsContainer>
329+
<Controller
330+
name={IS_LABEL_SYNCED_WITH_NAME_LABEL}
331+
control={control}
332+
defaultValue={
333+
objectMetadataItem?.isLabelSyncedWithName ?? true
334+
}
335+
render={({ field: { onChange, value } }) => (
336+
<SyncObjectLabelAndNameToggle
337+
value={value ?? true}
338+
disabled={!objectMetadataItem?.isCustom}
339+
onChange={(value) => {
340+
onChange(value);
341+
if (value === true) {
342+
fillNamePluralFromLabelPlural(labelPlural);
343+
fillNameSingularFromLabelSingular(labelSingular);
344+
}
345+
onBlur?.();
346+
}}
347+
/>
348+
)}
349+
/>
350+
</StyledAdvancedSettingsSectionInputWrapper>
351+
</StyledAdvancedSettingsContainer>
352+
</StyledAdvancedSettingsOuterContainer>
348353
</motion.div>
349354
)}
350355
</AnimatePresence>

0 commit comments

Comments
 (0)