[IMP] website: auto-discover all available fonts in the theme modal

Before this commit, if a theme had more fonts that the default number
(6), it had to override the customize dialog. Now, the number of fonts
to add in the list is found automatically.

To do so, instead of defining a <selection/> tag with 6+ <opt/> tag, we
are now able to define an unique new tag: <fontselection/> which will do
automatically the job.

Part of https://github.com/odoo/odoo/pull/33442
task-1974659
This commit is contained in:
Andrea Ulliana
2019-07-30 10:03:26 +00:00
committed by qsm-odoo
parent 7deceae18c
commit a36e5afbf7
3 changed files with 19 additions and 32 deletions
@@ -378,6 +378,20 @@ var ThemeCustomizeDialog = Dialog.extend({
_processItems($item.children(), $element.find('.o_theme_customize_selection'), true);
break;
case 'FONTSELECTION':
var $options = $();
_.times(parseInt(self.style.getPropertyValue('--number-of-fonts')), function (font) {
$options = $options.add($('<opt/>', {
'data-widget': 'auto',
'data-variable': $item.data('variable'),
'data-value': font + 1,
'data-font': font + 1,
}));
});
$element = $(core.qweb.render('website.theme_customize_dropdown_option'));
_processItems($options, $element.find('.o_theme_customize_selection'), true);
break;
default:
_processItems($item.children(), $container, false);
return;
@@ -55,6 +55,7 @@ $-font-numbers: (
--h6: #{$-h6-color};
--logo-height: #{$o-theme-navbar-logo-height};
--number-of-fonts: #{length($o-theme-fonts)};
}
#wrapwrap {
+4 -32
View File
@@ -551,44 +551,16 @@
<!-- Font options -->
<content id="theme_customize_content_fonts" string="Fonts" title="Choose your fonts">
<list string="Title">
<selection id="theme_customize_content_fonts_title">
<opt data-widget="auto" data-variable="headings-font-number" data-value="1" data-font="1"/>
<opt data-widget="auto" data-variable="headings-font-number" data-value="2" data-font="2"/>
<opt data-widget="auto" data-variable="headings-font-number" data-value="3" data-font="3"/>
<opt data-widget="auto" data-variable="headings-font-number" data-value="4" data-font="4"/>
<opt data-widget="auto" data-variable="headings-font-number" data-value="5" data-font="5"/>
<opt data-widget="auto" data-variable="headings-font-number" data-value="6" data-font="6"/>
</selection>
<fontselection data-variable="headings-font-number"/>
</list>
<list string="Body">
<selection id="theme_customize_content_fonts_body">
<opt data-widget="auto" data-variable="font-number" data-value="1" data-font="1"/>
<opt data-widget="auto" data-variable="font-number" data-value="2" data-font="2"/>
<opt data-widget="auto" data-variable="font-number" data-value="3" data-font="3"/>
<opt data-widget="auto" data-variable="font-number" data-value="4" data-font="4"/>
<opt data-widget="auto" data-variable="font-number" data-value="5" data-font="5"/>
<opt data-widget="auto" data-variable="font-number" data-value="6" data-font="6"/>
</selection>
<fontselection data-variable="font-number"/>
</list>
<list string="Button">
<selection id="theme_customize_content_fonts_button">
<opt data-widget="auto" data-variable="buttons-font-number" data-value="1" data-font="1"/>
<opt data-widget="auto" data-variable="buttons-font-number" data-value="2" data-font="2"/>
<opt data-widget="auto" data-variable="buttons-font-number" data-value="3" data-font="3"/>
<opt data-widget="auto" data-variable="buttons-font-number" data-value="4" data-font="4"/>
<opt data-widget="auto" data-variable="buttons-font-number" data-value="5" data-font="5"/>
<opt data-widget="auto" data-variable="buttons-font-number" data-value="6" data-font="6"/>
</selection>
<fontselection data-variable="buttons-font-number"/>
</list>
<list string="Navbar">
<selection id="theme_customize_content_fonts_navbar">
<opt data-widget="auto" data-variable="navbar-font-number" data-value="1" data-font="1"/>
<opt data-widget="auto" data-variable="navbar-font-number" data-value="2" data-font="2"/>
<opt data-widget="auto" data-variable="navbar-font-number" data-value="3" data-font="3"/>
<opt data-widget="auto" data-variable="navbar-font-number" data-value="4" data-font="4"/>
<opt data-widget="auto" data-variable="navbar-font-number" data-value="5" data-font="5"/>
<opt data-widget="auto" data-variable="navbar-font-number" data-value="6" data-font="6"/>
</selection>
<fontselection data-variable="navbar-font-number"/>
</list>
</content>
</div>