[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

@@ -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">

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;
         }

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']);
         }