From d240d3a2eee1eea1d39e42f71511636a7a01f96f Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 24 Sep 2021 19:59:50 +0000
Subject: [PATCH] [IMP] web_editor, mass_mailing: disable transparency in mass
 mailing

Transparency is not supported in several leading mail clients. This adds
the option to completely remove transparent colors from the palette, and
uses that option in `mass_mailing`.

task-2554899

X-original-commit: 4e2c859b6d4fb8d9c12e24d1c8ebc84aa0f3c72e
Part-of: odoo/odoo#77724
---
 addons/mass_mailing/views/snippets_themes.xml                 | 2 ++
 addons/web_editor/static/src/js/editor/snippets.options.js    | 4 ++++
 .../web_editor/static/src/js/wysiwyg/widgets/color_palette.js | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 2af82cdf676..333964b98c0 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -423,6 +423,7 @@
         data-exclude=".o_mail_no_colorpicker, .o_mail_no_options">
         <we-colorpicker string="Background Color"
             data-select-style="true"
+            data-no-transparency="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
     </div>
@@ -433,6 +434,7 @@
          data-target=".card">
         <we-colorpicker string="Colors"
             data-select-style="true"
+            data-no-transparency="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
         <t t-call="web_editor.snippet_options_border_widgets">
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index b06a8bc726c..b320622ff33 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1485,6 +1485,10 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         if (this.options.dataAttributes.withGradients) {
             options.withGradients = !!this.options.dataAttributes.withGradients;
         }
+        if (this.options.dataAttributes.noTransparency) {
+            options.noTransparency = !!this.options.dataAttributes.noTransparency;
+            options.excluded = [...(options.excluded || []), 'transparent_grayscale'];
+        }
         if (this.options.dataAttributes.selectedTab) {
             options.selectedTab = this.options.dataAttributes.selectedTab;
         }
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index dbe54e9132f..d39934cf052 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -45,6 +45,7 @@ const ColorPaletteWidget = Widget.extend({
      * @param {string[]} [options.excluded=[]] Sections not to display.
      * @param {string[]} [options.excludeSectionOf] Extra section to exclude: the one containing the named color.
      * @param {boolean} [options.withCombinations=false] Enable color combinations selection.
+     * @param {float} [options.noTransparency=false] Specify a default opacity (predefined gradients & color).
      * @param {float} [options.opacity=1] Specify a default opacity (predefined gradients & color).
      * @param {string} [options.selectedTab='theme-colors'] Tab initially selected.
      * @param {boolean} [options.withGradients=false] Enable gradient selection.
@@ -60,6 +61,7 @@ const ColorPaletteWidget = Widget.extend({
             excludeSectionOf: null,
             $editable: $(),
             withCombinations: false,
+            noTransparency: false,
             opacity: 1,
             selectedTab: 'theme-colors',
             withGradients: false,
@@ -294,6 +296,7 @@ const ColorPaletteWidget = Widget.extend({
             }
             this.colorPicker = new ColorpickerWidget(this, {
                 defaultColor: defaultColor,
+                noTransparency: !!this.options.noTransparency,
             });
             await this.colorPicker.appendTo(this.sections['custom-colors']);
         }