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

moved fix to css file

Browse source
This commit is contained in:
TaruunMalik 2025-04-14 05:48:21 +00:00
parent 86b6b57561
commit 7b5cd80395
2 changed files with 61 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -117,48 +117,37 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
return (
isVisible && (
<>
<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}`}
<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'
@ -166,34 +155,33 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
? 'active-label'
: 'incompleted-label'
}`}
data-bs-toggle="tooltip"
title={item?.tooltip}
onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
data-bs-toggle="tooltip"
title={item?.tooltip}
onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
style={{
...dynamicStyle,
overflow: 'visible',
minWidth: 0,
flex: 1,
}}
>
<div
style={{
...dynamicStyle,
overflow: 'visible',
minWidth: 0,
flex: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%',
paddingLeft: index >= 0 ? 5 : 0,
paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
}}
>
<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>
</>
{theme == 'titles' && item.name}
</div>
</a>
</ToolTip>
);
})}
</div>
)
);
};

7
frontend/src/_styles/tabler.scss
View file

@ -17502,7 +17502,12 @@ a.step-item:hover {
width: calc(100% - 32px) !important;
}
}
.steps-counter .step-item:before {
color:var(--completedLabel) !important;
}
.steps .step-item.active:before{
color : var(--currentStepLabel) !important;
}
.step-item {
font-weight: 500;
}