[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>

3 files changed, 92 insertions, 43 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);
+        });
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 00a6d41a261..4fbfad8ced1 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -11,7 +11,6 @@
         width: 96%;
         max-width: 550px;
     }
-
     .modal-header {
         background-color: $o-brand-odoo;
         color: white;
@@ -26,7 +25,6 @@
         color: white;
     }
 
-
     .nav {
         padding: 0;
 
@@ -50,6 +48,12 @@
         }
     }
 
+    .dropdown-menu {
+        position: static !important;
+        transform: none !important;
+        width: 100%;
+    }
+
     .o_theme_customize_option {
         position: relative;
         width: 100%;
@@ -72,8 +76,6 @@
             min-height: 24px;
             margin: 0;
             padding: 8px;
-            border: 2px solid transparent;
-            background-color: $o-brand-lightsecondary;
             text-align: center;
             font-size: 14px;
             line-height: 1;
@@ -86,26 +88,18 @@
                 background-color: rgba(0, 32, 64, 0.03);
             }
 
-            &.checked {
-                border-color: $o-brand-odoo;
-                color: $o-brand-odoo;
-            }
-
             &.o_switch {
                 justify-content: flex-start;
             }
         }
+        &:not(.dropdown-item) label {
+            border: 2px solid transparent;
+            background-color: $o-brand-lightsecondary;
 
-        $i: 1;
-        @each $font in $o-theme-fonts {
-            &.o_theme_customize_option_font_#{$i} {
-                font-family: if($font, $font, $font-family-base);
-
-                > label > span::before {
-                    content: nth($o-theme-font-names, $i);
-                }
+            &.checked {
+                border-color: $o-brand-odoo;
+                color: $o-brand-odoo;
             }
-            $i: $i + 1;
         }
 
         &.o_theme_customize_with_widget {
@@ -182,6 +176,25 @@
     .o_theme_customize_option_list {
         box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
     }
+
+    .o_theme_customize_dropdown_btn {
+        background-color: $o-brand-lightsecondary;
+    }
+
+    $i: 1;
+    @each $font in $o-theme-fonts {
+        .o_theme_customize_option_font_#{$i} {
+            font-family: if($font, $font, $font-family-base);
+
+            &.o_theme_customize_option > label > span,
+            &.dropdown-toggle {
+                &::before {
+                    content: nth($o-theme-font-names, $i);
+                }
+            }
+        }
+        $i: $i + 1;
+    }
 }
 
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 0a7847989de..a4991dda4bc 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -48,6 +48,11 @@
             </label>
         </div>
     </t>
+    <t t-name="website.theme_customize_dropdown_option">
+        <div t-attf-class="dropdown o_theme_customize_dropdown">
+            <div class="dropdown-menu rounded-0 o_theme_customize_selection" role="menu"/>
+        </div>
+    </t>
     <t t-name="website.theme_customize_widget_color">
         <div t-attf-class="o_theme_customize_color o_theme_customize_color_#{color}"
             t-att-data-color="color"