Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

steps fix

Browse source
This commit is contained in:
TaruunMalik 2025-04-13 10:11:52 +00:00
parent d2ccda10c3
commit 86b6b57561
1 changed files with 73 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
frontend/src/Editor/Components/Steps.jsx
View file

@ -38,6 +38,11 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
'--currentStepLabel': currentStepLabel === '#1B1F24' ? 'var(--text-primary)' : currentStepLabel,
};
const theme = properties.variant;
console.log(theme);
console.log(properties);
console.log(styles);
console.log(completedLabel, 'completed');
const activeStepHandler = (id) => {
const step = filteredSteps.find((item) => item.id == id);
if (step) {
@ -112,70 +117,83 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
return (
isVisible && (
<div
className={`steps ${theme == 'numbers' && 'steps-counter '}`}
style={{
color: textColor,
height,
boxShadow,
opacity: isDisabled ? 0.5 : 1,
...(theme === 'numbers'
? {
paddingTop: 4,
}
: theme === 'plain'
? {
paddingTop: 10,
}
: {}),
}}
data-cy={dataCy}
>
{filteredSteps?.map((item, index) => {
const isStepDisabled = item.disabled;
return (
<ToolTip
key={item.id + index + item.name}
show={!item.disabled && !isDisabled}
message={item.tooltip || ''}
>
<a
className={`step-item ${item.id == activeStepId && 'active'} ${
!(!isDisabled && !isStepDisabled) && 'step-item-disabled'
} ${color && `step-${color}`} ${
<>
<style>
{`
.steps-counter .step-item:before {
color:${completedLabel} !important;
}
.steps .step-item.active:before{
color : ${currentStepLabel} !important;
}
`}
</style>
<div
className={`steps ${theme == 'numbers' && 'steps-counter '}`}
style={{
color: textColor,
height,
boxShadow,
opacity: isDisabled ? 0.5 : 1,
...(theme === 'numbers'
? {
paddingTop: 4,
}
: theme === 'plain'
? {
paddingTop: 10,
}
: {}),
}}
data-cy={dataCy}
>
{filteredSteps?.map((item, index) => {
const isStepDisabled = item.disabled;
return (
<ToolTip
key={item.id + index + item.name}
show={!item.disabled && !isDisabled}
message={item.tooltip || ''}
>
<a
className={`step-item ${item.id == activeStepId && 'active'} ${
!(!isDisabled && !isStepDisabled) && 'step-item-disabled'
} ${color && `step-${color}`}
${
index < currentStepIndex
? 'completed-label'
: index == currentStepIndex
? 'active-label'
: 'incompleted-label'
}`}
data-bs-toggle="tooltip"
title={item?.tooltip}
onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
style={{
...dynamicStyle,
overflow: 'visible',
minWidth: 0,
flex: 1,
}}
>
<div
data-bs-toggle="tooltip"
title={item?.tooltip}
onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%',
paddingLeft: index >= 0 ? 5 : 0,
paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
...dynamicStyle,
overflow: 'visible',
minWidth: 0,
flex: 1,
}}
>
{theme == 'titles' && item.name}
</div>
</a>
</ToolTip>
);
})}
</div>
<div
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%',
paddingLeft: index >= 0 ? 5 : 0,
paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
}}
>
{theme == 'titles' && item.name}
</div>
</a>
</ToolTip>
);
})}
</div>
</>
)
);
};