[IMP] web_editor: simplify button color choices

Now only suggest bootstrap classes for buttons: link/primary/secondary.
Also review the link dialog to show only the options which are
meaningful to the chosen type.

Note: it will still be possible to change from an old color to primary
or secondary).

Part of https://github.com/odoo/odoo/pull/52220
task-2197038

3 files changed, 63 insertions, 72 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
index 9fb3748fa8e..cd0b2429a3e 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
@@ -19,6 +19,7 @@ var LinkDialog = Dialog.extend({
     ]),
     events: _.extend({}, Dialog.prototype.events || {}, {
         'input': '_onAnyChange',
+        'change [name="link_style_color"]': '_onTypeChange',
         'change': '_onAnyChange',
         'input input[name="url"]': '_onURLInput',
     }),
@@ -27,20 +28,28 @@ var LinkDialog = Dialog.extend({
      * @constructor
      */
     init: function (parent, options, editable, linkInfo) {
-        var self = this;
         this.options = options || {};
-
         this._super(parent, _.extend({
             title: _t("Link to"),
         }, this.options));
 
         this.trigger_up('getRecordInfo', {
             recordInfo: this.options,
-            callback: function (recordInfo) {
-                _.defaults(self.options, recordInfo);
+            callback: recordInfo => {
+                _.defaults(this.options, recordInfo);
             },
         });
 
+        this.colorsData = [
+            {type: '', label: _t("Link"), btnPreview: 'link'},
+            {type: 'primary', label: _t("Primary"), btnPreview: 'primary'},
+            {type: 'secondary', label: _t("Secondary"), btnPreview: 'secondary'},
+            // Note: by compatibility the dialog should be able to remove old
+            // colors that were suggested like the BS status colors or the
+            // alpha -> epsilon classes. This is currently done by removing
+            // all btn-* classes anyway.
+        ];
+
         this.editable = editable;
         this.data = linkInfo || {};
 
@@ -142,6 +151,8 @@ var LinkDialog = Dialog.extend({
     start: function () {
         var self = this;
 
+        this.buttonOptsCollapseEl = this.el.querySelector('#o_link_dialog_button_opts_collapse');
+
         this.$('input.link-style').prop('checked', false).first().prop('checked', true);
         if (this.data.iniClassName) {
             this.$('input[name="link_style_color"], select[name="link_style_size"] > option, select[name="link_style_shape"] > option').each(function () {
@@ -163,21 +174,7 @@ var LinkDialog = Dialog.extend({
             this._onURLInput();
         }
 
-        // Hide the duplicate color buttons (most of the times, primary = alpha
-        // and secondary = beta for example but this may depend on the theme)
-        this.opened().then(function () {
-            var colors = [];
-            _.each(self.$('.o_link_dialog_color .o_btn_preview'), function (btn) {
-                var $btn = $(btn);
-                var color = $btn.css('background-color');
-                if (_.contains(colors, color)) {
-                    $btn.hide(); // Not remove to be able to edit buttons with those styles
-                } else {
-                    colors.push(color);
-                }
-            });
-        });
-
+        this._updateOptionsUI();
         this._adaptPreview();
 
         this.$('input:visible:first').focus();
@@ -285,6 +282,13 @@ var LinkDialog = Dialog.extend({
             isNewWindow: isNewWindow,
         };
     },
+    /**
+     * @private
+     */
+    _updateOptionsUI: function () {
+        const el = this.el.querySelector('[name="link_style_color"]:checked');
+        $(this.buttonOptsCollapseEl).collapse(el && el.value ? 'show' : 'hide');
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -299,6 +303,12 @@ var LinkDialog = Dialog.extend({
     /**
      * @private
      */
+    _onTypeChange() {
+        this._updateOptionsUI();
+    },
+    /**
+     * @private
+     */
     _onURLInput: function () {
         var $linkUrlInput = this.$('#o_link_dialog_url_input');
         $linkUrlInput.closest('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index fca0e5345ea..f0c0f59e0d5 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -364,26 +364,11 @@ body .modal {
 
     // LINK EDITOR DIALOG COLOR SELECTOR
     .o_link_dialog {
-        .o_link_dialog_color > .o_link_dialog_color_item {
-            position: relative;
-            width: 30px;
-            height: 30px;
-            padding: 0; // Important for themes
-            border: 2px solid rgba(0, 0, 0, 0.25);
-            border-radius: 50%;
-
-            input:checked + i::before {
-                content: "\f00c";
-                @include o-position-absolute($top: 6px, $left: 5px);
-            }
-
-            &.btn-link {
-                padding: 3px 9px;
-
-                > span {
-                    text-decoration: underline;
-                }
-            }
+        input.link-style:checked + span::after {
+            content: "\f00c";
+            display: inline-block;
+            font-family: FontAwesome;
+            margin-left: 2px;
         }
 
         .o_link_dialog_preview {
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 677128fb750..d00d31df9af 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -459,42 +459,38 @@
                     </div>
                 </div>
                 <div class="form-group row">
-                    <label class="col-form-label col-md-3">Size</label>
-                    <div class="col-md-9">
-                        <select name="link_style_size" class="form-control link-style">
-                            <option value="sm">Small</option>
-                            <option value="" selected="selected">Medium</option>
-                            <option value="lg">Large</option>
-                        </select>
+                    <label class="col-form-label col-md-3">Type</label>
+                    <div class="col-md-9 d-flex align-items-center">
+                        <t t-foreach="widget.colorsData" t-as="colorData">
+                            <label role="button" class="m-0 mr-2">
+                                <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="colorData.type"/>
+                                <span t-esc="colorData.label"
+                                        t-attf-class="o_btn_preview btn btn-sm btn-#{colorData.btnPreview} #{colorData.type ? '' : 'px-0'}"/>
+                            </label>
+                        </t>
                     </div>
                 </div>
-                <div class="form-group row">
-                    <label class="col-form-label col-md-3">Style</label>
-                    <div class="col-md-9">
-                        <select name="link_style_shape" class="form-control link-style">
-                            <option value="" selected="selected">Default</option>
-                            <option value="outline">Outline</option>
-                            <option value="rounded-circle">Rounded</option>
-                            <option value="outline,rounded-circle">Outline-Rounded</option>
-                            <option value="flat">Flat</option>
-                        </select>
+                <div id="o_link_dialog_button_opts_collapse" class="collapse">
+                    <div class="form-group row">
+                        <label class="col-form-label col-md-3">Size</label>
+                        <div class="col-md-9">
+                            <select name="link_style_size" class="form-control link-style">
+                                <option value="sm">Small</option>
+                                <option value="" selected="selected">Medium</option>
+                                <option value="lg">Large</option>
+                            </select>
+                        </div>
                     </div>
-                </div>
-                <div class="form-group row">
-                    <label class="col-form-label col-md-3">Color</label>
-                    <div class="col-md-9">
-                        <div class="o_link_dialog_color">
-                            <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color="">
-                                <span>L</span>
-                                <input class="d-none link-style" name="link_style_color" type="radio" value=""/>
-                                <i class="fa"/>
-                            </label>
-                            <t t-foreach="['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'primary', 'secondary', 'success', 'info', 'warning', 'danger']" t-as="color">
-                                <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
-                                    <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
-                                    <i class="fa"/>
-                                </label>
-                            </t>
+                    <div class="form-group row">
+                        <label class="col-form-label col-md-3">Style</label>
+                        <div class="col-md-9">
+                            <select name="link_style_shape" class="form-control link-style">
+                                <option value="" selected="selected">Default</option>
+                                <option value="outline">Outline</option>
+                                <option value="rounded-circle">Rounded</option>
+                                <option value="outline,rounded-circle">Outline-Rounded</option>
+                                <option value="flat">Flat</option>
+                            </select>
                         </div>
                     </div>
                 </div>