*: 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>
191 lines
6.6 KiB
JavaScript
191 lines
6.6 KiB
JavaScript
/** @odoo-module */
|
|
|
|
import wTourUtils from 'website.tour_utils';
|
|
|
|
wTourUtils.registerWebsitePreviewTour('edit_menus', {
|
|
test: true,
|
|
url: '/',
|
|
}, [
|
|
// Add a megamenu item from the menu.
|
|
{
|
|
content: "open site menu",
|
|
extra_trigger: "iframe #wrapwrap",
|
|
trigger: 'button[data-menu-xmlid="website.menu_site"]',
|
|
},
|
|
{
|
|
content: "Click on Edit Menu",
|
|
trigger: 'a[data-menu-xmlid="website.menu_edit_menu"]',
|
|
},
|
|
{
|
|
content: "Trigger the link dialog (click 'Add Mega Menu Item')",
|
|
extra_trigger: '.o_website_dialog:visible',
|
|
trigger: '.modal-body a:eq(1)',
|
|
},
|
|
{
|
|
content: "Write a label for the new menu item",
|
|
trigger: '.modal-dialog .o_website_dialog input',
|
|
run: 'text Megaaaaa!'
|
|
},
|
|
{
|
|
content: "Confirm the mega menu label",
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
{
|
|
content: "Save the new menu",
|
|
trigger: '.modal-footer .btn-primary',
|
|
extra_trigger: '.oe_menu_editor [data-is-mega-menu="true"] .js_menu_label:contains("Megaaaaa!")',
|
|
},
|
|
wTourUtils.clickOnExtraMenuItem({extra_trigger: 'body:not(:has(.oe_menu_editor))'}, true),
|
|
{
|
|
content: "There should be a new megamenu item.",
|
|
trigger: 'iframe #top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
// Add a menu item in edit mode.
|
|
wTourUtils.clickOnEdit(),
|
|
{
|
|
content: "Click on a menu item",
|
|
trigger: 'iframe #top_menu .nav-item a',
|
|
extra_trigger: '#oe_snippets.o_loaded',
|
|
},
|
|
{
|
|
content: "Click on Edit Menu",
|
|
trigger: 'iframe .o_edit_menu_popover a.js_edit_menu',
|
|
},
|
|
{
|
|
content: "Trigger the link dialog (click 'Add Menu Item')",
|
|
extra_trigger: '.o_website_dialog:visible',
|
|
trigger: '.modal-body a:eq(0)',
|
|
},
|
|
{
|
|
content: "Confirm the new menu entry without a label",
|
|
extra_trigger: '.modal-dialog .o_website_dialog input:eq(0)',
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
{
|
|
content: "It didn't save without a label. Fill label input.",
|
|
extra_trigger: '.o_website_dialog:eq(1):visible',
|
|
trigger: '.modal-dialog .o_website_dialog input:eq(0)',
|
|
run: 'text Random!',
|
|
},
|
|
{
|
|
content: "Confirm the new menu entry without a url",
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
{
|
|
content: "It didn't save without a url. Fill url input.",
|
|
trigger: '.modal-dialog .o_website_dialog input:eq(1)',
|
|
extra_trigger: '.modal-dialog .o_website_dialog input.is-invalid',
|
|
run: 'text #',
|
|
},
|
|
{
|
|
content: "Confirm the new menu entry",
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
{
|
|
content: "Save the website menu with the new entry",
|
|
trigger: '.modal-footer .btn-primary',
|
|
extra_trigger: '.oe_menu_editor .js_menu_label:contains("Random!")',
|
|
},
|
|
// Edit the new menu item from the "edit link" popover button
|
|
wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}, true),
|
|
{
|
|
content: "Menu should have a new link item",
|
|
trigger: 'iframe #top_menu .nav-item a:contains("Random!")',
|
|
},
|
|
{
|
|
content: "Click on Edit Link",
|
|
trigger: 'iframe .o_edit_menu_popover a.o_we_edit_link',
|
|
},
|
|
{
|
|
content: "Change the label",
|
|
trigger: '.modal-dialog .o_website_dialog input:eq(0)',
|
|
run: 'text Modnar',
|
|
},
|
|
{
|
|
content: "Confirm the new label",
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
...wTourUtils.clickOnSave(),
|
|
wTourUtils.clickOnExtraMenuItem({extra_trigger: 'iframe body:not(.editor_enable)'}, true),
|
|
{
|
|
content: "Label should have changed",
|
|
extra_trigger: "iframe body:not(.editor_enable)",
|
|
trigger: 'iframe #top_menu .nav-item a:contains("Modnar")',
|
|
run: () => {}, // it's a check
|
|
},
|
|
// Edit the menu item from the "edit menu" popover button
|
|
wTourUtils.clickOnEdit(),
|
|
{
|
|
content: "Click on the 'Modnar' link",
|
|
extra_trigger: "#oe_snippets.o_loaded",
|
|
trigger: 'iframe #top_menu .nav-item a:contains("Modnar")',
|
|
},
|
|
{
|
|
content: "Click on the popover Edit Menu button",
|
|
trigger: 'iframe .o_edit_menu_popover a.js_edit_menu',
|
|
},
|
|
{
|
|
content: "Click on the dialog Edit Menu button",
|
|
trigger: '.oe_menu_editor .js_menu_label:contains("Modnar")',
|
|
run: function () {
|
|
const liEl = this.$anchor[0].closest('[data-menu-id]');
|
|
liEl.querySelector('button.js_edit_menu').click();
|
|
},
|
|
},
|
|
{
|
|
content: "Change the label",
|
|
trigger: '.modal-dialog .o_website_dialog input:eq(0)',
|
|
run: 'text Modnar !!',
|
|
},
|
|
{
|
|
content: "Confirm the new menu label",
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
{
|
|
content: "Save the website menu with the new menu label",
|
|
trigger: '.modal-footer .btn-primary',
|
|
extra_trigger: '.oe_menu_editor .js_menu_label:contains("Modnar !!")',
|
|
},
|
|
...wTourUtils.clickOnSave(),
|
|
wTourUtils.clickOnExtraMenuItem({extra_trigger: 'iframe body:not(.editor_enable)'}, true),
|
|
{
|
|
content: "Label should have changed",
|
|
trigger: 'iframe #top_menu .nav-item a:contains("Modnar !!")',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
// Nest menu item from the menu.
|
|
{
|
|
content: "open site menu",
|
|
trigger: 'button[data-menu-xmlid="website.menu_site"]',
|
|
},
|
|
{
|
|
content: "Click on Edit Menu",
|
|
trigger: 'a[data-menu-xmlid="website.menu_edit_menu"]',
|
|
},
|
|
{
|
|
content: "Drag item into parent",
|
|
trigger: '.oe_menu_editor li:contains("Contact us") > .ui-sortable-handle',
|
|
// Menu rows are 38px tall.
|
|
run: "drag_move_and_drop [50,38]@.oe_menu_editor li:contains('Home') > .ui-sortable-handle => .oe_menu_editor li:contains('Home') .ui-sortable-placeholder",
|
|
},
|
|
{
|
|
content: "Wait for drop",
|
|
trigger: '.oe_menu_editor li:contains("Home") ul li:contains("Contact us")',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
{
|
|
content: "Save the website menu with new nested menus",
|
|
trigger: '.modal-footer .btn-primary',
|
|
},
|
|
{
|
|
content: "Menu item should have a child",
|
|
trigger: 'iframe #top_menu .nav-item a.dropdown-toggle:contains("Home")',
|
|
},
|
|
{
|
|
content: "When menu item is opened, child item must appear in the shown menu",
|
|
trigger: 'iframe #top_menu .nav-item:contains("Home") ul.show li a.dropdown-item:contains("Contact us")[href="/contactus"]',
|
|
run: () => {}, // It's a check.
|
|
},
|
|
]);
|