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

fix: fixed step label styling issues

Browse source
This commit is contained in:
johnsoncherian 2025-04-16 20:26:32 +05:30
parent 4336e887a0
commit 76c4fbbfc6
4 changed files with 39 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/AppBuilder/WidgetManager/widgets/steps.js
View file

@ -36,6 +36,15 @@ export const stepsConfig = {
defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`, defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
}, },
}, },
stepsSelectable: {
type: 'toggle',
displayName: 'Steps selectable',
validation: {
schema: { type: 'boolean' },
defaultValue: false,
},
section: 'additionalActions',
},
disabledState: { disabledState: {
type: 'toggle', type: 'toggle',
displayName: 'Disable', displayName: 'Disable',
@ -65,15 +74,7 @@ export const stepsConfig = {
defaultValue: 1, defaultValue: 1,
}, },
}, },
stepsSelectable: {
type: 'toggle',
displayName: 'Steps selectable',
validation: {
schema: { type: 'boolean' },
defaultValue: false,
},
section: 'additionalActions',
},
}, },
defaultSize: { defaultSize: {
width: 22, width: 22,
@ -216,15 +217,15 @@ export const stepsConfig = {
properties: { properties: {
steps: { steps: {
value: [ value: [
{ name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } }, { name: 'step 1', tooltip: '', id: 1, visible: { value: true }, disabled: { value: false } },
{ name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } }, { name: 'step 2', tooltip: '', id: 2, visible: { value: true }, disabled: { value: false } },
{ name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } }, { name: 'step 3', tooltip: '', id: 3, visible: { value: true }, disabled: { value: false } },
{ name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } }, { name: 'step 4', tooltip: '', id: 4, visible: { value: true }, disabled: { value: false } },
{ name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } }, { name: 'step 5', tooltip: '', id: 5, visible: { value: true }, disabled: { value: false } },
], ],
}, },
schema: { schema: {
value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`, value: `{{ [{ name: 'step 1', tooltip: '', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: '', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: '', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: '', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: '', id: 5,visible: true, disabled: false}]}}`,
}, },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
variant: { value: 'titles' }, variant: { value: 'titles' },

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

@ -162,6 +162,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
height, height,
boxShadow, boxShadow,
padding: theme === 'titles' ? `0 ${containerPadding}px` : 2, padding: theme === 'titles' ? `0 ${containerPadding}px` : 2,
paddingTop: theme === 'plain' ? `3px` : theme === 'numbers' ? `2px` : 0,
...dynamicStyle ...dynamicStyle
}} }}
data-cy={dataCy} data-cy={dataCy}
@ -178,7 +179,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
return ( return (
<React.Fragment key={index}> {/* using index as key to avoid issues due to duplicate step ids */} <React.Fragment key={index}> {/* using index as key to avoid issues due to duplicate step ids */}
<ToolTip <ToolTip
show={!step.disabled && !isDisabled} show={!step.disabled && !isDisabled && step.tooltip}
message={step.tooltip || ''} message={step.tooltip || ''}
> >
<div <div
@ -194,7 +195,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
className={`dot ${isCompleted ? 'completed' : isActive ? 'active' : 'incomplete'}`} className={`dot ${isCompleted ? 'completed' : isActive ? 'active' : 'incomplete'}`}
style={{ style={{
border: `2px solid ${isCompleted ? completedAccent : isActive ? completedAccent : incompletedAccent}`, border: `2px solid ${isCompleted ? completedAccent : isActive ? completedAccent : incompletedAccent}`,
backgroundColor: isActive ? 'white' : (isCompleted ? completedAccent : incompletedAccent) backgroundColor: isActive ? 'transparent' : (isCompleted ? completedAccent : incompletedAccent)
}} }}
/> />
{theme === 'titles' && ( {theme === 'titles' && (

10
frontend/src/Editor/Components/Steps.scss
View file

@ -41,19 +41,19 @@
&.completed { &.completed {
background-color: var(--completedAccent); background-color: var(--completedAccent);
color: #fff; color: var(--completedLabel);
border: 2px solid var(--completedAccent); border: 2px solid var(--completedAccent);
} }
&.active { &.active {
background-color: white; background-color: var(--surfaces-surface-01);
color: var(--completedAccent); color: var(--currentStepLabel);
border: 2px solid var(--completedAccent); border: 2px solid var(--completedAccent);
} }
&.incomplete { &.incomplete {
background-color: var(--incompletedAccent); background-color: var(--incompletedAccent);
color: #fff; color: var(--incompletedLabel);
border: 2px solid var(--incompletedAccent); border: 2px solid var(--incompletedAccent);
} }
} }
@ -108,7 +108,7 @@
} }
&.active { &.active {
color: var(--currentStepLabel); color: var(--completedLabel);
} }
&.incomplete { &.incomplete {

30
server/src/modules/apps/services/widget-config/steps.js
View file

@ -36,6 +36,15 @@ export const stepsConfig = {
defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`, defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
}, },
}, },
stepsSelectable: {
type: 'toggle',
displayName: 'Steps selectable',
validation: {
schema: { type: 'boolean' },
defaultValue: false,
},
section: 'additionalActions',
},
disabledState: { disabledState: {
type: 'toggle', type: 'toggle',
displayName: 'Disable', displayName: 'Disable',
@ -65,15 +74,6 @@ export const stepsConfig = {
defaultValue: 1, defaultValue: 1,
}, },
}, },
stepsSelectable: {
type: 'toggle',
displayName: 'Steps selectable',
validation: {
schema: { type: 'boolean' },
defaultValue: false,
},
section: 'additionalActions',
},
}, },
defaultSize: { defaultSize: {
width: 22, width: 22,
@ -216,15 +216,15 @@ export const stepsConfig = {
properties: { properties: {
steps: { steps: {
value: [ value: [
{ name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } }, { name: 'step 1', tooltip: '', id: 1, visible: { value: true }, disabled: { value: false } },
{ name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } }, { name: 'step 2', tooltip: '', id: 2, visible: { value: true }, disabled: { value: false } },
{ name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } }, { name: 'step 3', tooltip: '', id: 3, visible: { value: true }, disabled: { value: false } },
{ name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } }, { name: 'step 4', tooltip: '', id: 4, visible: { value: true }, disabled: { value: false } },
{ name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } }, { name: 'step 5', tooltip: '', id: 5, visible: { value: true }, disabled: { value: false } },
], ],
}, },
schema: { schema: {
value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`, value: `{{ [{ name: 'step 1', tooltip: '', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: '', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: '', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: '', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: '', id: 5,visible: true, disabled: false}]}}`,
}, },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
variant: { value: 'titles' }, variant: { value: 'titles' },