[IMP] website, *: make theme custo options act as simple snippet options

* web_editor, theme_bootswatch

Instead of having an entirely dedicated system for theme options in a
third tab of the left panel, those theme options are now simple snippet
options. See the customizeWebsite generic method.

This allows to make any option available in the third tab or on any
meaningful element like the header or the footer. This also allows to
take advantage of all the features of the left panel: dependencies,
visibility update, etc.

Note: same as before, those changes do apply the color/size/layout
immediately on the website, even if not saved. Changing that behavior
is complex and might be the job of another task.

Part of https://github.com/odoo/odoo/pull/41166
task-2088298

1 files changed, 16 insertions, 62 deletions

diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index eb19b27e7af..ab61ac35692 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -28,68 +28,6 @@
         </label>
     </t>
 
-    <div t-name="website.theme_customize_section" t-att-id="id">
-        <h5 class="mt-0"><t t-esc="title"/></h5>
-        <div class="form-row justify-content-between o_options_container"/>
-    </div>
-    <t t-name="website.theme_customize_menu_option">
-        <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget and widget != 'auto' ? 'o_theme_customize_with_widget' : ''}">
-            <img t-if="icon" t-att-src="icon"/>
-
-            <t t-set="label" t-value="font ? '' : string"/>
-            <t t-if="alone and (!widget or widget == 'auto')" t-call="website.components.switch"/>
-            <label t-else="">
-                <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>
-    <t t-name="website.theme_customize_delete_font">
-        <t t-set="delete_font_title">Delete this font</t>
-        <button type="button"
-            class="btn btn-link d-flex align-items-center text-danger fa fa-trash-o o_theme_customize_delete_google_font"
-            t-att-aria-label="delete_font_title"
-            t-att-title="delete_font_title"
-            t-att-data-font-index="index"/>
-    </t>
-    <t t-name="website.theme_customize_add_google_font_option">
-        <a class="dropdown-item p-2 o_theme_customize_add_google_font" t-att-data-variable="variable" href="#">
-            <i class="fa fa-plus"/> Add a Google Font
-        </a>
-    </t>
-    <t t-name="website.theme_customize_dropdown_option">
-        <div t-attf-class="dropdown o_theme_customize_dropdown">
-            <div class="dropdown-menu rounded-0 o_theme_customize_selection" role="menu"/>
-        </div>
-    </t>
-    <t t-name="website.theme_customize_widget_color">
-        <div t-attf-class="o_theme_customize_color o_theme_customize_color_#{color}"
-            t-att-data-color="color"
-            t-att-data-color-type="colorType"/>
-    </t>
-    <t t-name="website.theme_customize_widget_input">
-        <div class="o_theme_customize_input"
-            t-att-data-variable="variable"
-            t-att-data-unit="unit">
-            <i class="fa fa-edit"/>
-            <span/>
-        </div>
-    </t>
-    <t t-name="website.theme_customize_widget_auto">
-        <div class="o_theme_customize_auto"
-            t-att-data-variable="variable"
-            t-att-data-value="value"/>
-    </t>
-    <t t-name="website.theme_customize_active_input">
-        <div class="input-group input-group-sm align-items-center o_theme_customize_active_input">
-            <input type="text" class="form-control" t-att-value="widget.value"/>
-            <div class="input-group-append">
-                <div t-if="widget.unit" class="input-group-text"><t t-esc="widget.unit"/></div>
-                <button type="button" class="btn btn-secondary fa fa-undo" title="Reset"/>
-            </div>
-        </div>
-    </t>
-
     <t t-extend="wysiwyg.widgets.link">
         <t t-jquery="#o_link_dialog_url_input" t-operation="after">
             <small class="form-text text-muted">Hint: Type '/' to search an existing page and '#' to link to an anchor.</small>
@@ -116,6 +54,7 @@
             </div>
         </div>
     </div>
+
     <!-- Add a Google Font option dialog -->
     <div t-name="website.dialog.addGoogleFont">
         <div class="form-group row">
@@ -128,5 +67,20 @@
                 </span>
             </div>
         </div>
+        <p>Adding a font requires a reload of the page. This will save all your changes.</p>
     </div>
+    <t t-name="website.delete_google_font_btn">
+        <t t-set="delete_font_title">Delete this font</t>
+        <i role="button"
+           class="text-danger ml-2 fa fa-trash-o o_we_delete_google_font_btn"
+           t-att-aria-label="delete_font_title"
+           t-att-title="delete_font_title"
+           t-att-data-font-index="index"/>
+    </t>
+    <t t-name="website.add_google_font_btn">
+        <we-button href="#" class="o_we_add_google_font_btn"
+                   t-att-data-variable="variable">
+            Add a Google Font
+        </we-button>
+    </t>
 </templates>