[IMP] website: allow adding fonts from Google Fonts
It is now possible to add very easily a font from Google Fonts under Customize Theme > Fonts > Add Google Font. Part of https://github.com/odoo/odoo/pull/33442 task-1974659 Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Andrea Ulliana
committed by
qsm-odoo
qsm-odoo
co-authored by
qsm-odoo
qsm-odoo
parent
a36e5afbf7
commit
8e231c047d
@@ -114,6 +114,8 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
events: {
|
||||
'change .o_theme_customize_option_input': '_onChange',
|
||||
'click .checked .o_theme_customize_option_input[type="radio"]': '_onChange',
|
||||
'click .o_theme_customize_add_google_font': '_onAddGoogleFontClick',
|
||||
'click .o_theme_customize_delete_google_font': '_onDeleteGoogleFontClick',
|
||||
},
|
||||
|
||||
CUSTOM_BODY_IMAGE_XML_ID: 'option_custom_body_image',
|
||||
@@ -129,6 +131,7 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
}, options));
|
||||
|
||||
this.defaultTab = options.tab || 0;
|
||||
this.fontVariables = [];
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
@@ -159,6 +162,9 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
this.$modal.addClass('o_theme_customize_modal');
|
||||
|
||||
this.style = window.getComputedStyle(document.documentElement);
|
||||
this.nbFonts = parseInt(this.style.getPropertyValue('--number-of-fonts'));
|
||||
var googleFontsProperty = this.style.getPropertyValue('--google-fonts').trim();
|
||||
this.googleFonts = googleFontsProperty ? googleFontsProperty.split(/\s*,\s*/g) : [];
|
||||
|
||||
var $tabs;
|
||||
var loadDef = this._loadViews().then(function (data) {
|
||||
@@ -380,16 +386,31 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
|
||||
case 'FONTSELECTION':
|
||||
var $options = $();
|
||||
_.times(parseInt(self.style.getPropertyValue('--number-of-fonts')), function (font) {
|
||||
var variable = $item.data('variable');
|
||||
self.fontVariables.push(variable);
|
||||
_.times(self.nbFonts, function (font) {
|
||||
$options = $options.add($('<opt/>', {
|
||||
'data-widget': 'auto',
|
||||
'data-variable': $item.data('variable'),
|
||||
'data-variable': 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);
|
||||
var $selection = $element.find('.o_theme_customize_selection');
|
||||
_processItems($options, $selection, true);
|
||||
|
||||
if (self.googleFonts.length) {
|
||||
var $googleFontItems = $selection.children().slice(-self.googleFonts.length);
|
||||
_.each($googleFontItems, function (el, index) {
|
||||
$(el).append(core.qweb.render('website.theme_customize_delete_font', {
|
||||
'index': index,
|
||||
}));
|
||||
});
|
||||
}
|
||||
$selection.append($(core.qweb.render('website.theme_customize_add_google_font_option', {
|
||||
'variable': variable,
|
||||
})));
|
||||
break;
|
||||
|
||||
default:
|
||||
@@ -450,6 +471,24 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
});
|
||||
return xmlIDs;
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
* @param {object} [values]
|
||||
* When a new set of google fonts are saved, other variables
|
||||
* potentially have to be adapted.
|
||||
*/
|
||||
_makeGoogleFontsCusto: function (values) {
|
||||
values = values ? _.clone(values) : {};
|
||||
if (this.googleFonts.length) {
|
||||
values['google-fonts'] = "('" + this.googleFonts.join("', '") + "')";
|
||||
} else {
|
||||
values['google-fonts'] = 'null';
|
||||
}
|
||||
return this._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values).then(function () {
|
||||
window.location.hash = 'theme=true';
|
||||
window.location.reload();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@@ -737,7 +776,7 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
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';
|
||||
var classes = 'btn btn-light dropdown-toggle w-100 o_text_overflow o_theme_customize_dropdown_btn';
|
||||
if ($checked.data('font-id')) {
|
||||
classes += _.str.sprintf(' o_theme_customize_option_font_%s', $checked.data('font-id'));
|
||||
}
|
||||
@@ -811,6 +850,73 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
self.$inputs.prop('disabled', false);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onAddGoogleFontClick: function (ev) {
|
||||
var self = this;
|
||||
var variable = $(ev.currentTarget).data('variable');
|
||||
new Dialog(this, {
|
||||
title: _t("Add a Google Font"),
|
||||
$content: $(core.qweb.render('website.dialog.addGoogleFont')),
|
||||
buttons: [
|
||||
{
|
||||
text: _t("Save"),
|
||||
classes: 'btn-primary',
|
||||
click: function () {
|
||||
var $input = this.$('.o_input_google_font');
|
||||
var m = $input.val().match(/\bfamily=([\w+]+)/);
|
||||
if (!m) {
|
||||
$input.addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
var font = m[1].replace(/\+/g, ' ');
|
||||
self.googleFonts.push(font);
|
||||
var values = {};
|
||||
values[variable] = self.nbFonts + 1;
|
||||
return self._makeGoogleFontsCusto(values);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: _t("Discard"),
|
||||
close: true,
|
||||
},
|
||||
],
|
||||
}).open();
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
* @param {Event} ev
|
||||
*/
|
||||
_onDeleteGoogleFontClick: function (ev) {
|
||||
var self = this;
|
||||
ev.preventDefault();
|
||||
|
||||
var nbBaseFonts = this.nbFonts - this.googleFonts.length;
|
||||
|
||||
// Remove Google font
|
||||
var googleFontIndex = $(ev.currentTarget).data('fontIndex');
|
||||
this.googleFonts.splice(googleFontIndex, 1);
|
||||
|
||||
// Adapt font variable indexes to the removal
|
||||
var values = {};
|
||||
_.each(this.fontVariables, function (variable) {
|
||||
var value = parseInt(self.style.getPropertyValue('--' + variable));
|
||||
var googleFontValue = nbBaseFonts + 1 + googleFontIndex;
|
||||
if (value === googleFontValue) {
|
||||
// If an element is using the google font being removed, reset
|
||||
// it to the first base font.
|
||||
values[variable] = 1;
|
||||
} else if (value > googleFontValue) {
|
||||
// If an element is using a google font whose index is higher
|
||||
// than the one of the font being removed, that index must be
|
||||
// lowered by 1 so that the font is unchanged.
|
||||
values[variable] = value - 1;
|
||||
}
|
||||
});
|
||||
|
||||
return this._makeGoogleFontsCusto(values);
|
||||
},
|
||||
});
|
||||
|
||||
var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
|
||||
@@ -55,6 +55,7 @@ $o-website-values-palettes: (
|
||||
'headings-font-number': 1,
|
||||
'navbar-font-number': 1,
|
||||
'buttons-font-number': 1,
|
||||
'google-fonts': null,
|
||||
),
|
||||
) !default;
|
||||
$o-website-values-palette-number: 1 !default;
|
||||
|
||||
@@ -50,6 +50,14 @@ $o-website-values-palette-number: length($o-website-values-palettes);
|
||||
@return map-get($o-website-values, $key);
|
||||
}
|
||||
|
||||
@if o-website-value('google-fonts') {
|
||||
$o-theme-font-names: join($o-theme-font-names, o-website-value('google-fonts'));
|
||||
@each $font in o-website-value('google-fonts') {
|
||||
$o-theme-fonts: append($o-theme-fonts, (quote($font), sans-serif));
|
||||
$o-theme-font-urls: append($o-theme-font-urls, quote($font) + ':400,400i,700,700i');
|
||||
}
|
||||
}
|
||||
|
||||
$o-theme-navbar-logo-height: o-website-value('logo-height') !default;
|
||||
$o-theme-font: nth($o-theme-fonts, o-website-value('font-number')) !default;
|
||||
$o-theme-headings-font: nth($o-theme-fonts, o-website-value('headings-font-number')) !default;
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
.dropdown-menu {
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.o_theme_customize_option {
|
||||
@@ -195,6 +195,11 @@
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
.o_theme_customize_delete_google_font {
|
||||
@include o-position-absolute(1px, 1px, 1px, auto);
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -48,6 +48,19 @@
|
||||
</label>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="website.theme_customize_delete_font">
|
||||
<t t-set="delete_font_title">Delete this font</t>
|
||||
<button type="button"
|
||||
class="btn btn-link d-flex align-items-center text-danger fa fa-trash-o o_theme_customize_delete_google_font"
|
||||
t-att-aria-label="delete_font_title"
|
||||
t-att-title="delete_font_title"
|
||||
t-att-data-font-index="index"/>
|
||||
</t>
|
||||
<t t-name="website.theme_customize_add_google_font_option">
|
||||
<a class="dropdown-item p-2 o_theme_customize_add_google_font" t-att-data-variable="variable" href="#">
|
||||
<i class="fa fa-plus"/> Add a Google Font
|
||||
</a>
|
||||
</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"/>
|
||||
@@ -108,4 +121,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add a Google Font option dialog -->
|
||||
<div t-name="website.dialog.addGoogleFont">
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-md-3" for="google_font_html">Google Font HTML</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="google_font_html" class="form-control o_input_google_font"
|
||||
placeholder="<link href='https://fonts.googleapis.com/css?family=Bonbon&display=swap' rel='stylesheet'>" style="height: 100px;"/>
|
||||
<span class="float-right text-muted">
|
||||
Select one font on <a target="_blank" href="https://fonts.google.com">fonts.google.com</a> and copy paste the embed code here.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</templates>
|
||||
|
||||
Reference in New Issue
Block a user