[FIX] web, web_editor, *: review chess-like bg for transparency preview

*: website

The style to achieve the chess-like bg result was duplicated at many
places. The 'web' app was also actually using an image from the
'web_editor' app (we can live with it in stable as web_editor always
comes with web in auto_install but this was still a mistake).

closes odoo/odoo#54154

Also: fix some layout issue in the colorpicker widget.
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

6 files changed, 13 insertions, 32 deletions

diff --git a/addons/web_editor/static/src/img/transparent.png b/addons/web_editor/static/src/img/transparent.png
deleted file mode 100644
index 4a1bec033e7..00000000000
--- a/addons/web_editor/static/src/img/transparent.png
+++ /dev/null
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 9a980e9a392..c6301e6da2d 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -76,27 +76,6 @@ $o-we-toolbar-height: 32px;
     box-shadow: 0 0 15px 2px #000;
 }
 
-// Mixins for buttons with alpha bg-color
-@mixin o-alpha-button-preview {
-    position: relative;
-    z-index: 1;
-
-    // Place an overlay that inherit the button's bg-color.
-    &::before {
-        content: "";
-        @include o-position-absolute(0, 0, 0, 0);
-        background-color: inherit;
-    }
-
-    &::after {
-        content: "";
-        @include o-position-absolute(0, 0, 0, 0);
-        z-index: -1;
-        background-image: url('/web_editor/static/src/img/transparent.png');
-        background-size: 10px auto;
-    }
-}
-
 // ============    Preservation mixins    ===============
 // Used to preserve web_editor and website UI from themes customizations
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index d457b4cf69a..08dc16f8c7b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -221,9 +221,12 @@ body .modal {
                 min-height: 300px;
             }
 
-            .o_we_images > .o_existing_attachment_cell img {
-                max-width: 100%;
-                background-image: url("/web_editor/static/src/img/transparent.png");
+            .o_we_images > .o_existing_attachment_cell .o_we_media_dialog_img_wrapper {
+                @extend %o-preview-alpha-background;
+
+                &, > img {
+                    max-width: 100%;
+                }
             }
 
             .o_existing_attachment_cell {
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e01d65f9c4e..da7caa44c5f 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -486,7 +486,7 @@ body.editor_enable.editor_has_snippets {
             flex: 0 0 auto;
 
             .o_we_color_preview {
-                @include o-alpha-button-preview;
+                @extend %o-preview-alpha-background;
                 display: block;
                 flex: 0 0 auto;
                 width: 1em;
@@ -676,9 +676,8 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
-.o_we_cc_preview_container {
-    background-color: white !important;
-    background-image: url("/web_editor/static/src/img/transparent.png") !important;
+.o_we_cc_preview_wrapper {
+    @extend %o-preview-alpha-background;
     font-family: sans-serif !important;
     font-size: 16px !important;
 }
@@ -790,7 +789,7 @@ body.editor_enable.editor_has_snippets {
 
             &[data-name="transparent_grayscale"], &[data-name="theme"], &[data-name="reset"] {
                 .o_we_color_btn {
-                    @include o-alpha-button-preview;
+                    @extend %o-preview-alpha-background;
 
                     &::before, &::after {
                         box-shadow: inherit;
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index aff99211e31..226d4403eea 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -62,7 +62,7 @@
         <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} p-1" data-color-tab="theme-colors"/>
     </div>
     <t t-name="web_editor.colorpalette.combination.btn">
-        <button type="button" class="o_we_color_btn o_we_color_combination_btn o_we_cc_preview_container"
+        <button type="button" class="o_we_color_btn o_we_color_combination_btn"
                 t-att-data-color="number" t-attf-title="Preset #{number}">
             <t t-call="web_editor.color.combination.preview"/>
         </button>
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 1fe90b044d6..714d0913e5d 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -306,9 +306,9 @@
 
     <t t-name="wysiwyg.widgets.image.existing.attachment">
         <t t-set="isOptimized" t-value="!!attachment.original_id"/>
-        <div t-attf-class="o_existing_attachment_cell position-relative bg-light #{isOptimized and 'o_we_attachment_optimized d-none'}" t-att-data-id="attachment.id">
+        <div t-attf-class="o_existing_attachment_cell position-relative bg-light #{isOptimized and 'o_we_attachment_optimized d-none' or ''} align-items-center justify-content-center" t-att-data-id="attachment.id">
             <t t-call="wysiwyg.widgets.file.existing.remove"/>
-            <div t-attf-class="d-flex align-items-center justify-content-center h-100 w-100">
+            <div class="o_we_media_dialog_img_wrapper">
                 <!-- 256 is 2 * ImageWidget.MIN_ROW_HEIGHT, hopefully the highest display width of any image -->
                 <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{attachment.image_src}?height=256" t-att-alt="attachment.name" t-att-title="attachment.name"/>
             </div>