[FIX] website: restore sub-headings edition toggling

Since [1], the sub-headings edition was not possible anymore in the
'options' tab of the editor panel. This is because the visibility of
rows is now automatic, depending of the visibility of the inner widgets.
The custom code for that row visibility, controlled by the user, was
thus not working anymore.

Note: this fix solves the problem with big hacks. Better code will
handle foldable zones generically.

[1]: https://github.com/odoo/odoo/commit/8d57f21d7df2033f462ead60fcb5abba4546213e

Part of https://github.com/odoo/odoo/pull/55529

closes odoo/odoo#55529

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-08-06 09:46:48 +00:00
parent 6a258db1e9
commit 78ef2ec813
2 changed files with 32 additions and 10 deletions
@@ -941,6 +941,13 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick',
}),
/**
* @constructor
*/
init() {
this._super(...arguments);
this._showCCSubHeadings = {};
},
/**
* @override
*/
@@ -971,6 +978,15 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
async _computeWidgetVisibility(widgetName, params) {
if (params.shUid) {
return !!this._showCCSubHeadings[params.shUid];
}
return this._super(...arguments);
},
/**
* @override
*/
@@ -984,9 +1000,6 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
const titleEl = headingsEl.querySelector('we-title');
titleEl.insertBefore(togglerEl, titleEl.firstChild);
});
uiFragment.querySelectorAll('.o_cc_subheadings_collapse').forEach(subheadingsEl => {
subheadingsEl.classList.add('d-none');
});
return uiFragment;
},
@@ -1056,7 +1069,16 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
const show = togglerEl.classList.contains('fa-caret-down');
togglerEl.classList.toggle('fa-caret-down', !show);
togglerEl.classList.toggle('fa-caret-up', show);
collapseEl.classList.toggle('d-none', !show);
this._showCCSubHeadings[collapseEl.dataset.uid] = show;
// FIXME big hack to rerender the interface (all the foldable code is
// a hack currently anyway, it needs to be generic)
this.trigger_up('snippet_edition_request', {exec: async () => {
return new Promise(resolve => setTimeout(() => {
this.trigger_up('snippet_option_update', {
onSuccess: () => resolve(),
});
}));
}});
},
});
@@ -89,12 +89,12 @@
<we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
<we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
<we-colorpicker string="Headings" class="o_cc_subheadings_toggler" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
<we-row string="Sub-Headings" class="o_cc_subheadings_collapse">
<we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2"/>
<we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3"/>
<we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4"/>
<we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5"/>
<we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
<we-row string="⌙ Sub-Headings" class="o_cc_subheadings_collapse" t-att-data-uid="number">
<we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2" t-att-data-sh-uid="number"/>
<we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3" t-att-data-sh-uid="number"/>
<we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4" t-att-data-sh-uid="number"/>
<we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5" t-att-data-sh-uid="number"/>
<we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6" t-att-data-sh-uid="number"/>
</we-row>
<we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
<we-row string="Main Buttons">