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

[FIX] web_editor: use owl idiom for link tools_updateOptionsUI

Browse Source 
There is an undeterministic error while testing the link tools
because `this.linkComponentWrapperRef` is null at the time of calling
`_updateOptionsUI` by the `onWillUpdateProps`.

As using the element for setting the class is not idiomatic in owl,
this commit adapt the code to use `t-att` attribute.

runbot-23346

closes odoo/odoo#132535

X-original-commit: a16c8b8598761808f5cb2a712c6f5808297e48f3
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Nicolas Bayet
2023-08-24 18:37:34 +02:00
parent 484210c5d3
commit f5eca4245f
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+11 -7
View File
@@ -41,6 +41,11 @@ export class LinkTools extends Link {
'background-color': { colorNames: null },
'border-color': { colorNames: null },
};
state = useState({
showLinkSizeRow: true,
showLinkCustomColor: true,
showLinkShapeRow: true,
});
setup() {
super.setup(...arguments);
@@ -264,13 +269,12 @@ export class LinkTools extends Link {
if (el) {
this.colorCombinationClass = el.dataset.value;
// Hide the size option if the link is an unstyled anchor.
for (const rowEl of this.linkComponentWrapperRef.el.querySelectorAll('.link-size-row')) {
rowEl.classList.toggle('d-none', !this.colorCombinationClass);
}
// Show custom colors and shape only for Custom style.
for (const rowEl of this.linkComponentWrapperRef.el.querySelectorAll('.link-custom-color, .link-shape-row')) {
rowEl.classList.toggle('d-none', el.dataset.value !== 'custom');
}
this.state.showLinkSizeRow = Boolean(this.colorCombinationClass);
// // Show custom colors and shape only for Custom style.
this.state.showLinkCustomColor = el.dataset.value === 'custom';
this.state.showLinkShapeRow = el.dataset.value === 'custom';
this.props.onColorCombinationClassChange(this.colorCombinationClass);
this._updateColorpicker('color');
addons/web_editor/static/src/xml/wysiwyg.xml
+5 -5
View File
@@ -151,7 +151,7 @@
</div>
</we-select>
</we-row>
<we-row class="link-custom-color link-custom-color-text">
<we-row class="link-custom-color link-custom-color-text" t-att-class="{'d-none': !state.showLinkCustomColor}">
<we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette o_we_sublevel_2">
<we-title>Text Color</we-title>
<div class="dropdown">
@@ -171,7 +171,7 @@
</div>
</we-select>
</we-row>
<we-row class="link-custom-color link-custom-color-fill">
<we-row class="link-custom-color link-custom-color-fill" t-att-class="{'d-none': !state.showLinkCustomColor}">
<we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette o_we_sublevel_2">
<we-title>Fill Color</we-title>
<div class="dropdown">
@@ -192,7 +192,7 @@
</div>
</we-select>
</we-row>
<we-row class="link-custom-color link-custom-color-border o_we_sublevel_2">
<we-row class="link-custom-color link-custom-color-border o_we_sublevel_2" t-att-class="{'d-none': !state.showLinkCustomColor}">
<we-title>Border</we-title>
<div>
<we-input class="o_we_user_value_widget" title="Border Width">
@@ -235,7 +235,7 @@
</we-select>
</div>
</we-row>
<we-row class="link-size-row">
<we-row class="link-size-row" t-att-class="{'d-none': !state.showLinkSizeRow}">
<we-select class="o_we_user_value_widget o_we_sublevel_2">
<we-title>Size</we-title>
<div>
@@ -261,7 +261,7 @@
</div>
</we-select>
</we-row>
<we-row class="link-shape-row">
<we-row class="link-shape-row" t-att-class="{'d-none': !state.showLinkShapeRow}">
<we-select class="o_we_user_value_widget o_we_sublevel_2">
<we-title>Shape</we-title>
<div>