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

Improve the layout of the Workflow Visualizer (#8372)

Browse Source 
- Increase the dimensions of the ReactFlow nodes. This allows to ditch
scaling which made it hard to get the width of the nodes as they were
visually scaled by 1.3.
- Center the flow when the flow mounts and when the state of the right
drawer opens.
- Put the node type inside of the node so it doesn't overlap with the
arrow
- Make the edges non deletable

We'll have to make a refactor so the viewport can be animated properly:
https://github.com/twentyhq/twenty/issues/8387.


https://github.com/user-attachments/assets/69494a32-5403-4898-be75-7fc38058e263

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Baptiste Devessier
2024-11-12 17:52:12 +01:00
committed by GitHub
parent aadcb49dcb
commit 31f03764d6
9 changed files with 131 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx
View File

@ -21,13 +21,12 @@ const StyledStepNodeType = styled.div`
${({ theme }) => theme.border.radius.sm} 0 0;
color: ${({ theme }) => theme.color.gray50};
font-size: ${({ theme }) => theme.font.size.xs};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-left: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
position: absolute;
top: 0;
transform: translateY(-100%);
align-self: flex-start;
.selectable.selected &,
.selectable:focus &,
@ -62,9 +61,9 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
align-items: center;
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.medium};
column-gap: ${({ theme }) => theme.spacing(2)};
column-gap: ${({ theme }) => theme.spacing(3)};
color: ${({ variant, theme }) =>
variant === 'placeholder'
? theme.font.color.extraLight
@ -80,9 +79,13 @@ export const StyledTargetHandle = styled(Handle)`
`;
const StyledRightFloatingElementContainer = styled.div`
display: flex;
align-items: center;
position: absolute;
right: ${({ theme }) => theme.spacing(-3)};
bottom: 0;
top: 0;
transform: translateX(100%);
right: ${({ theme }) => theme.spacing(-2)};
`;
export const WorkflowDiagramBaseStepNode = ({
@ -104,9 +107,9 @@ export const WorkflowDiagramBaseStepNode = ({
<StyledTargetHandle type="target" position={Position.Top} />
) : null}
<StyledStepNodeInnerContainer variant={variant}>
<StyledStepNodeType>{capitalize(nodeType)}</StyledStepNodeType>
<StyledStepNodeType>{capitalize(nodeType)}</StyledStepNodeType>
<StyledStepNodeInnerContainer variant={variant}>
<StyledStepNodeLabel variant={variant}>
{Icon}