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

[REF] web_tour: use OverlayContainer for pointers

Browse Source 
**Before this commit**
The tour_service make use of a custom
main component TourPointerContainer.
But there is really no good reason it does.

**After this commit**
The tour_service now make use of the overlay service.
Advangates:
- same place in DOM for all piece of UI that overlays
  the other elements.
- should avoid potential stacking context issues
- removal of a useless component, less code to maintain

Part-of: odoo/odoo#137139
This commit is contained in:
Bruno Boi
2023-10-03 15:37:32 +00:00
parent 41713c5cce
commit 2c7afe7fe2
3 changed files with 30 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_tour/static/src/tour_service/tour_pointer_container.js
-11
View File
@@ -1,11 +0,0 @@
/** @odoo-module **/
import { Component, xml } from "@odoo/owl";
export class TourPointerContainer extends Component {}
TourPointerContainer.props = { pointers: Object };
TourPointerContainer.template = xml`
<t t-foreach="Object.values(props.pointers)" t-as="pointer" t-key="pointer.id">
<t t-component="pointer.component" t-props="pointer.props"/>
</t>
`;
addons/web_tour/static/src/tour_service/tour_service.js
+5 -8
View File
@@ -8,7 +8,6 @@ import { registry } from "@web/core/registry";
import { config as transitionConfig } from "@web/core/transition";
import { session } from "@web/session";
import { TourPointer } from "../tour_pointer/tour_pointer";
import { TourPointerContainer } from "./tour_pointer_container";
import { compileStepAuto, compileStepManual, compileTourToMacro } from "./tour_compilers";
import { createPointerState } from "./tour_pointer_state";
import { tourState } from "./tour_state";
@@ -56,8 +55,8 @@ import { callWithUnloadCheck } from "./tour_utils";
export const tourService = {
// localization dependency to make sure translations used by tours are loaded
dependencies: ["orm", "effect", "ui", "localization"],
start: async (_env, { orm, effect, ui }) => {
dependencies: ["orm", "effect", "ui", "overlay", "localization"],
start: async (_env, { orm, effect, ui, overlay }) => {
await whenReady();
/** @type {{ [k: string]: Tour }} */
@@ -108,13 +107,9 @@ export const tourService = {
const pointers = reactive({});
registry.category("main_components").add("TourPointerContainer", {
Component: TourPointerContainer,
props: { pointers },
});
function createPointer(tourName, config) {
const { state: pointerState, methods } = createPointerState();
let remove;
return {
start() {
pointers[tourName] = {
@@ -122,8 +117,10 @@ export const tourService = {
component: TourPointer,
props: { pointerState, ...config },
};
remove = overlay.add(pointers[tourName].component, pointers[tourName].props);
},
stop() {
remove?.();
delete pointers[tourName];
methods.destroy();
},
addons/web_tour/static/tests/tour_service_tests.js
+25 -25
View File
@@ -112,21 +112,21 @@ QUnit.module("Tour service", (hooks) => {
});
const env = await makeTestEnv({});
const { Component: TourPointerContainer, props: tourPointerProps } = registry
const { Component: OverlayContainer, props: overlayContainerProps } = registry
.category("main_components")
.get("TourPointerContainer");
.get("OverlayContainer");
class Root extends Component {
static components = { TourPointerContainer, Counter };
static components = { OverlayContainer, Counter };
static template = xml/*html*/ `
<t>
<Counter />
<TourPointerContainer t-props="props.tourPointerProps" />
<OverlayContainer t-props="props.overlayContainerProps" />
</t>
`;
}
await mount(Root, target, { env, props: { tourPointerProps } });
await mount(Root, target, { env, props: { overlayContainerProps } });
env.services.tour_service.startTour("tour1", { mode: "manual" });
await mock.advanceTime(800);
assert.containsOnce(document.body, ".o_tour_pointer");
@@ -149,21 +149,21 @@ QUnit.module("Tour service", (hooks) => {
});
const env = await makeTestEnv({});
const { Component: TourPointerContainer, props: tourPointerProps } = registry
const { Component: OverlayContainer, props: overlayContainerProps } = registry
.category("main_components")
.get("TourPointerContainer");
.get("OverlayContainer");
class Root extends Component {
static components = { TourPointerContainer, Counter };
static components = { OverlayContainer, Counter };
static template = xml/*html*/ `
<t>
<Counter />
<TourPointerContainer t-props="props.tourPointerProps" />
<OverlayContainer t-props="props.overlayContainerProps" />
</t>
`;
}
await mount(Root, target, { env, props: { tourPointerProps } });
await mount(Root, target, { env, props: { overlayContainerProps } });
env.services.tour_service.startTour("tour1", { mode: "manual" });
await mock.advanceTime(750);
assert.containsOnce(document.body, ".o_tour_pointer");
@@ -182,21 +182,21 @@ QUnit.module("Tour service", (hooks) => {
});
const env = await makeTestEnv({});
const { Component: TourPointerContainer, props: tourPointerProps } = registry
const { Component: OverlayContainer, props: overlayContainerProps } = registry
.category("main_components")
.get("TourPointerContainer");
.get("OverlayContainer");
class Root extends Component {
static components = { TourPointerContainer, Counter };
static components = { OverlayContainer, Counter };
static template = xml/*html*/ `
<t>
<Counter />
<TourPointerContainer t-props="props.tourPointerProps" />
<OverlayContainer t-props="props.overlayContainerProps" />
</t>
`;
}
await mount(Root, target, { env, props: { tourPointerProps } });
await mount(Root, target, { env, props: { overlayContainerProps } });
env.services.tour_service.startTour("tour1", { mode: "manual" });
env.services.tour_service.bus.addEventListener("STEP-CONSUMMED", ({ detail }) => {
assert.step(`Tour ${detail.tour.name}, step ${detail.step.trigger}`);
@@ -226,21 +226,21 @@ QUnit.module("Tour service", (hooks) => {
});
const env = await makeTestEnv({});
const { Component: TourPointerContainer, props: tourPointerProps } = registry
const { Component: OverlayContainer, props: overlayContainerProps } = registry
.category("main_components")
.get("TourPointerContainer");
.get("OverlayContainer");
class Root extends Component {
static components = { TourPointerContainer, Counter };
static components = { OverlayContainer, Counter };
static template = xml/*html*/ `
<t>
<Counter />
<TourPointerContainer t-props="props.tourPointerProps" />
<OverlayContainer t-props="props.overlayContainerProps" />
</t>
`;
}
await mount(Root, target, { env, props: { tourPointerProps } });
await mount(Root, target, { env, props: { overlayContainerProps } });
env.services.tour_service.startTour("tour1", { mode: "manual" });
env.services.tour_service.startTour("tour2", { mode: "manual" });
await mock.advanceTime(750);
@@ -263,21 +263,21 @@ QUnit.module("Tour service", (hooks) => {
});
const env = await makeTestEnv({});
const { Component: TourPointerContainer, props: tourPointerProps } = registry
const { Component: OverlayContainer, props: overlayContainerProps } = registry
.category("main_components")
.get("TourPointerContainer");
.get("OverlayContainer");
class Root extends Component {
static components = { TourPointerContainer, Counter };
static components = { OverlayContainer, Counter };
static template = xml/*html*/ `
<t>
<Counter />
<TourPointerContainer t-props="props.tourPointerProps" />
<OverlayContainer t-props="props.overlayContainerProps" />
</t>
`;
}
await mount(Root, target, { env, props: { tourPointerProps } });
await mount(Root, target, { env, props: { overlayContainerProps } });
env.services.tour_service.startTour("tour1", { mode: "manual" });
await mock.advanceTime(750);
assert.containsOnce(target, ".o_tour_pointer");