pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: handle device visibility on steps sub-components

Browse Source 
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) <qsm@odoo.com>
This commit is contained in:
Guillaume (gdi)
2023-02-21 21:07:16 +01:00
parent 291439da11
commit 3c90a8555f
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_process_steps/options.js
+10 -8
View File
@@ -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`;