[IMP] website: introduce "auto" widget for theme modal
The theme customize dialog implements its own system of widgets. For example: data-widget="color" and data-widget="input". Now, a new type of widget data-widget="auto" exists. The goal is the same as the data-widget="input" but with a predefined value that the user cannot choose. Also, as "data-value" was badly chosen during its implementation, it is now renamed to "data-variable" and "data-value" is now used with the new widget. Example of the new widget "auto": <opt data-widget="auto" data-variable="logo-height" data-value="3rem" string="Logo Height"/> -> Allows to create a button forcing the logo height to 3rem. Part of https://github.com/odoo/odoo/pull/33442 task-1974659
This commit is contained in:
Andrea Ulliana
@@ -325,17 +325,25 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
var xmlid = $item.data('xmlid');
|
||||
|
||||
var renderingOptions = _.extend({
|
||||
string: $item.attr('string') || data.names[xmlid.split(',')[0].trim()],
|
||||
string: $item.attr('string') || xmlid && data.names[xmlid.split(',')[0].trim()],
|
||||
icon: $item.data('icon'),
|
||||
font: $item.data('font'),
|
||||
}, $item.data());
|
||||
|
||||
var checked;
|
||||
if (widgetName === 'auto') {
|
||||
var propValue = self.style.getPropertyValue('--' + $item.data('variable')).trim();
|
||||
checked = (propValue === $item.attr('data-value'));
|
||||
} else {
|
||||
checked = (xmlid === undefined || xmlid && !_.difference(self._getXMLIDs($item), data.enabled).length);
|
||||
}
|
||||
|
||||
// Build the options template
|
||||
$element = $(core.qweb.render('website.theme_customize_modal_option', _.extend({
|
||||
alone: alone,
|
||||
name: xmlid === undefined ? _.uniqueId('option-') : optionsName,
|
||||
name: xmlid === undefined && widgetName !== 'auto' ? _.uniqueId('option-') : optionsName,
|
||||
id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
|
||||
checked: xmlid === undefined || xmlid && (!_.difference(self._getXMLIDs($item), data.enabled).length),
|
||||
checked: checked,
|
||||
widget: widgetName,
|
||||
}, renderingOptions)));
|
||||
$element.find('input')
|
||||
@@ -508,6 +516,16 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
return self._quickEdit($(inputData));
|
||||
}));
|
||||
|
||||
// Handle auto changes
|
||||
var $autoWidgetOptions = $options.has('.o_theme_customize_auto');
|
||||
if ($autoWidgetOptions.length > 1) {
|
||||
$autoWidgetOptions = $autoWidgetOptions.has('input:checked');
|
||||
}
|
||||
var $autosData = $autoWidgetOptions.find('.o_theme_customize_auto');
|
||||
defs = defs.concat(_.map($autosData, function (autoData) {
|
||||
return self._setAuto($(autoData));
|
||||
}));
|
||||
|
||||
return Promise.all(defs);
|
||||
},
|
||||
/**
|
||||
@@ -519,7 +537,7 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
var value = parseFloat(text) || '';
|
||||
var unit = text.match(/([^\s\d]+)$/)[1];
|
||||
|
||||
var def = new Promise(function (resolve, reject) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var qEdit = new QuickEdit(self, value, unit);
|
||||
qEdit.on('QuickEdit:save', self, function (ev) {
|
||||
ev.stopPropagation();
|
||||
@@ -531,15 +549,28 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
}
|
||||
|
||||
var values = {};
|
||||
values[$inputData.data('value')] = value;
|
||||
values[$inputData.data('variable')] = value;
|
||||
self._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values)
|
||||
.then(resolve)
|
||||
.guardedCatch(resolve);
|
||||
});
|
||||
qEdit.appendTo($inputData.closest('.o_theme_customize_option'));
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_setAuto: function ($autoData) {
|
||||
var self = this;
|
||||
var values = {};
|
||||
var isChecked = $autoData.siblings('.o_theme_customize_option_input').prop('checked');
|
||||
values[$autoData.data('variable')] = isChecked ? $autoData.data('value') : 'null';
|
||||
|
||||
return def;
|
||||
return new Promise(function (resolve, reject) {
|
||||
self._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values)
|
||||
.then(resolve)
|
||||
.guardedCatch(resolve);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
@@ -665,7 +696,7 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
});
|
||||
_.each(this.$('.o_theme_customize_input'), function (el) {
|
||||
var $el = $(el);
|
||||
var value = self.style.getPropertyValue('--' + $el.data('value')).trim();
|
||||
var value = self.style.getPropertyValue('--' + $el.data('variable')).trim();
|
||||
|
||||
// Convert rem values to px values
|
||||
if (_.str.endsWith(value, 'rem')) {
|
||||
|
||||
@@ -37,11 +37,11 @@
|
||||
<div class="form-row justify-content-between o_options_container"/>
|
||||
</div>
|
||||
<t t-name="website.theme_customize_modal_option">
|
||||
<div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget ? 'o_theme_customize_with_widget' : ''}">
|
||||
<div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget and widget != 'auto' ? 'o_theme_customize_with_widget' : ''}">
|
||||
<img t-if="icon" t-att-src="icon"/>
|
||||
|
||||
<t t-set="label" t-value="font ? '' : string"/>
|
||||
<t t-if="alone and !widget" t-call="website.components.switch"/>
|
||||
<t t-if="alone and (!widget or widget == 'auto')" t-call="website.components.switch"/>
|
||||
<label t-else="">
|
||||
<input t-att-id="id" t-att-name="name" type="radio" t-att-checked="checked ? 'checked' : undefined"/>
|
||||
<span><t t-esc="label"/></span>
|
||||
@@ -59,13 +59,18 @@
|
||||
t-att-data-color-type="colorType"/>
|
||||
</t>
|
||||
<t t-name="website.theme_customize_widget_input">
|
||||
<div t-attf-class="o_theme_customize_input o_theme_customize_input_#{value}"
|
||||
t-att-data-value="value"
|
||||
<div class="o_theme_customize_input"
|
||||
t-att-data-variable="variable"
|
||||
t-att-data-unit="unit">
|
||||
<i class="fa fa-edit"/>
|
||||
<span/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="website.theme_customize_widget_auto">
|
||||
<div class="o_theme_customize_auto"
|
||||
t-att-data-variable="variable"
|
||||
t-att-data-value="value"/>
|
||||
</t>
|
||||
<t t-name="website.theme_customize_active_input">
|
||||
<div class="input-group input-group-sm align-items-center o_theme_customize_active_input">
|
||||
<input type="text" class="form-control" t-att-value="widget.value"/>
|
||||
|
||||
@@ -527,11 +527,11 @@
|
||||
<list string="Main Layout">
|
||||
<checkbox><opt data-xmlid="website.affix_top_menu" data-reload="/"/></checkbox>
|
||||
<checkbox><opt data-xmlid="portal.portal_show_sign_in" data-reload="/"/></checkbox>
|
||||
<opt data-widget="input" data-unit="rem" data-value="header-font-size" string="Font Size"/>
|
||||
<opt data-widget="input" data-unit="rem" data-variable="header-font-size" string="Font Size"/>
|
||||
</list>
|
||||
<list string="Logo">
|
||||
<checkbox><opt data-xmlid="website.layout_logo_show" data-reload="/"/></checkbox>
|
||||
<opt data-widget="input" data-unit="rem" data-value="logo-height" string="Logo Height"/>
|
||||
<opt data-widget="input" data-unit="rem" data-variable="logo-height" string="Logo Height"/>
|
||||
</list>
|
||||
</content>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user