[IMP] web_editor, *: add new user value colorpicker widget

* web, mass_mailing, website

Introduced a new sub-widget for snippet options: we-colorpicker. This
allows to retrieve a color value (either a normalized css color or a
theme color name) to be used for a snippet option method.

This commit replaces the old 'colorpicker' snippet option whose behavior
is now simply achieved by defining an xml option using a we-colorpicker
widget in combination with the 'selectStyle' standard method.

This commit also adds the possibility to control the border-color of
elements alongside their border-width. Again, just a we-colorpicker
widget in combination with the 'selectStyle' standard method.

Note: this commit reviewed what the colorpalette palette widget
notifies. This is not a cssColor and a 'isClass' flag to say if it is
a css class or not. The colorpalette always returns a color string which
can be the name of a color like 'alpha'. This is up to the caller to
check if the color string is a css color or not with isCSSColor. In the
case it is not, the related code can read the actual color by reading
the related css variable.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks

1 files changed, 14 insertions, 1 deletions

diff --git a/addons/web/static/src/js/widgets/colorpicker_dialog.js b/addons/web/static/src/js/widgets/colorpicker_dialog.js
index 4f25710db68..6982f9c6349 100644
--- a/addons/web/static/src/js/widgets/colorpicker_dialog.js
+++ b/addons/web/static/src/js/widgets/colorpicker_dialog.js
@@ -15,7 +15,7 @@ var ColorpickerDialog = Dialog.extend({
         'mousedown .o_color_pick_area': '_onMouseDownPicker',
         'mousedown .o_color_slider': '_onMouseDownSlider',
         'mousedown .o_opacity_slider': '_onMouseDownOpacitySlider',
-        'change .o_color_picker_inputs' : '_onChangeInputs',
+        'change .o_color_picker_inputs': '_onChangeInputs',
     }),
 
     /**
@@ -560,6 +560,9 @@ ColorpickerDialog.convertCSSColorToRgba = function (cssColor) {
         };
     }
 
+    // TODO maybe implement a support for receiving css color like 'red' or
+    // 'transparent' (which are now considered non-css color by isCSSColor...)
+
     return false;
 };
 /**
@@ -580,6 +583,16 @@ ColorpickerDialog.normalizeCSSColor = function (cssColor) {
     }
     return ColorpickerDialog.convertRgbaToCSSColor(rgba.red, rgba.green, rgba.blue, rgba.opacity);
 };
+/**
+ * Checks if a given string is a css color.
+ *
+ * @static
+ * @param {string} cssColor
+ * @returns {boolean}
+ */
+ColorpickerDialog.isCSSColor = function (cssColor) {
+    return ColorpickerDialog.convertCSSColorToRgba(cssColor) !== false;
+};
 
 return ColorpickerDialog;
 });