[IMP] web_editor: highlight the selected image/icon

When we selected an image/icon, there was no visual feedback explaining
to the user that the image/icon had been selected (except for images on
chrome).

task-35020
Closes https://github.com/odoo/odoo/pull/24160

3 files changed, 23 insertions, 4 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 9bd1f692153..8d9d19be795 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -212,7 +212,9 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
     // stop animation when edit content
     var previous = $(".note-control-selection").data('target');
     if (previous) {
-        $(previous).css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
+        var $previous = $(previous);
+        $previous.css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
+        $previous.find('.o_we_selected_image').addBack('.o_we_selected_image').removeClass('o_we_selected_image');
     }
     // end
 
@@ -229,8 +231,9 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         $container.find('a[data-event="padding"][data-value="xl"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-xl"));
         $container.find('a[data-event="padding"][data-value=""]').parent().toggleClass("active", !$container.find('.active a[data-event="padding"]').length);
 
-        if (dom.isImgFont(oStyle.image)) {
+        $(oStyle.image).addClass('o_we_selected_image');
 
+        if (dom.isImgFont(oStyle.image)) {
             $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass("hidden");
             $container.find('.only_fa').removeClass("hidden");
             $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
@@ -243,7 +246,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
 
         } else {
-
             $container.find('.hidden:not(.only_fa)').removeClass("hidden");
             $container.find('.only_fa').addClass("hidden");
             var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/);
@@ -262,7 +264,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
             }
 
             $container.find('.note-color').addClass("hidden");
-
         }
 
         $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("pull-left"));
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 1564b699840..708f576ebc8 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -637,10 +637,14 @@ var SnippetsMenu = Widget.extend({
         _.each(this.snippetEditors, function (snippetEditor) {
             snippetEditor.cleanForSave();
         });
+
         this.$editable.find('[contentEditable]')
             .removeAttr('contentEditable')
             .removeProp('contentEditable');
 
+        this.$editable.find('.o_we_selected_image')
+            .removeClass('o_we_selected_image');
+
         // Removing query_string used to invalidate cache during image crop
         _.each(this.$editable.find('.o_cropped_img_to_clean'), function (croppedImg) {
             var $croppedImg = $(croppedImg);
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 378bdba5c30..787cb95f0af 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -1686,3 +1686,17 @@ body .modal {
         }
     }
 }
+
+
+// Highlight selected image/icon
+%o-we-selected-image {
+    $o-selected-image-color: rgba(150, 150, 220, 0.3);
+    background: $o-selected-image-color;
+    outline: 3px solid $o-selected-image-color;
+}
+img.o_we_selected_image {
+    @extend %o-we-selected-image;
+}
+.fa.o_we_selected_image::before {
+    @extend %o-we-selected-image;
+}