From 3c90a8555f5904c805da255992e1a33d2d30a074 Mon Sep 17 00:00:00 2001 From: "Guillaume (gdi)" Date: Tue, 24 Jan 2023 10:28:56 +0000 Subject: [PATCH] [FIX] website: handle device visibility on steps sub-components Since [this commit], it is possible to have a block only displayed on mobile screens. This feature can break the steps snippet by following these steps: - Drop a steps snippet in a page - Set the third step to be visible only on mobile => The connectors are broken. This commit fixes this issue by only considering steps that are visible in desktop view for connectors drawing. [this commit]: https://github.com/odoo/odoo/commit/3103e0553011b5c1f4078972d7a88fa3fd4068b2 task-3116227 Related to opw-3135927 closes odoo/odoo#113184 X-original-commit: d8521d197518e90d63443d1095b2df84487ad4ae Signed-off-by: Quentin Smetz (qsm) --- .../src/snippets/s_process_steps/options.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/addons/website/static/src/snippets/s_process_steps/options.js b/addons/website/static/src/snippets/s_process_steps/options.js index 1e6581d9345..4f63c18677d 100644 --- a/addons/website/static/src/snippets/s_process_steps/options.js +++ b/addons/website/static/src/snippets/s_process_steps/options.js @@ -81,15 +81,17 @@ options.registry.StepsConnector = options.Class.extend({ _reloadConnectors() { const possibleTypes = this._requestUserValueWidgets('connector_type')[0].getMethodsParams().optionsPossibleValues.selectClass; const type = possibleTypes.find(possibleType => possibleType && this.$target[0].classList.contains(possibleType)) || ''; - const steps = this.$target[0].querySelectorAll('.s_process_step'); + // As the connectors are only visible in desktop, we can ignore the + // steps that are only visible in mobile. + const stepsEls = this.$target[0].querySelectorAll('.s_process_step:not(.o_snippet_desktop_invisible)'); - for (let i = 0; i < steps.length - 1; i++) { - const connectorEl = steps[i].querySelector('.s_process_step_connector'); - const stepMainElementRect = this._getStepMainElementRect(steps[i]); - const nextStepMainElementRect = this._getStepMainElementRect(steps[i + 1]); - const stepSize = this._getStepColSize(steps[i]); - const nextStepSize = this._getStepColSize(steps[i + 1]); - const nextStepPadding = this._getStepColPadding(steps[i + 1]); + for (let i = 0; i < stepsEls.length - 1; i++) { + const connectorEl = stepsEls[i].querySelector('.s_process_step_connector'); + const stepMainElementRect = this._getStepMainElementRect(stepsEls[i]); + const nextStepMainElementRect = this._getStepMainElementRect(stepsEls[i + 1]); + const stepSize = this._getStepColSize(stepsEls[i]); + const nextStepSize = this._getStepColSize(stepsEls[i + 1]); + const nextStepPadding = this._getStepColPadding(stepsEls[i + 1]); connectorEl.style.left = `calc(50% + ${stepMainElementRect.width / 2}px)`; connectorEl.style.height = `${stepMainElementRect.height}px`;