*: website, test_website Before this commit, the LinkPopoverWidget element was not positioned correctly in mobile edition. With [1] that introduced the website edition using an iframe, the element was appended on the global document, outside of the iframe, so that it was not overlapped by the snippets manipulators (that were also in the global document). But Bootstrap popovers are not meant to be used "on top" of iframes. Bootstrap uses the container's ownerDocument to compute placements, and does not take into account whether or not the target is located inside an iframe (therefore, skipping the iframe's offset and dimensions in the placements computations). This was leading to a visual bug in mobile edition: the iframe top, left values were not computed by the popover, and it was not positioned correctly. Since [2] moved the manipulators inside the iframe, the popover can be initialised using its target ownerDocument body, without being overlapped by the manipulators. Styles are adapted so that the popover stays consistent in the frontend and the backend, and a container option is added to the widget so that the element can be placed with other snippets manipulators from the website builder. [1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b [2]: https://github.com/odoo/odoo/commit/872bb20b3ac08cf82613e15e6634a2e7593ccf7a task-2687506 closes odoo/odoo#103562 X-original-commit: 931d488af0d4dce529e4ea4ab3c8b827bda0d699 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com> Signed-off-by: Younn Olivier (yol) <yol@odoo.com>
120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
/** @odoo-module */
|
|
|
|
import wTourUtils from 'website.tour_utils';
|
|
|
|
const clickOnImgStep = {
|
|
content: "Click somewhere else to save.",
|
|
trigger: 'iframe #wrap .s_text_image img',
|
|
};
|
|
|
|
wTourUtils.registerWebsitePreviewTour('link_tools', {
|
|
test: true,
|
|
url: '/',
|
|
edition: true,
|
|
}, [
|
|
// 1. Create a new link from scratch.
|
|
wTourUtils.dragNDrop({
|
|
id: 's_text_image',
|
|
name: 'Text - Image',
|
|
}),
|
|
{
|
|
content: "Replace first paragraph, to insert a new link",
|
|
trigger: 'iframe #wrap .s_text_image p',
|
|
run: 'text Go to odoo: '
|
|
},
|
|
{
|
|
content: "Open link tools",
|
|
trigger: "#toolbar #create-link",
|
|
},
|
|
{
|
|
content: "Type the link URL odoo.com",
|
|
trigger: '#o_link_dialog_url_input',
|
|
run: 'text odoo.com'
|
|
},
|
|
clickOnImgStep,
|
|
// 2. Edit the link with the link tools.
|
|
{
|
|
content: "Click on the newly created link, change content to odoo website",
|
|
trigger: 'iframe .s_text_image a[href="http://odoo.com"]:contains("odoo.com")',
|
|
run: 'text odoo website',
|
|
},
|
|
{
|
|
content: "Link tools, should be open, change the url",
|
|
trigger: '#o_link_dialog_url_input',
|
|
run: 'text odoo.be'
|
|
},
|
|
|
|
clickOnImgStep,
|
|
...wTourUtils.clickOnSave(),
|
|
// 3. Edit a link after saving the page.
|
|
wTourUtils.clickOnEdit(),
|
|
{
|
|
content: "The new link content should be odoo website and url odoo.be",
|
|
extra_trigger: "#oe_snippets.o_loaded",
|
|
trigger: 'iframe .s_text_image a[href="http://odoo.be"]:contains("odoo website")',
|
|
},
|
|
{
|
|
content: "The new link content should be odoo website and url odoo.be",
|
|
trigger: '#toolbar button[data-bs-original-title="Link Style"]',
|
|
},
|
|
{
|
|
// When doing automated testing, the link popover takes time to
|
|
// hide. While hidding, the editor observer is unactive in order to
|
|
// prevent the popover mutation to be recorded. In a manual
|
|
// scenario, the popover has plenty of time to be hidden and the
|
|
// obsever would be re-activated in time. As this problem arise only
|
|
// in test, we make sure the popover is hidden
|
|
trigger: 'iframe html:not(:has(.popover))',
|
|
run: () => null, // it's a check
|
|
},
|
|
{
|
|
content: "Click on the secondary style button.",
|
|
trigger: '#toolbar we-button[data-value="secondary"]',
|
|
},
|
|
...wTourUtils.clickOnSave(),
|
|
{
|
|
content: "The link should have the secondary button style.",
|
|
trigger: 'iframe .s_text_image a.btn.btn-secondary[href="http://odoo.be"]:contains("odoo website")',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
// 4. Add link on image.
|
|
wTourUtils.clickOnEdit(),
|
|
{
|
|
content: "Click on image.",
|
|
trigger: 'iframe .s_text_image img',
|
|
extra_trigger: '#oe_snippets.o_loaded',
|
|
},
|
|
{
|
|
content: "Activate link.",
|
|
trigger: '.o_we_customize_panel we-row:contains("Media") we-button.fa-link',
|
|
},
|
|
{
|
|
content: "Set URL.",
|
|
trigger: '.o_we_customize_panel we-input:contains("Your URL") input',
|
|
run: 'text odoo.com',
|
|
},
|
|
{
|
|
content: "Deselect image.",
|
|
trigger: 'iframe .s_text_image p',
|
|
},
|
|
{
|
|
content: "Re-select image.",
|
|
trigger: 'iframe .s_text_image img',
|
|
},
|
|
{
|
|
content: "Check that link tools appear.",
|
|
trigger: 'iframe .popover div a:contains("http://odoo.com")',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
// 5. Remove link from image.
|
|
{
|
|
content: "Remove link.",
|
|
trigger: 'iframe .popover:contains("http://odoo.com") a .fa-chain-broken',
|
|
},
|
|
{
|
|
content: "Check that image is not within a link anymore.",
|
|
trigger: 'iframe .s_text_image div > img',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
]);
|