diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 5f411f50dd4..c7d2d02cc13 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -180,6 +180,7 @@
'website/static/src/js/editor/wysiwyg_multizone_translate.js',
'website/static/src/js/editor/widget_link.js',
'website/static/src/js/widgets/media.js',
+ 'website/static/src/js/widgets/link_popover_widget.js',
],
'website.assets_editor': [
('include', 'web._assets_helpers'),
diff --git a/addons/website/models/website_menu.py b/addons/website/models/website_menu.py
index afd728ca9b0..1192646ef44 100644
--- a/addons/website/models/website_menu.py
+++ b/addons/website/models/website_menu.py
@@ -166,7 +166,7 @@ class Menu(models.Model):
menu['id'] = new_id
if menu['parent_id'] == old_id:
menu['parent_id'] = new_id
- to_delete = data['to_delete']
+ to_delete = data.get('to_delete')
if to_delete:
self.browse(to_delete).unlink()
for menu in data['data']:
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 6859571d5ad..b8dac66b16a 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -8,6 +8,7 @@ var Dialog = require('web.Dialog');
const dom = require('web.dom');
const weUtils = require('web_editor.utils');
var options = require('web_editor.snippets.options');
+const wLinkPopoverWidget = require('@website/js/widgets/link_popover_widget')[Symbol.for("default")];
const wUtils = require('website.utils');
require('website.s_popup_options');
@@ -1184,45 +1185,27 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
options.registry.menu_data = options.Class.extend({
/**
- * When the users selects a menu, a dialog is opened to ask him if he wants
- * to follow the link (and leave editor), edit the menu or do nothing.
+ * When the users selects a menu, a popover is shown with 4 possible
+ * actions: follow the link in a new tab, copy the menu link, edit the menu,
+ * or edit the menu tree.
+ * The popover shows a preview of the menu link. Remote URL only show the
+ * favicon.
*
* @override
*/
- onFocus: function () {
- var self = this;
- (new Dialog(this, {
- title: _t("Confirmation"),
- $content: $(core.qweb.render('website.leaving_current_page_edition')),
- buttons: [
- {text: _t("Go to Link"), classes: 'btn-primary', click: function () {
- self.trigger_up('request_save', {
- reload: false,
- onSuccess: function () {
- window.location.href = self.$target.attr('href');
- },
- });
- }},
- {text: _t("Edit the menu"), classes: 'btn-primary', close: true, click: function () {
- this.trigger_up('action_demand', {
- actionName: 'edit_menu',
- params: [
- function () {
- var prom = new Promise(function (resolve, reject) {
- self.trigger_up('request_save', {
- onSuccess: resolve,
- onFailure: reject,
- });
- });
- return prom;
- },
- ],
- });
- }},
- {text: _t("Stay on this page"), close: true}
- ]
- })).open();
+ start: function () {
+ wLinkPopoverWidget.createFor(this, this.$target[0]);
+ return this._super(...arguments);
},
+ /**
+ * When the users selects another element on the page, makes sure the
+ * popover is closed.
+ *
+ * @override
+ */
+ onBlur: function () {
+ this.$target.popover('hide');
+ },
});
options.registry.company_data = options.Class.extend({
diff --git a/addons/website/static/src/js/widgets/link_popover_widget.js b/addons/website/static/src/js/widgets/link_popover_widget.js
new file mode 100644
index 00000000000..5ee4153fdfb
--- /dev/null
+++ b/addons/website/static/src/js/widgets/link_popover_widget.js
@@ -0,0 +1,94 @@
+/** @odoo-module **/
+
+import contentMenu from 'website.contentMenu';
+import weWidgets from 'wysiwyg.widgets';
+import {_t} from 'web.core';
+
+const NavbarLinkPopoverWidget = weWidgets.LinkPopoverWidget.extend({
+ events: _.extend({}, weWidgets.LinkPopoverWidget.prototype.events, {
+ 'click .js_edit_menu': '_onEditMenuClick',
+ }),
+ /**
+ *
+ * @override
+ */
+ start() {
+ // remove link has no sense on navbar menu links, instead show edit menu
+ const $anchor = $('
', {
+ href: '#', class: 'ml-2 js_edit_menu', title: _t('Edit Menu'),
+ 'data-placement': 'top', 'data-toggle': 'tooltip',
+ }).append($('
', {class: 'fa fa-sitemap text-secondary'}));
+ this.$('.o_we_remove_link').replaceWith($anchor);
+ return this._super(...arguments);
+ },
+
+ //--------------------------------------------------------------------------
+ // Handlers
+ //--------------------------------------------------------------------------
+
+ /**
+ * Opens the menu item editor.
+ *
+ * @override
+ * @param {Event} ev
+ */
+ _onEditLinkClick(ev) {
+ var self = this;
+ var $menu = this.$target.find('[data-oe-id]');
+ var dialog = new contentMenu.MenuEntryDialog(this, {}, null, {
+ name: $menu.text(),
+ url: $menu.parent().attr('href'),
+ });
+ dialog.on('save', this, link => {
+ let websiteId;
+ this.trigger_up('context_get', {
+ callback: function (ctx) {
+ websiteId = ctx['website_id'];
+ },
+ });
+ const data = {
+ id: $menu.data('oe-id'),
+ name: link.text,
+ url: link.url,
+ };
+ return this._rpc({
+ model: 'website.menu',
+ method: 'save',
+ args: [websiteId, {'data': [data]}],
+ }).then(function () {
+ self.$target.attr('href', link.url);
+ $menu.text(link.text);
+ self._loadAsyncLinkPreview();
+ });
+ });
+ dialog.open();
+ },
+ /**
+ * Opens the menu tree editor. On menu editor save, current page changes
+ * will also be saved.
+ *
+ * @private
+ * @param {Event} ev
+ */
+ _onEditMenuClick(ev) {
+ this.trigger_up('action_demand', {
+ actionName: 'edit_menu',
+ params: [
+ () => {
+ const prom = new Promise((resolve, reject) => {
+ this.trigger_up('request_save', {
+ onSuccess: resolve,
+ onFailure: reject,
+ });
+ });
+ return prom;
+ },
+ ],
+ });
+ },
+});
+
+// Exact same static method but instantiating the specialized class.
+NavbarLinkPopoverWidget.createFor = weWidgets.LinkPopoverWidget.createFor;
+
+export default NavbarLinkPopoverWidget;
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index 02f4175d078..0ba5dbb6af2 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -111,3 +111,30 @@ $o-we-switch-inactive-color: #F7F7F7 !default;
width: 100%;
}
}
+
+.o_edit_menu_popover {
+ max-width: $popover-max-width * 1.2;
+ // Prevent UI glitch after fetching page preview (size might change)
+ width: $popover-max-width * 1.2;
+
+ .o_we_url_link {
+ word-break: break-all;
+ }
+
+ .o_we_full_url {
+ word-break: break-all;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ // clamp (`-webkit-box` display toggle in js)
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+
+ &.o_we_webkit_box {
+ display: -webkit-box;
+ }
+
+ &:hover {
+ -webkit-line-clamp: unset;
+ }
+ }
+}
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 2132bfce727..f2b2fcd230a 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -4,10 +4,6 @@
Welcome to your Homepage!
Click on Edit in the top right corner to start designing.