diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 1e8367268fb..95159542d78 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1811,22 +1811,21 @@ body.editor_enable.editor_has_snippets { @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%); transform: translate(-50%, -110%); - &, > .o_overlay_move_options { + &, > .o_overlay_move_options, .o_overlay_edit_options { display: flex; } - > .o_overlay_move_options { - > *, + * { + > .o_overlay_move_options, .o_overlay_edit_options { + > * { @extend %we-generic-button; margin: 0 1px 0; min-width: 22px; padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5; color: $o-we-fg-lighter; + &.oe_snippet_remove { + background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg); + } } } - > .oe_snippet_remove { - margin-left: $o-we-sidebar-content-field-button-group-button-spacing; - background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);; - } > .o_overlay_move_options > .o_move_handle { cursor: move; width: 30px; @@ -1836,8 +1835,8 @@ body.editor_enable.editor_has_snippets { background-repeat: no-repeat; } &:hover { - > .o_overlay_move_options { - > *, + * { + > .o_overlay_move_options, .o_overlay_edit_options { + > * { @include o-hover-opacity(.6); &:hover { @@ -1846,10 +1845,6 @@ body.editor_enable.editor_has_snippets { } } } - > .oe_snippet_remove:hover { - border-color: mix($o-we-color-danger, $o-we-sidebar-content-field-pressed-bg, .4); - background-color: $o-we-color-danger; - } } } } diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index 0c0319c8561..62308dee4e5 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -15,7 +15,9 @@
- + diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 138540edaf2..969f223391d 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -10,6 +10,7 @@ const weUtils = require('web_editor.utils'); var options = require('web_editor.snippets.options'); const wUtils = require('website.utils'); require('website.s_popup_options'); +const weWidgets = require('wysiwyg.widgets'); var _t = core._t; var qweb = core.qweb; @@ -2588,6 +2589,37 @@ options.registry.ScrollButton = options.Class.extend({ }, }); +/** + * Allows for images to be replaced. + */ +options.registry.ReplaceImage = options.Class.extend({ + /** + * @override + */ + start: function () { + const $button = this.$el.find('we-button'); + const $overlayArea = this.$overlay.find('.oe_snippet_remove'); + $button.insertBefore($overlayArea); + + return this._super(...arguments); + }, + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * Replaces the image. + * + * @see this.selectClass for parameters + */ + replaceImage: async function () { + // TODO: simulates a double click on an image from summernote, + // to be refactored when the new editor is merged + this.$target.dblclick(); + }, +}); + return { UrlPickerUserValueWidget: UrlPickerUserValueWidget, FontFamilyPickerUserValueWidget: FontFamilyPickerUserValueWidget, diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index a8876feabf8..2a6024edfd8 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -437,6 +437,11 @@