Create a running variant for workflow diagram nodes (#10857)
- Add all the missing adaptive colors - Create a running variant for the workflow diagram nodes - Make the `<Loader />` be precisely `24px` large ## Demo https://github.com/user-attachments/assets/cc9ef259-30dd-445d-b167-af35b4f9c4cc Closes https://github.com/twentyhq/core-team-issues/issues/430
This commit is contained in:
Baptiste Devessier
committed by
GitHub
GitHub
parent
b1322beac3
commit
29ead8ab69
@ -10,7 +10,7 @@ import styled from '@emotion/styled';
|
||||
import { Handle, Position } from '@xyflow/react';
|
||||
import React from 'react';
|
||||
import { capitalize, isDefined } from 'twenty-shared';
|
||||
import { Label, OverflowingTextWithTooltip } from 'twenty-ui';
|
||||
import { Label, Loader, OverflowingTextWithTooltip } from 'twenty-ui';
|
||||
|
||||
const StyledStepNodeContainer = styled.div`
|
||||
display: flex;
|
||||
@ -24,6 +24,12 @@ const StyledStepNodeType = styled.div<{
|
||||
}>`
|
||||
${({ nodeVariant, theme }) => {
|
||||
switch (nodeVariant) {
|
||||
case 'running': {
|
||||
return css`
|
||||
background-color: ${theme.tag.background.yellow};
|
||||
color: ${theme.tag.text.yellow};
|
||||
`;
|
||||
}
|
||||
case 'success': {
|
||||
return css`
|
||||
background-color: ${theme.tag.background.turquoise};
|
||||
@ -102,6 +108,12 @@ const StyledStepNodeInnerContainer = styled.div<{
|
||||
& {
|
||||
${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'running': {
|
||||
return css`
|
||||
background: ${theme.adaptiveColors.yellow1};
|
||||
border-color: ${theme.adaptiveColors.yellow4};
|
||||
`;
|
||||
}
|
||||
case 'success': {
|
||||
return css`
|
||||
background: ${theme.adaptiveColors.turquoise1};
|
||||
@ -128,6 +140,7 @@ const StyledStepNodeInnerContainer = styled.div<{
|
||||
const StyledStepNodeLabel = styled.div<{
|
||||
variant: WorkflowDiagramNodeVariant;
|
||||
}>`
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
@ -143,6 +156,7 @@ const StyledStepNodeLabel = styled.div<{
|
||||
}
|
||||
}};
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
|
||||
.selectable:is(.selected, :focus, :focus-visible) & {
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
@ -201,7 +215,7 @@ export const WorkflowDiagramStepNodeBase = ({
|
||||
|
||||
<StyledStepNodeInnerContainer variant={variant}>
|
||||
<StyledStepNodeLabel variant={variant}>
|
||||
{Icon}
|
||||
{variant === 'running' ? <Loader /> : Icon}
|
||||
|
||||
<OverflowingTextWithTooltip text={name} />
|
||||
</StyledStepNodeLabel>
|
||||
|
||||
@ -4,17 +4,18 @@ import {
|
||||
WorkflowDiagramRunStatus,
|
||||
WorkflowDiagramStepNodeData,
|
||||
} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
|
||||
import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
|
||||
|
||||
const getNodeVariantFromRunStatus = (
|
||||
runStatus: WorkflowDiagramRunStatus | undefined,
|
||||
) => {
|
||||
): WorkflowDiagramNodeVariant => {
|
||||
switch (runStatus) {
|
||||
case 'success':
|
||||
return 'success';
|
||||
case 'failure':
|
||||
return 'failure';
|
||||
case 'running':
|
||||
return 'default';
|
||||
return 'running';
|
||||
case 'not-executed':
|
||||
return 'not-executed';
|
||||
default:
|
||||
|
||||
@ -101,6 +101,7 @@ export const Catalog: CatalogStory<Story, typeof Wrapper> = {
|
||||
values: [
|
||||
'empty',
|
||||
'default',
|
||||
'running',
|
||||
'success',
|
||||
'failure',
|
||||
'not-executed',
|
||||
|
||||
@ -2,5 +2,6 @@ export type WorkflowDiagramNodeVariant =
|
||||
| 'default'
|
||||
| 'success'
|
||||
| 'failure'
|
||||
| 'running'
|
||||
| 'empty'
|
||||
| 'not-executed';
|
||||
|
||||
@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
|
||||
const StyledLoaderContainer = styled.div<{
|
||||
color?: ThemeColor;
|
||||
}>`
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
@ -1,12 +1,44 @@
|
||||
import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
|
||||
|
||||
export const ADAPTIVE_COLORS_DARK = {
|
||||
green1: THEME_COMMON.color.green80,
|
||||
green2: THEME_COMMON.color.green70,
|
||||
green3: THEME_COMMON.color.green60,
|
||||
green4: THEME_COMMON.color.green50,
|
||||
turquoise1: THEME_COMMON.color.turquoise80,
|
||||
turquoise2: THEME_COMMON.color.turquoise70,
|
||||
turquoise3: THEME_COMMON.color.turquoise60,
|
||||
turquoise4: THEME_COMMON.color.turquoise50,
|
||||
sky1: THEME_COMMON.color.sky80,
|
||||
sky2: THEME_COMMON.color.sky70,
|
||||
sky3: THEME_COMMON.color.sky60,
|
||||
sky4: THEME_COMMON.color.sky50,
|
||||
blue1: THEME_COMMON.color.blue80,
|
||||
blue2: THEME_COMMON.color.blue70,
|
||||
blue3: THEME_COMMON.color.blue60,
|
||||
blue4: THEME_COMMON.color.blue50,
|
||||
red1: THEME_COMMON.color.red80,
|
||||
red2: THEME_COMMON.color.red70,
|
||||
red3: THEME_COMMON.color.red60,
|
||||
red4: THEME_COMMON.color.red50,
|
||||
orange1: THEME_COMMON.color.orange80,
|
||||
orange2: THEME_COMMON.color.orange70,
|
||||
orange3: THEME_COMMON.color.orange60,
|
||||
orange4: THEME_COMMON.color.orange50,
|
||||
yellow1: THEME_COMMON.color.yellow80,
|
||||
yellow2: THEME_COMMON.color.yellow70,
|
||||
yellow3: THEME_COMMON.color.yellow60,
|
||||
yellow4: THEME_COMMON.color.yellow50,
|
||||
pink1: THEME_COMMON.color.pink80,
|
||||
pink2: THEME_COMMON.color.pink70,
|
||||
pink3: THEME_COMMON.color.pink60,
|
||||
pink4: THEME_COMMON.color.pink50,
|
||||
purple1: THEME_COMMON.color.purple80,
|
||||
purple2: THEME_COMMON.color.purple70,
|
||||
purple3: THEME_COMMON.color.purple60,
|
||||
purple4: THEME_COMMON.color.purple50,
|
||||
gray1: THEME_COMMON.color.gray80,
|
||||
gray2: THEME_COMMON.color.gray70,
|
||||
gray3: THEME_COMMON.color.gray60,
|
||||
gray4: THEME_COMMON.color.gray50,
|
||||
};
|
||||
|
||||
@ -1,12 +1,44 @@
|
||||
import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
|
||||
|
||||
export const ADAPTIVE_COLORS_LIGHT = {
|
||||
green1: THEME_COMMON.color.green10,
|
||||
green2: THEME_COMMON.color.green20,
|
||||
green3: THEME_COMMON.color.green30,
|
||||
green4: THEME_COMMON.color.green40,
|
||||
turquoise1: THEME_COMMON.color.turquoise10,
|
||||
turquoise2: THEME_COMMON.color.turquoise20,
|
||||
turquoise3: THEME_COMMON.color.turquoise30,
|
||||
turquoise4: THEME_COMMON.color.turquoise40,
|
||||
sky1: THEME_COMMON.color.sky10,
|
||||
sky2: THEME_COMMON.color.sky20,
|
||||
sky3: THEME_COMMON.color.sky30,
|
||||
sky4: THEME_COMMON.color.sky40,
|
||||
blue1: THEME_COMMON.color.blue10,
|
||||
blue2: THEME_COMMON.color.blue20,
|
||||
blue3: THEME_COMMON.color.blue30,
|
||||
blue4: THEME_COMMON.color.blue40,
|
||||
red1: THEME_COMMON.color.red10,
|
||||
red2: THEME_COMMON.color.red20,
|
||||
red3: THEME_COMMON.color.red30,
|
||||
red4: THEME_COMMON.color.red40,
|
||||
orange1: THEME_COMMON.color.orange10,
|
||||
orange2: THEME_COMMON.color.orange20,
|
||||
orange3: THEME_COMMON.color.orange30,
|
||||
orange4: THEME_COMMON.color.orange40,
|
||||
yellow1: THEME_COMMON.color.yellow10,
|
||||
yellow2: THEME_COMMON.color.yellow20,
|
||||
yellow3: THEME_COMMON.color.yellow30,
|
||||
yellow4: THEME_COMMON.color.yellow40,
|
||||
pink1: THEME_COMMON.color.pink10,
|
||||
pink2: THEME_COMMON.color.pink20,
|
||||
pink3: THEME_COMMON.color.pink30,
|
||||
pink4: THEME_COMMON.color.pink40,
|
||||
purple1: THEME_COMMON.color.purple10,
|
||||
purple2: THEME_COMMON.color.purple20,
|
||||
purple3: THEME_COMMON.color.purple30,
|
||||
purple4: THEME_COMMON.color.purple40,
|
||||
gray1: THEME_COMMON.color.gray10,
|
||||
gray2: THEME_COMMON.color.gray20,
|
||||
gray3: THEME_COMMON.color.gray30,
|
||||
gray4: THEME_COMMON.color.gray40,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user