[FIX] web_editor: allow to change common BS3/BS4 colors used on snippets

Hardcode some existing colors (but make them hidden in the colorpicker)
so they can be removed from snippets when selecting another color.
Normally, the chosable colors do not contain them, which prevents them
to be removed. For example, normally, the 'alpha' and 'beta' color
(which are the same as primary and secondary) are displayed instead of
their duplicates... but not for all themes.

This commit was mainly about the addition of 'success', 'info',
'warning' and 'danger' colors to the list (as we do not give the
possibility to select them through the editor but they might still be
used by snippets or in old databases). This also solves a bug for
upcoming features in master.

This commit also makes the excluded sections of the colorpicker hidden
instead of removed for the same reason.

In preparation of task-2152191 and others.

closes odoo/odoo#42505

X-original-commit: 222f72386a8a0a28ff450bf8dfa6a1ac8fa48d8e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 23 insertions, 11 deletions

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 a4881e1b139..4f23edc7edd 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
@@ -85,12 +85,13 @@ const ColorPaletteWidget = Widget.extend({
             this.$('.o_colorpicker_reset').removeClass('d-none');
         }
 
-        // Remove excluded palettes
+        // Remove excluded palettes (note: only hide them to still be able
+        // to remove their related colors on the DOM target)
         _.each(this.options.excluded, function (exc) {
-            $wrapper.find('[data-name="' + exc + '"]').remove();
+            $wrapper.find('[data-name="' + exc + '"]').addClass('d-none');
         });
         if (this.options.excludeSectionOf) {
-            $wrapper.find('[data-name]:has([data-color="' + this.options.excludeSectionOf + '"])').remove();
+            $wrapper.find('[data-name]:has([data-color="' + this.options.excludeSectionOf + '"])').addClass('d-none');
         }
 
         // Render common colors
@@ -110,14 +111,7 @@ const ColorPaletteWidget = Widget.extend({
         // Render custom colors
         this._buildCustomColors();
 
-        // TODO refactor in master
-        // The primary and secondary are hardcoded here (but marked as hidden)
-        // so they can be removed from snippets when selecting another color.
-        // Normally, the chosable colors do not contain them, which prevents
-        // them to be removed. Indeed, normally, the 'alpha' and 'beta' colors
-        // (which are the same) are displayed instead... but not for all themes.
-        this.$el.append($('<button/>', {'class': 'd-none', 'data-color': 'primary'}));
-        this.$el.append($('<button/>', {'class': 'd-none', 'data-color': 'secondary'}));
+        this._addCompatibilityColors(['primary', 'secondary', 'success', 'info', 'warning', 'danger']);
 
         // Compute class colors
         this.colorNames = [];
@@ -147,6 +141,24 @@ const ColorPaletteWidget = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Hardcode some existing colors (but make them hidden in the colorpicker)
+     * so they can be removed from snippets when selecting another color.
+     * Normally, the chosable colors do not contain them, which prevents them to
+     * be removed. For example, normally, the 'alpha' and 'beta' color (which
+     * are the same as primary and secondary) are displayed instead of their
+     * duplicates... but not for all themes.
+     *
+     * @private
+     * @param {string[]} colorNames
+     */
+    _addCompatibilityColors: function (colorNames) {
+        for (const colorName of colorNames) {
+            if (!this.$('button[data-color="' + colorName + '"]').length) {
+                this.$el.append($('<button/>', {'class': 'd-none', 'data-color': colorName}));
+            }
+        }
+    },
+    /**
      * @private
      */
     _buildCustomColors: function () {