diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx index 6956236919..4fb4d521a1 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx @@ -63,14 +63,14 @@ export function Steps({ componentMeta, darkMode, ...restProps }) { let currentNumber = options.length + 1; while (!found) { label = `step ${currentNumber}`; - if (options.find((option) => option.label === label) === undefined) { + if (options.find((option) => option.name === label) === undefined) { found = true; } currentNumber += 1; } return { name: label, - id: Number((Math.random() * 1000).toFixed(0)), + id: currentNumber - 1, tooltip: label, visible: { value: '{{true}}' }, disabled: { value: '{{false}}' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js index fa562e2558..d076bb0b56 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js @@ -10,7 +10,7 @@ export const stepsConfig = { validation: { schema: { type: 'string' }, defaultValue: 'titles' }, options: [ { displayName: 'Label', value: 'titles' }, - { displayName: 'Numbers', value: 'numbers' }, + { displayName: 'Number', value: 'numbers' }, { displayName: 'Plain', value: 'plain' }, ], accordian: 'label', @@ -36,18 +36,18 @@ export const stepsConfig = { defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`, }, }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, visibility: { type: 'toggle', displayName: 'Visibility', validation: { schema: { type: 'boolean' }, defaultValue: true }, section: 'additionalActions', }, - // disabledState: { - // type: 'toggle', - // displayName: 'Disable', - // validation: { schema: { type: 'boolean' }, defaultValue: true }, - // section: 'additionalActions', - // }, advanced: { type: 'toggle', displayName: 'Dynamic options', @@ -226,11 +226,11 @@ export const stepsConfig = { 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}]}}`, }, + disabledState: { value: '{{false}}' }, variant: { value: 'titles' }, currentStep: { value: '{{3}}' }, stepsSelectable: { value: true }, advanced: { value: `{{false}}` }, - // disabledState: { value: '{{false}}' }, visibility: { value: '{{true}}' }, }, events: [], diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx index 16214f2251..ef245f9d74 100644 --- a/frontend/src/Editor/Components/Steps.jsx +++ b/frontend/src/Editor/Components/Steps.jsx @@ -3,7 +3,7 @@ import { isExpectedDataType } from '@/_helpers/utils'; import { ToolTip } from '@/_components/ToolTip'; export const Steps = function Button({ properties, styles, fireEvent, setExposedVariable, height, darkMode, dataCy }) { - const { stepsSelectable: disabledState } = properties; + const { stepsSelectable, disabledState } = properties; const visibility = isExpectedDataType(properties.visibility, 'boolean'); const currentStepId = isExpectedDataType(properties.currentStep, 'number'); const isDynamicStepsEnabled = isExpectedDataType(properties.advanced, 'boolean'); @@ -13,7 +13,7 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed const { completedAccent, incompletedAccent, incompletedLabel, completedLabel, currentStepLabel } = styles; const [stepsArr, setStepsArr] = useState(steps); const [isVisible, setIsVisible] = useState(visibility); - const [isDisabled, setIsDisabled] = useState(!disabledState); + const [isDisabled, setIsDisabled] = useState(disabledState); const [activeStepId, setActiveStepId] = useState(currentStepId); const filteredSteps = (stepsArr || []).filter((step) => step.visible); const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId); @@ -58,20 +58,14 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed setExposedVariable('isDisabled', isDisabled); }, [isDisabled]); - useEffect(() => { - setIsDisabled(!disabledState); - }, [disabledState]); - - useEffect(() => { - setExposedVariable('setStep', (stepId) => setActiveStepId(stepId)); - setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility)); - setExposedVariable('setDisabled', (disabled) => setIsDisabled(disabled)); - }, []); - useEffect(() => { setExposedVariable('currentStepId', activeStepId); }, [activeStepId]); + useEffect(() => { + setIsDisabled(disabledState); + }, [disabledState]); + useEffect(() => { setActiveStepId(currentStepId); }, [currentStepId]); @@ -107,6 +101,15 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed }); }, [JSON.stringify(steps), JSON.stringify(stepsArr)]); + useEffect(() => { + setExposedVariable('setStep', (stepId) => { + if (disabledState) return; + setActiveStepId(stepId); + }); + setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility)); + setExposedVariable('setDisable', (disabled) => setIsDisabled(disabled)); + }, []); + return ( isVisible && (
@@ -142,10 +151,26 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed }`} data-bs-toggle="tooltip" title={item?.tooltip} - onClick={() => !isDisabled && !isStepDisabled && activeStepHandler(item.id)} - style={dynamicStyle} + onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)} + style={{ + ...dynamicStyle, + overflow: 'visible', + minWidth: 0, + flex: 1, + }} > - {theme == 'titles' && (item.name?.length > 12 ? item.name.slice(0, 12) + '...' : item.name)} +
= 0 ? 5 : 0, + paddingRight: index < filteredSteps.length - 1 ? 5 : 0, + }} + > + {theme == 'titles' && item.name} +
); diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss index fd12d00b55..6d79d80093 100644 --- a/frontend/src/_styles/tabler.scss +++ b/frontend/src/_styles/tabler.scss @@ -7664,29 +7664,33 @@ fieldset:disabled .btn { } .rounded { - border-radius: 4px ; + border-radius: 4px; } .rounded-0 { border-radius: 0 !important } -.rounded-top-left{ +.rounded-top-left { border-top-left-radius: 4px; } -.rounded-top-left-0{ +.rounded-top-left-0 { border-top-left-radius: 0 !important; } -.rounded-top-right-0{ + +.rounded-top-right-0 { border-top-right-radius: 0 !important; } -.rounded-bottom-left-0{ + +.rounded-bottom-left-0 { border-bottom-left-radius: 0 !important; } -.rounded-bottom-right-0{ + +.rounded-bottom-right-0 { border-bottom-right-radius: 0 !important; } + .rounded-1 { border-radius: 2px !important } @@ -17499,8 +17503,8 @@ a.step-item:hover { } } -.step-item.active { - font-weight: 600 +.step-item { + font-weight: 500; } .step-item.active:before { @@ -17517,7 +17521,7 @@ a.step-item:hover { } .step-item.active~.step-item:before { - color: #656d77 !important + color: var(--incompletedLabel) !important } .steps-counter { @@ -17545,7 +17549,8 @@ a.step-item:hover { .steps-counter .step-item:before { font-size: .75rem; line-height: 1.5rem; - content: counter(steps) + content: counter(steps); + font-weight: 500 !important; } .steps-counter .step-item.active~.step-item:before { @@ -19152,4 +19157,4 @@ img { background: #1f2936; border-color: #dadcde } -} +} \ No newline at end of file diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index f564828821..6a5fd7a322 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -6524,7 +6524,7 @@ a.step-item-disabled { } .step-item.active:before { - background: #ffffff !important; + background: transparent !important; } .steps .step-item.active:before { diff --git a/server/src/modules/apps/services/widget-config/steps.js b/server/src/modules/apps/services/widget-config/steps.js index fa562e2558..d076bb0b56 100644 --- a/server/src/modules/apps/services/widget-config/steps.js +++ b/server/src/modules/apps/services/widget-config/steps.js @@ -10,7 +10,7 @@ export const stepsConfig = { validation: { schema: { type: 'string' }, defaultValue: 'titles' }, options: [ { displayName: 'Label', value: 'titles' }, - { displayName: 'Numbers', value: 'numbers' }, + { displayName: 'Number', value: 'numbers' }, { displayName: 'Plain', value: 'plain' }, ], accordian: 'label', @@ -36,18 +36,18 @@ export const stepsConfig = { defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`, }, }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, visibility: { type: 'toggle', displayName: 'Visibility', validation: { schema: { type: 'boolean' }, defaultValue: true }, section: 'additionalActions', }, - // disabledState: { - // type: 'toggle', - // displayName: 'Disable', - // validation: { schema: { type: 'boolean' }, defaultValue: true }, - // section: 'additionalActions', - // }, advanced: { type: 'toggle', displayName: 'Dynamic options', @@ -226,11 +226,11 @@ export const stepsConfig = { 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}]}}`, }, + disabledState: { value: '{{false}}' }, variant: { value: 'titles' }, currentStep: { value: '{{3}}' }, stepsSelectable: { value: true }, advanced: { value: `{{false}}` }, - // disabledState: { value: '{{false}}' }, visibility: { value: '{{true}}' }, }, events: [],