admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Form action fast follows (#11242)

Browse Source 
- on form action, add trash on hover and fix spacing
- fix dark mode
- second batch of icon fixes

<img width="692" alt="Capture d’écran 2025-03-27 à 18 25 48"
src="https://github.com/user-attachments/assets/963f50d2-12ee-425c-97a3-2ad0c6bb5c57"
/>
This commit is contained in:
Thomas Trompette
2025-03-28 10:11:01 +01:00
committed by GitHub
parent 78943b3370
commit 8d35454dd8
8 changed files with 116 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
View File

@ -81,13 +81,18 @@ const StyledIconButtonContainer = styled.div`
}
`;
const StyledAddFieldContainer = styled.div`
display: flex;
const StyledAddFieldButtonContainer = styled.div`
padding-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledAddFieldButtonContentContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(0.5)};
justify-content: center;
width: 100%;
gap: ${({ theme }) => theme.spacing(0.5)};
`;
export const WorkflowEditActionFormBuilder = ({
@ -106,7 +111,9 @@ export const WorkflowEditActionFormBuilder = ({
const headerType = useActionHeaderTypeOrThrow(action.type);
const [selectedField, setSelectedField] = useState<string | null>(null);
const [hoveredField, setHoveredField] = useState<string | null>(null);
const isFieldSelected = (fieldName: string) => selectedField === fieldName;
const isFieldHovered = (fieldName: string) => hoveredField === fieldName;
const handleFieldClick = (fieldName: string) => {
if (actionOptions.readonly === true) {
return;
@ -177,7 +184,10 @@ export const WorkflowEditActionFormBuilder = ({
<FormFieldInputContainer key={field.id}>
{field.label ? <InputLabel>{field.label}</InputLabel> : null}
<StyledRowContainer>
<StyledRowContainer
onMouseEnter={() => setHoveredField(field.id)}
onMouseLeave={() => setHoveredField(null)}
>
<FormFieldInputRowContainer>
<FormFieldInputInputContainer
hasRightElement={false}
@ -201,29 +211,30 @@ export const WorkflowEditActionFormBuilder = ({
</StyledFieldContainer>
</FormFieldInputInputContainer>
</FormFieldInputRowContainer>
{!actionOptions.readonly && isFieldSelected(field.id) && (
<StyledIconButtonContainer>
<IconTrash
size={theme.icon.size.md}
color={theme.font.color.secondary}
onClick={() => {
const updatedFormData = formData.filter(
(currentField) => currentField.id !== field.id,
);
{!actionOptions.readonly &&
(isFieldSelected(field.id) || isFieldHovered(field.id)) && (
<StyledIconButtonContainer>
<IconTrash
size={theme.icon.size.md}
color={theme.font.color.secondary}
onClick={() => {
const updatedFormData = formData.filter(
(currentField) => currentField.id !== field.id,
);
setFormData(updatedFormData);
setFormData(updatedFormData);
actionOptions.onActionUpdate({
...action,
settings: {
...action.settings,
input: updatedFormData,
},
});
}}
/>
</StyledIconButtonContainer>
)}
actionOptions.onActionUpdate({
...action,
settings: {
...action.settings,
input: updatedFormData,
},
});
}}
/>
</StyledIconButtonContainer>
)}
{isFieldSelected(field.id) && (
<WorkflowEditActionFormFieldSettings
field={field}
@ -237,44 +248,46 @@ export const WorkflowEditActionFormBuilder = ({
</FormFieldInputContainer>
))}
{!actionOptions.readonly && (
<StyledRowContainer>
<FormFieldInputContainer>
<FormFieldInputRowContainer>
<FormFieldInputInputContainer
hasRightElement={false}
onClick={() => {
const { label, placeholder, name } =
getDefaultFormFieldSettings(FieldMetadataType.TEXT);
<StyledAddFieldButtonContainer>
<StyledRowContainer>
<FormFieldInputContainer>
<FormFieldInputRowContainer>
<FormFieldInputInputContainer
hasRightElement={false}
onClick={() => {
const { label, placeholder, name } =
getDefaultFormFieldSettings(FieldMetadataType.TEXT);
const newField: WorkflowFormActionField = {
id: v4(),
name,
type: FieldMetadataType.TEXT,
label,
placeholder,
};
const newField: WorkflowFormActionField = {
id: v4(),
name,
type: FieldMetadataType.TEXT,
label,
placeholder,
};
setFormData([...formData, newField]);
setFormData([...formData, newField]);
actionOptions.onActionUpdate({
...action,
settings: {
...action.settings,
input: [...action.settings.input, newField],
},
});
}}
>
<StyledFieldContainer>
<StyledAddFieldContainer>
<IconPlus size={theme.icon.size.sm} />
{t`Add Field`}
</StyledAddFieldContainer>
</StyledFieldContainer>
</FormFieldInputInputContainer>
</FormFieldInputRowContainer>
</FormFieldInputContainer>
</StyledRowContainer>
actionOptions.onActionUpdate({
...action,
settings: {
...action.settings,
input: [...action.settings.input, newField],
},
});
}}
>
<StyledFieldContainer>
<StyledAddFieldButtonContentContainer>
<IconPlus size={theme.icon.size.sm} />
{t`Add Field`}
</StyledAddFieldButtonContentContainer>
</StyledFieldContainer>
</FormFieldInputInputContainer>
</FormFieldInputRowContainer>
</FormFieldInputContainer>
</StyledRowContainer>
</StyledAddFieldButtonContainer>
)}
</WorkflowStepBody>
</>

4
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx
View File

@ -44,12 +44,14 @@ const StyledSettingsHeader = styled.div`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: grid;
gap: ${({ theme }) => theme.spacing(1)};
padding-inline: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(3)};
grid-template-columns: 1fr 24px;
padding-bottom: ${({ theme }) => theme.spacing(3)};
`;
const StyledTitleContainer = styled.div`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};