[IMP] website: improve customize dialog UI for font selection

Replace the font selection UI by a dropdown. Make the system generic
so that a dropdown can be used for any set of options.

task-1942241

closes odoo/odoo#32437

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>


Co-authored-by: qsm-odoo <qsm@odoo.com>

1 files changed, 56 insertions, 25 deletions

diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 4f7c9ec7f4d..124e7d8a086 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -293,7 +293,7 @@ var ThemeCustomizeDialog = Dialog.extend({
             var $optionsContainer = $navContent.find('.o_options_container');
 
             // Process content items
-            _processItems($content.children(), $optionsContainer);
+            _processItems($content.children(), $optionsContainer, false);
         });
 
         this.$('[title]').tooltip();
@@ -310,13 +310,13 @@ var ThemeCustomizeDialog = Dialog.extend({
         this._setActive();
         this._updateValues();
 
-        function _processItems($items, $container) {
+        function _processItems($items, $container, isSelectionContainer) {
             var optionsName = _.uniqueId('option-');
             var alone = ($items.length === 1);
 
             _.each($items, function (item) {
                 var $item = $(item);
-                var $col;
+                var $element;
 
                 switch (item.tagName) {
                     case 'OPT':
@@ -331,14 +331,14 @@ var ThemeCustomizeDialog = Dialog.extend({
                         }, $item.data());
 
                         // Build the options template
-                        var $option = $(core.qweb.render('website.theme_customize_modal_option', _.extend({
+                        $element = $(core.qweb.render('website.theme_customize_modal_option', _.extend({
                             alone: alone,
                             name: xmlid === undefined ? _.uniqueId('option-') : optionsName,
                             id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
                             checked: xmlid === undefined || xmlid && (!_.difference(self._getXMLIDs($item), data.enabled).length),
                             widget: widgetName,
                         }, renderingOptions)));
-                        $option.find('input')
+                        $element.find('input')
                             .addClass('o_theme_customize_option_input')
                             .attr({
                                 'data-xmlid': xmlid,
@@ -349,36 +349,48 @@ var ThemeCustomizeDialog = Dialog.extend({
 
                         if (widgetName) {
                             var $widget = $(core.qweb.render('website.theme_customize_widget_' + widgetName, renderingOptions));
-                            $option.find('label').append($widget);
+                            $element.find('label').append($widget);
                         }
 
-                        var $final;
-                        if ($container.hasClass('form-row')) {
-                            $final = $('<div/>', {
-                                class: _.str.sprintf('col-%s', $item.data('col') || 6),
-                            });
-                            $final.append($option);
-                        } else {
-                            $final = $option;
+                        if (isSelectionContainer) {
+                            $element.removeClass("my-1 flex-grow-0").addClass("dropdown-item p-0");
+                            $element.find('label')
+                                .addClass('justify-content-start')
+                                .attr('data-font-id', $item.data('font'));
                         }
-                        $final.attr('data-depends', $item.data('depends'));
-                        $container.append($final);
                         break;
 
                     case 'LIST':
-                        var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
-                        $col = $('<div/>', {
-                            class: _.str.sprintf('col-%s mt-2', $item.data('col') || 6),
-                            'data-depends': $item.data('depends'),
-                        }).append($('<h6/>', {text: $item.attr('string')}), $listContainer);
-                        $container.append($col);
-                        _processItems($item.children(), $listContainer);
+                        $element = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
+                        _processItems($item.children(), $element, false);
                         break;
 
-                    default:
-                        _processItems($item.children(), $container);
+                    case 'SELECTION':
+                        $element = $(core.qweb.render('website.theme_customize_dropdown_option'));
+                        _processItems($item.children(), $element.find('.o_theme_customize_selection'), true);
                         break;
+
+                    default:
+                        _processItems($item.children(), $container, false);
+                        return;
                 }
+
+                if ($container.hasClass('form-row')) {
+                    var $col = $('<div/>', {
+                        class: _.str.sprintf('col-%s', $item.data('col') || 6),
+                    });
+
+                    if (item.tagName === 'LIST') {
+                        $col.addClass('mt-2');
+                        $col.append($('<h6/>', {text: $item.attr('string')}));
+                    }
+
+                    $col.append($element);
+                    $element = $col;
+                }
+
+                $element.attr('data-depends', $item.data('depends'));
+                $container.append($element);
             });
         }
     },
@@ -668,6 +680,25 @@ var ThemeCustomizeDialog = Dialog.extend({
                     $span.text(value);
             }
         });
+        _.each(this.$('.o_theme_customize_dropdown'), function (dropdown) {
+            var $dropdown = $(dropdown);
+            $dropdown.find('.dropdown-item.active').removeClass('active');
+            var $checked = $dropdown.find('label.checked');
+            $checked.closest('.dropdown-item').addClass('active');
+
+            var classes = 'btn btn-light dropdown-toggle w-100 o_theme_customize_dropdown_btn';
+            if ($checked.data('font-id')) {
+                classes += _.str.sprintf(' o_theme_customize_option_font_%s', $checked.data('font-id'));
+            }
+            var $btn = $('<button/>', {
+                type: 'button',
+                class: classes,
+                'data-toggle': 'dropdown',
+                html: $dropdown.find('label.checked > span').text() || '&#8203;',
+            });
+            $dropdown.find('.o_theme_customize_dropdown_btn').remove();
+            $dropdown.prepend($btn);
+        });
     },
 
     //--------------------------------------------------------------------------