diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index e7689ad653f..26b584cf736 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -705,6 +705,21 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({ return this._super(...arguments); }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @override + */ + _onButtonClick(ev) { + if (!ev.target.closest('we-title, we-checkbox')) { + // Only consider clicks on the label and the checkbox control itself + return; + } + return this._super(...arguments); + }, }); const BaseSelectionUserValueWidget = UserValueWidget.extend({ diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index ef54977e7da..b7e598c6662 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -671,13 +671,16 @@ body.editor_enable.editor_has_snippets { padding: 0; border: none; background: none; + cursor: default; + > we-title { + cursor: pointer; + } > div { display: flex; min-height: $o-we-sidebar-content-field-height; line-height: $o-we-sidebar-content-field-height; } - we-checkbox { flex: 0 0 auto; display: flex; @@ -686,6 +689,7 @@ body.editor_enable.editor_has_snippets { height: $o-we-sidebar-content-field-toggle-height; background-color: $o-we-sidebar-content-field-toggle-bg; border-radius: 10rem; + cursor: pointer; &::after { content: ""; @@ -697,11 +701,13 @@ body.editor_enable.editor_has_snippets { box-shadow: $o-we-sidebar-content-field-toggle-control-shadow; } } - &.active we-checkbox { background-color: $o-we-sidebar-content-field-toggle-active-bg; justify-content: flex-end; } + &.active, &:hover { + color: $o-we-sidebar-content-field-clickable-color; + } } // Selection (select and button groups) diff --git a/addons/website_form/static/tests/tours/website_form_editor.js b/addons/website_form/static/tests/tours/website_form_editor.js index 9431307688a..a50afdf1e7b 100644 --- a/addons/website_form/static/tests/tours/website_form_editor.js +++ b/addons/website_form/static/tests/tours/website_form_editor.js @@ -43,14 +43,14 @@ odoo.define('website_form_editor.tour', function (require) { testText += '.s_website_form_required'; ret.push({ content: "Mark the field as required", - trigger: 'we-button[data-name="required_opt"]', + trigger: 'we-button[data-name="required_opt"] we-checkbox', }); } if (hidden) { testText += '.s_website_form_field_hidden'; ret.push({ content: "Mark the field as hidden", - trigger: 'we-button[data-name="hidden_opt"]', + trigger: 'we-button[data-name="hidden_opt"] we-checkbox', }); } if (label) { @@ -176,7 +176,7 @@ odoo.define('website_form_editor.tour', function (require) { run: 'text Management Service', }, { content: "Mark the field as not required", - trigger: 'we-button[data-name="required_opt"]', + trigger: 'we-button[data-name="required_opt"] we-checkbox', }, { content: "Check the resulting field", trigger: ".s_website_form_field.s_website_form_custom:not(.s_website_form_required)" +