[IMP] website: improve theme customize dialog

- Make the controller part more readable and more efficient (O(1) ORM
  operations instead of O(n)) and remove deprecated code.

- Add the possibility to have a toggle standalone option. This is
  used as soon as an `<opt/>` is alone in its container (note that now,
  the container can be any tag and will be ignored during rendering).

- If an option has no specified 'string' to attach to it, the name of
  the first view it toggles will be used.

PR https://github.com/odoo/odoo/pull/29624
task-1904244

1 files changed, 9 insertions, 5 deletions

diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 46d5de05c12..293b68a93a6 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -22,9 +22,9 @@
     <!-- Custom checkbox (material-design-like toggle) -->
     <t t-name="website.components.switch">
         <label class="o_switch" t-att-for="id">
-            <input type="checkbox" t-att-id="id"/>
+            <input type="checkbox" t-att-id="id" t-att-checked="checked ? 'checked' : undefined"/>
             <span/>
-            <t t-if="label"><t t-esc="label"/></t>
+            <div t-if="label"><t t-esc="label"/></div>
         </label>
     </t>
 
@@ -39,9 +39,13 @@
     <t t-name="website.theme_customize_modal_option">
         <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''}">
             <img t-if="icon" t-att-src="icon"/>
-            <label t-attf-class="#{widget ? 'd-none' : 'd-flex'} align-items-center justify-content-center text-center">
-                <input t-att-id="id" t-att-name="name" type="radio" class="o_theme_customize_option_input" t-att-data-xmlid="xmlid" t-att-data-enable="enable" t-att-data-disable="disable" t-att-data-reload="reload"/>
-                <span><t t-esc="string"/></span>
+
+            <t t-set="label" t-value="font ? '' : string"/>
+            <t t-set="_classes" t-value="widget ? 'd-none' : 'd-flex'"/>
+            <t t-if="alone and !widget" t-call="website.components.switch"/>
+            <label t-else="" t-attf-class="#{_classes} align-items-center justify-content-center text-center">
+                <input t-att-id="id" t-att-name="name" type="radio" t-att-checked="checked ? 'checked' : undefined"/>
+                <span><t t-esc="label"/></span>
             </label>
         </div>
     </t>