diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
index e4a669af1..3401c6d1d 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
@@ -24,6 +24,10 @@ type SettingsObjectFieldRelationFormProps = {
values?: SettingsObjectFieldRelationFormValues;
};
+const StyledContainer = styled.div`
+ padding: ${({ theme }) => theme.spacing(4)};
+`;
+
const StyledSelectsContainer = styled.div`
display: grid;
gap: ${({ theme }) => theme.spacing(4)};
@@ -62,7 +66,7 @@ export const SettingsObjectFieldRelationForm = ({
: undefined) || objectMetadataItems[0];
return (
-
+
-
+
);
};
diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
index 19e426264..531f43d66 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
@@ -1,7 +1,9 @@
import styled from '@emotion/styled';
+import { IconPlus } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
import { TextInput } from '@/ui/input/components/TextInput';
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
export type SettingsObjectFieldSelectFormValues = {
color: ThemeColor;
@@ -13,46 +15,93 @@ type SettingsObjectFieldSelectFormProps = {
values?: SettingsObjectFieldSelectFormValues;
};
+const StyledContainer = styled.div`
+ padding: ${({ theme }) => theme.spacing(4)};
+`;
+
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
display: block;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
- margin-bottom: ${({ theme }) => theme.spacing(3)};
+ margin-bottom: 6px;
+ margin-top: ${({ theme }) => theme.spacing(1)};
text-transform: uppercase;
`;
-const StyledInputsContainer = styled.div`
+const StyledRows = styled.div`
display: flex;
flex-direction: column;
- gap: 10px;
+ gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledRow = styled.div`
+ align-items: center;
+ display: flex;
+ height: ${({ theme }) => theme.spacing(6)};
+ padding: ${({ theme }) => theme.spacing(1)} 0;
`;
const StyledOptionInput = styled(TextInput)`
+ flex: 1 0 auto;
+
& input {
height: ${({ theme }) => theme.spacing(2)};
}
`;
+const StyledButton = styled(Button)`
+ border-bottom: 0;
+ border-left: 0;
+ border-radius: 0;
+ border-right: 0;
+ justify-content: center;
+ text-align: center;
+`;
+
+const getNextColor = (currentColor: ThemeColor) => {
+ const colors = Object.keys(mainColors) as ThemeColor[];
+ const currentColorIndex = colors.findIndex((color) => color === currentColor);
+ return colors[(currentColorIndex + 1) % colors.length];
+};
+
export const SettingsObjectFieldSelectForm = ({
onChange,
values = [],
}: SettingsObjectFieldSelectFormProps) => {
return (
-
- Options
-
- {values.map((value, index) => (
- {
- const nextValues = [...values];
- nextValues.splice(index, 1, { ...values[index], text });
- onChange(nextValues);
- }}
- />
- ))}
-
-
+ <>
+
+ Options
+
+ {values.map((value, index) => (
+
+ {
+ const nextValues = [...values];
+ nextValues.splice(index, 1, { ...values[index], text });
+ onChange(nextValues);
+ }}
+ />
+
+ ))}
+
+
+
+ onChange([
+ ...values,
+ {
+ color: getNextColor(values[values.length - 1].color),
+ text: `Option ${values.length + 1}`,
+ },
+ ])
+ }
+ />
+ >
);
};
diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
index 27c549bad..c70d26b87 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
@@ -39,7 +39,7 @@ const StyledFormContainer = styled.div`
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
- padding: ${({ theme }) => theme.spacing(4)};
+ overflow: hidden;
`;
export const SettingsObjectFieldTypeCard = ({