[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:
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user