builder font family picker

addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.js

@@ -0,0 +1,81 @@
+import { Component, onMounted, onWillStart, useSubEnv } from "@odoo/owl";
+import { _t } from "@web/core/l10n/translation";
+import { useService } from "@web/core/utils/hooks";
+import {
+    basicContainerBuilderComponentProps,
+    useVisibilityObserver,
+    useApplyVisibility,
+    useSelectableComponent,
+} from "./utils";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { BuilderSelect } from "./builder_select";
+import { BuilderSelectItem } from "./builder_select_item";
+
+export class BuilderFontFamilyPicker extends Component {
+    static template = "html_builder.website.BuilderFontFamilyPicker";
+    static props = {
+        ...basicContainerBuilderComponentProps,
+        id: { type: String, optional: true },
+        valueParamName: String,
+    };
+    static components = {
+        BuilderSelect,
+        BuilderSelectItem,
+    };
+
+    setup() {
+        this.dialog = useService("dialog");
+        this.orm = useService("orm");
+        useVisibilityObserver("content", useApplyVisibility("root"));
+        useSelectableComponent(this.props.id, {
+            /*
+            onItemChange(item) {
+                currentLabel = item.getLabel();
+                updateCurrentLabel();
+            },
+            */
+        });
+        onMounted(() => {});
+        useSubEnv({
+            /*
+            onSelectItem: () => {
+                this.dropdown.close();
+            },
+            */
+        });
+        this.fonts = [];
+        onWillStart(async () => {
+            const fontsData = await this.env.editor.shared.websiteFont.getFontsData();
+            this.fonts = fontsData._fonts;
+        });
+    }
+    getAllClasses() {
+        return "TODO";
+    }
+    forwardProps(fontValue) {
+        const result = Object.assign({}, this.props, {
+            [this.props.valueParamName]: fontValue.fontFamily,
+        });
+        delete result.selectMethod;
+        delete result.valueParamName;
+        return result;
+    }
+    async onAddFontClick() {
+        await this.env.editor.shared.websiteFont.addFont();
+    }
+    async onDeleteFontClick(font) {
+        const save = await new Promise((resolve) => {
+            this.env.services.dialog.add(ConfirmationDialog, {
+                body: _t(
+                    "Deleting a font requires a reload of the page. This will save all your changes and reload the page, are you sure you want to proceed?"
+                ),
+                confirm: () => resolve(true),
+                cancel: () => resolve(false),
+            });
+        });
+        if (!save) {
+            return;
+        }
+        await this.env.editor.shared.websiteFont.deleteFont(font);
+    }
+}

addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.website.BuilderFontFamilyPicker">
+    <BuilderSelect className="getAllClasses()">
+    <!-- TODO Can't t-att on component: t-att="getAllDataAttributes()" -->
+        <t t-foreach="fonts" t-as="font" t-key="font_index">
+            <BuilderSelectItem t-props="forwardProps(font)">
+                <div class="d-flex justify-content-between">
+                    <span t-attf-style="font-family: {{font.fontFamily}};">
+                        <i t-if="font.type === 'cloud'" role="button" class="text-info me-2 fa fa-cloud" title="This font is hosted and served to your visitors by Google servers"></i>
+                        <t t-out="font.string"/>
+                    </span>
+                    <div class="text-end">
+                        <t t-if="font.indexForType >= 0">
+                            <t t-set="delete_font_title">Delete this font</t>
+                            <i role="button"
+                               t-on-click.prevent.stop="() => this.onDeleteFontClick(font)"
+                               class="link-danger fa fa-trash-o o_we_delete_font_btn"
+                               t-att-aria-label="delete_font_title"
+                               t-att-title="delete_font_title"/>
+                        </t>
+                    </div>
+                </div>
+            </BuilderSelectItem>
+        </t>
+        <div class="d-flex flex-column cursor-pointer o-dropdown-item dropdown-item o-navigable o_we_add_font_btn"
+            role="menuitem"
+            tabindex="0"
+            t-on-click.stop="() => this.onAddFontClick()"
+        >
+            Add a Custom Font
+        </div>
+    </BuilderSelect>
+</t>
+
+</templates>

addons/html_builder/static/src/core/building_blocks/builder_select.js

