[FIX] website_sale: fix ribbon-editing UI

Previously the ribbon editing UI was missing some indentation symbols
that have been added recently in the rest of the web_editor (⌙), this
commit adds those where needed. This commit also fixes an issue where
both the ribbon editing UI and the ribbon select-menu were visible at
the same time, caused by changes to how the visibility of widgets is
computed.

task-2339986

closes odoo/odoo#59158

X-original-commit: c7e4533757982592be9b0c6dfc37b9b05042b5b9
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Samuel Degueldre
2020-10-05 17:41:36 +00:00
parent 737e9076ba
commit dc8ffd4266
2 changed files with 15 additions and 4 deletions
@@ -531,6 +531,17 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
return this._rerenderXML();
}
},
/**
* @override
*/
updateUIVisibility: async function () {
// Main updateUIVisibility will remove the d-none class because there are visible widgets
// inside of it. TODO: update this once updateUIVisibility can be used to compute visibility
// of arbitrary DOM elements and not just widgets.
const isEditing = this.$el.find('[data-name="ribbon_options"]').hasClass('d-none');
await this._super(...arguments);
this._toggleEditingUI(isEditing);
},
//--------------------------------------------------------------------------
// Private
@@ -79,13 +79,13 @@
<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 Color" 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 Color" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
<we-select string="Mode">
<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-select string="⌙ Mode">
<we-button data-set-ribbon-mode="ribbon">Slanted</we-button>
<we-button data-set-ribbon-mode="tag">Tag</we-button>
</we-select>
<we-select string="Position">
<we-select string="⌙ Position">
<we-button data-set-ribbon-position="left">Left</we-button>
<we-button data-set-ribbon-position="right">Right</we-button>
</we-select>