pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_sale: fix ribbon modifications not being previewed

Browse Source 
Previously, editing a ribbon in the options panel had no preview inside
of the page until the change was validated. This commit fixes that issue
by making the real ribbon invisible, and making the ribbon dummy
visible. The preview still only affects the current ribbon being edited
until it is validated. Unvalidated changes are discarded when clicking
elsewhere in the page.

task-2339986

closes odoo/odoo#59806

X-original-commit: 922f3b67523e24204f15f38517c3dd207884ba66
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Samuel Degueldre
2020-10-12 17:46:09 +00:00
committed by qsm-odoo
parent e42dcfba36
commit d8117750ce
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_sale/static/src/js/website_sale.editor.js
+19 -1
View File
@@ -380,6 +380,15 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
// Ribbons may have been edited or deleted in another products' option, need to make sure they're up to date
this.rerender = true;
},
/**
* @override
*/
onBlur: function () {
// Since changes will not be saved unless they are validated, reset the
// previewed ribbon onBlur to communicate that to the user
this._resetRibbonDummy();
this._toggleEditingUI(false);
},
//--------------------------------------------------------------------------
// Options
@@ -400,6 +409,11 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
* @see this.selectClass for params
*/
async setRibbon(previewMode, widgetValue, params) {
if (previewMode === 'reset') {
widgetValue = this.prevRibbonId;
} else {
this.prevRibbonId = this.$target[0].dataset.ribbonId;
}
this.$target[0].dataset.ribbonId = widgetValue;
this.trigger_up('set_product_ribbon', {
templateId: this.productTemplateID,
@@ -420,6 +434,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
$(`[data-ribbon-id="${widgetValue}"]`).each((index, product) => delete product.dataset.ribbonId);
}
this._resetRibbonDummy();
this._toggleEditingUI(false);
},
/**
* @see this.selectClass for params
@@ -608,6 +623,8 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
_toggleEditingUI(state) {
this.$el.find('[data-name="ribbon_options"]').toggleClass('d-none', state);
this.$el.find('[data-name="ribbon_customize_opt"]').toggleClass('d-none', !state);
this.$('.o_ribbon:not(.o_wsale_ribbon_dummy)').toggleClass('d-none', state);
this.$ribbon.toggleClass('d-none', !state);
},
/**
* Creates a copy of current ribbon to manipulate for edition/creation.
@@ -618,7 +635,8 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
if (this.$ribbon) {
this.$ribbon.remove();
}
this.$ribbon = this.$('.o_ribbon').clone().addClass('d-none o_wsale_ribbon_dummy').appendTo(this.$target);
const $original = this.$('.o_ribbon');
this.$ribbon = $original.clone().addClass('d-none o_wsale_ribbon_dummy').appendTo($original.parent());
},
//--------------------------------------------------------------------------
addons/website_sale/views/snippets/snippets.xml
+4 -4
View File
@@ -60,7 +60,7 @@
</div>
<we-row data-name="ribbon_options">
<we-select string="Ribbon" data-no-preview="true" class="o_wsale_ribbon_select">
<we-select string="Ribbon" class="o_wsale_ribbon_select">
<we-button data-set-ribbon="" data-name="no_ribbon_opt">None</we-button>
<!-- Ribbons are filled in JS -->
</we-select>
@@ -69,12 +69,12 @@
</we-row>
<div class="d-none" data-name="ribbon_customize_opt">
<we-row string="Ribbon">
<we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/>
<we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy"/>
<we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/>
<we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/>
</we-row>
<we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
<we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
<we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-"/>
<we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color"/>
<we-select string="⌙ Mode">
<we-button data-set-ribbon-mode="ribbon">Slanted</we-button>
<we-button data-set-ribbon-mode="tag">Tag</we-button>