@@ -15,6 +15,7 @@ export class BuilderSelect extends Component {
     static props = {
         ...basicContainerBuilderComponentProps,
         id: { type: String, optional: true },
+        className: { type: String, optional: true },
         slots: Object,
     };
     static components = {

addons/html_builder/static/src/core/building_blocks/builder_select.xml

@@ -6,7 +6,7 @@
         <!-- Render the SelectItem(s) into an invisible node to ensure the label of the
         button is being set. -->
         <div t-ref="root" style="overflow: hidden;">
-            <div class="d-none" t-ref="content"><t t-slot="default" /></div>
+            <div t-att-class="'d-none ' + props.className" t-ref="content"><t t-slot="default" /></div>
             <Dropdown state="this.dropdown">
                 <button class="btn btn-primary" t-ref="button" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" />
                 <t t-set-slot="content">

addons/html_builder/static/src/core/building_blocks/builder_select_item.js

@@ -9,6 +9,7 @@ export class BuilderSelectItem extends Component {
         ...clickableBuilderComponentProps,
         id: { type: String, optional: true },
         title: { type: String, optional: true },
+        className: { type: String, optional: true },
         slots: { type: Object, optional: true },
     };
     static components = { BuilderComponent };

addons/html_builder/static/src/core/default_builder_components.js

@@ -15,6 +15,8 @@ import { BuilderContext } from "./building_blocks/builder_context";
 import { BasicMany2Many } from "./building_blocks/basic_many2many";
 import { BuilderMany2Many } from "./building_blocks/builder_many2many";
 import { BuilderUrlPicker } from "./building_blocks/builder_urlpicker";
+// TODO Font family picker is actually website-specific
+import { BuilderFontFamilyPicker } from "./building_blocks/builder_fontfamilypicker";
 import { ModelMany2Many } from "./building_blocks/model_many2many";
 
 export const defaultBuilderComponents = {
@@ -36,4 +38,5 @@ export const defaultBuilderComponents = {
     ModelMany2Many,
     BuilderDateTimePicker,
     BuilderUrlPicker,
+    BuilderFontFamilyPicker,
 };

addons/html_builder/static/src/sidebar/theme_tab.js

@@ -16,7 +16,9 @@ export class ThemeTab extends Component {
     setup() {
         useOptionsSubEnv(() => [this.env.editor.document.body]);
         this.isActiveItem = useIsActiveItem();
-        this.state = useState({});
+        this.state = useState({
+            fontsData: {},
+        });
         this.optionsContainers = this.env.editor.resources["theme_options"];
     }
 }

addons/html_builder/static/src/sidebar/theme_tab.xml

@@ -82,11 +82,6 @@
                 <BuilderButton title.translate="Pattern" actionValue="'pattern'" className="'fa fa-fw fa-th'"/>
                 <BuilderButton title.translate="None" actionValue="'NONE'" className="'fa fa-fw fa-ban'"/>
             </BuilderButtonGroup>
-            <!-- Hidden imagepicker enabled by above button-group -->
-            <!--
-            <we-imagepicker data-name="body_bg_image_opt"
-                            data-customize-body-bg=""/>
-            -->
         </BuilderRow>
     </BuilderContext>
 </t>
@@ -102,10 +97,7 @@
             </t>
         </BuilderRow>
         <BuilderRow label.translate="Font Family">
-            TODO BuilderFontFamilyPicker
-            <!--
-            <we-fontfamilypicker data-variable="font"/>
-            -->
+            <BuilderFontFamilyPicker action="'customizeWebsiteVariable'" actionParam="'font'" valueParamName="'actionValue'"/>
         </BuilderRow>
         <BuilderRow label.translate="Line Height">
             <!-- "× ": \u00D7\u2000 -->
@@ -139,11 +131,8 @@
                 </t>
             </t>
         </BuilderRow>
-        <BuilderRow label.translate="Font Family" action="'customizeWebsiteVariable'">
-            TODO BuilderFontFamilyPicker
-            <!--
-            <BuilderFontFamilyPicker title.translate="Heading 1" actionParam="'headings-font'"/>
-            -->
+        <BuilderRow label.translate="Font Family" tooltip.translate="Heading 1" action="'customizeWebsiteVariable'">
+            <BuilderFontFamilyPicker actionParam="'headings-font'" valueParamName="'actionValue'"/>
             <BuilderButton className="'fa fa-fw fa-remove o_we_hover_danger o_we_link'"
                 title.translate="Reset to Paragraph Font Family"
                 action="'removeFont'"
@@ -152,10 +141,7 @@
             <t t-set-slot="collapse">
                 <t t-foreach="[2, 3, 4, 5, 6]" t-as="depth" t-key="depth">
                     <BuilderRow level="1" label="heading_label + ' ' + depth">
-                        TODO BuilderFontFamilyPicker
-                        <!--
-                        <BuilderFontFamilyPicker actionParam="'h' + depth + '-font'"/>
-                        -->
+                        <BuilderFontFamilyPicker actionParam="'h' + depth + '-font'" valueParamName="'actionValue'"/>
                         <BuilderButton className="'fa fa-fw fa-remove o_we_hover_danger o_we_link'"
                             title.translate="Reset to Headings Font Family"
                             action="'removeFont'"
@@ -165,10 +151,7 @@
                 </t>
                 <t t-foreach="used_display_font_sizes" t-as="depth" t-key="depth">
                     <BuilderRow level="1" label="display_label + ' ' + depth">
-                        TODO BuilderFontFamilyPicker
-                        <!--
-                        <BuilderFontFamilyPicker actionParam="'display-' + depth + '-font'"/>
-                        -->
+                        <BuilderFontFamilyPicker actionParam="'display-' + depth + '-font'" valueParamName="'actionValue'"/>
                         <BuilderButton className="'fa fa-fw fa-remove o_we_hover_danger o_we_link'"
                             title.translate="Reset to Headings Font Family"
                             action="'removeFont'"
@@ -244,10 +227,7 @@
             <BuilderNumberInput actionParam="'btn-secondary-outline-border-width'" unit="'px'" saveUnit="'rem'"/>
         </BuilderRow>
         <BuilderRow label.translate="Font Family">
-            TODO BuilderFontFamilyPicker
-            <!--
-            <we-fontfamilypicker data-variable="buttons-font"/>
-            -->
+            <BuilderFontFamilyPicker actionParam="'buttons-font'" valueParamName="'actionValue'"/>
             <BuilderButton className="'fa fa-fw fa-remove o_we_hover_danger o_we_link'"
                 title.translate="Reset to Paragraph Font Family"
                 action="'removeFont'"

addons/html_builder/static/src/sidebar/theme_tab_plugin.js

@@ -10,6 +10,7 @@ import { withSequence } from "@html_editor/utils/resource";
 export class ThemeTabPlugin extends Plugin {
     static id = "themeTab";
     static dependencies = ["builderActions", "history", "savePlugin"];
+    static shared = ["makeSCSSCusto"];
     resources = {
         builder_actions: this.getActions(),
         theme_options: [