From 3f18d67f9eebfa602ed695165759b3ad55cd2b0c Mon Sep 17 00:00:00 2001 From: Kaushalya Mandaliya Date: Fri, 29 Mar 2019 11:28:44 +0000 Subject: [PATCH] [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) Co-authored-by: qsm-odoo --- addons/website/static/src/js/widgets/theme.js | 81 +++++++++++++------ .../static/src/scss/website.edit_mode.scss | 49 ++++++----- .../website/static/src/xml/website.editor.xml | 5 ++ addons/website/views/website_templates.xml | 68 +++++++++------- 4 files changed, 132 insertions(+), 71 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 = $('
', { - 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 = $('
', {class: 'py-1 px-2 o_theme_customize_option_list'}); - $col = $('
', { - class: _.str.sprintf('col-%s mt-2', $item.data('col') || 6), - 'data-depends': $item.data('depends'), - }).append($('
', {text: $item.attr('string')}), $listContainer); - $container.append($col); - _processItems($item.children(), $listContainer); + $element = $('
', {class: 'py-1 px-2 o_theme_customize_option_list'}); + _processItems($item.children(), $element, false); + break; + + 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); - break; + _processItems($item.children(), $container, false); + return; } + + if ($container.hasClass('form-row')) { + var $col = $('
', { + class: _.str.sprintf('col-%s', $item.data('col') || 6), + }); + + if (item.tagName === 'LIST') { + $col.addClass('mt-2'); + $col.append($('
', {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 = $('
+ +
+ +
string = list's title -> data-col (optional, default 6) = bootstrap column size for the list + : Declares a subset of options showed as a selection (dropdown) + -> data-col (optional, default 6) = bootstrap column size for the option + (ignored for options in a ) + Other elements will be ignored and their children will be processed as if that element was omitted, except that those children will be considered as in a new set of option. That allows to wrap an option in a fake element to @@ -568,37 +572,45 @@ - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + + +