Master snippet options owl role

addons/mass_mailing/__manifest__.py

@@ -158,6 +158,9 @@
             ('include', 'web_editor.assets_snippets_menu'),
             'mass_mailing/static/src/js/snippets.editor.js',
             'mass_mailing/static/src/xml/mass_mailing.editor.xml',
+            'mass_mailing/static/src/js/snippets.options.xml',
+            'mass_mailing/static/src/js/snippets.registry.js',
+            'mass_mailing/static/src/snippets/s_hr/options.xml',
         ],
         'web.assets_frontend': [
             'mass_mailing/static/src/js/tours/**/*',

addons/mass_mailing/static/src/js/mass_mailing_snippets.js

@@ -1,7 +1,9 @@
 /** @odoo-module **/
 
-import options from "@web_editor/js/editor/snippets.options";
+import options from "@web_editor/js/editor/snippets.options.legacy";
 import { loadImage } from "@web_editor/js/editor/image_processing";
+import { BackgroundImage, ImageTools, registerBackgroundOptions } from "@web_editor/js/editor/snippets.options";
+import { updateOption } from "@web_editor/js/editor/snippets.registry";
 const SelectUserValueWidget = options.userValueWidgetsRegistry['we-select'];
 import weUtils from "@web_editor/js/common/utils";
 import {
@@ -11,6 +13,7 @@ import {
     transformFontFamilySelector,
 } from "@mass_mailing/js/mass_mailing_design_constants";
 import { isCSSColor, normalizeCSSColor } from "@web/core/utils/colors";
+import { registerMassMailingOption } from "./snippets.registry";
 
 
 //--------------------------------------------------------------------------
@@ -19,17 +22,32 @@ import { isCSSColor, normalizeCSSColor } from "@web/core/utils/colors";
 
 // Adding compatibility for the outlook compliance of mailings.
 // Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42
-options.registry.MassMailingBackgroundImage = options.registry.BackgroundImage.extend({
-    start: function () {
-        this._super();
+class MassMailingBackgroundImage extends BackgroundImage {
+    /**
+     * @override
+     */
+    willStart() {
+        super.willStart(...arguments);
         const $table_target = this.$target.find('table:first');
         if ($table_target.length) {
             this.$target = $table_target;
         }
     }
+}
+// Allow changing background images in Masonry and Cover
+registerBackgroundOptions("MassMailingBackgroundImage", {
+        selector: ".s_masonry_block .row > div, .s_cover .oe_img_bg",
+        withImages: true,
+        withVideos: false,
+        withShapes: false,
+    },
+    (name) => name === "toggler" && "mass_mailing.snippet_options_background_options"
+);
+updateOption("MassMailingBackgroundImage-bgToggler", {
+    Class: () => MassMailingBackgroundImage,
 });
 
-options.registry.MassMailingImageTools = options.registry.ImageTools.extend({
+class MassMailingImageTools extends ImageTools {
 
     //--------------------------------------------------------------------------
     // Private
@@ -48,13 +66,12 @@ options.registry.MassMailingImageTools = options.registry.ImageTools.extend({
         const colorValue = window.getComputedStyle(tempEl).getPropertyValue("background-color").trim();
         tempEl.parentNode.removeChild(tempEl);
         return normalizeCSSColor(colorValue).replace(/"/g, "'");
-    },
-
+    }
     /**
      * @override
      */
     async computeShape(svgText, img) {
-        const dataURL = await this._super(...arguments);
+        const dataURL = await super.computeShape(...arguments);
         const image = await loadImage(dataURL);
         const canvas = document.createElement("canvas");
         const imgFilename = (img.dataset.originalSrc.split("/").pop()).split(".")[0];
@@ -65,7 +82,16 @@ options.registry.MassMailingImageTools = options.registry.ImageTools.extend({
         canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height);
         return canvas.toDataURL(`image/png`, 1.0);
     }
-});
+    /**
+     * @override
+     */
+    _relocateWeightEl() {}
+}
+registerMassMailingOption("MassMailingImageTools", {
+    Class: MassMailingImageTools,
+    template: "mass_mailing.ImageTools",
+    selector: "img",
+}, { sequence: 49 });
 
 options.userValueWidgetsRegistry['we-fontfamilypicker'] = SelectUserValueWidget.extend({
     /**

addons/mass_mailing/static/src/js/snippets.options.xml

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+
+<!-- Border -->
+<t t-name="mass_mailing.snippet_options_border_line_widgets">
+    <WeRow title="label">
+        <WeInput name="'border_width_opt'"
+                applyTo="apply_to || ''"
+                selectStyle="'0'"
+                cssProperty="'border-' + (direction ? direction + '-' : '') + 'width'"
+                unit="'px'"
+                extraClass="with_bs_class ? 'border' : ''"
+                variable="width_variable || ''"/>
+        <WeSelect dependencies="'border_width_opt'"
+                cssProperty="'border-' + (direction ? direction + '-' : '') + 'style'"
+                applyTo="apply_to || ''"
+                variable="style_variable || ''">
+            <WeButton tooltip.translate="Solid" selectStyle="'solid'"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></WeButton>
+            <WeButton tooltip.translate="Dashed" selectStyle="'dashed'"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></WeButton>
+            <WeButton tooltip.translate="Dotted" selectStyle="'dotted'"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></WeButton>
+            <WeButton tooltip.translate="Double" selectStyle="'double'"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></WeButton>
+        </WeSelect>
+        <WeColorpicker dependencies="'border_width_opt'"
+                        applyTo="apply_to || ''"
+                        selectStyle="'true'"
+                        cssProperty="'border-' + (direction ? direction + '-' : '') + 'color'"
+                        colorPrefix="'border-'"
+                        color="color_variable || ''"/>
+    </WeRow>
+</t>
+
+<t t-name="mass_mailing.snippet_options_border_widgets">
+    <t t-call="mass_mailing.snippet_options_border_line_widgets">
+        <t t-set="label">Border</t>
+        <t t-set="with_bs_class" t-value="true"/>
+    </t>
+    <WeInput title.translate="Round Corners"
+             applyTo="apply_to || ''"
+             dependencies="!so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
+             selectStyle="'0'" cssProperty="'border-radius'"
+             unit="'px'" extraClass="'rounded'"
+             variable="radius_variable || ''"/>
+</t>
+
+<t t-name="mass_mailing.snippet_options_background_options" t-inherit="web_editor.snippet_options_background_options" t-inherit-mode="primary"/>
+
+<!-- =================================================================== -->
+<!-- Modify generic snippet options                                      -->
+<!-- =================================================================== -->
+
+<t t-name="mass_mailing.ImageTools" t-inherit="web_editor.ImageTools" t-inherit-mode="primary">
+    <xpath expr="//t[@t-set='no_animations']" position="attributes">
+        <attribute name="t-value">true</attribute>
+    </xpath>
+
+    <!-- Transform is _very_ badly supported in mail clients -->
+    <xpath expr="//WeButton[@name=&quot;'image_transform_opt'&quot;]" position="replace" />
+</t>
+
+<!-- Image styles -->
+<t t-name="mass_mailing.IconTools">
+    <!-- TODO review to only modify what's really necessary and potentially -->
+    <!-- make the changes in web_editor directly so that website can benefit -->
+    <!-- from it. -->
+    <WeSelect title.translate="Alignment" stateToFirstClass="'true'">
+        <WeButton selectClass="'float-start'" tooltip.translate="Align Left">Left</WeButton>
+        <WeButton selectClass="''" tooltip.translate="Align Center">Center</WeButton>
+        <WeButton selectClass="'float-end'" tooltip.translate="Align Right">Right</WeButton>
+    </WeSelect>
+
+    <t t-call="mass_mailing.snippet_options_border_line_widgets">
+        <t t-set="label">Border</t>
+        <t t-set="with_bs_class" t-value="true"/>
+    </t>
+
+    <WeInput title.translate="Round Corners"
+             selectStyle="'0'" cssProperty="'border-radius'" unit="'px'" extraClass="'rounded'"
+             variable="radius_variable"/>
+
+    <WeRow title.translate="Padding &#x2194;">
+        <WeInput selectStyle="''" unit="'px'" cssProperty="'padding-left'"/>
+        <WeInput selectStyle="''" unit="'px'" cssProperty="'padding-right'"/>
+    </WeRow>
+    <WeRow title.translate="Padding &#x2195;">
+        <WeInput selectStyle="''" unit="'px'" cssProperty="'padding-top'"/>
+        <WeInput selectStyle="''" unit="'px'" cssProperty="'padding-bottom'"/>
+    </WeRow>
+</t>
+
+</templates>

addons/mass_mailing/static/src/js/snippets.registry.js

@@ -0,0 +1,21 @@
+import { registerOption } from "@web_editor/js/editor/snippets.registry";
+
+
+export function registerMassMailingOption(name, def, options) {
+    if (!def.module) {
+        def.module = "mass_mailing";
+    }
+    return registerOption(name, def, options);
+}
+
+registerMassMailingOption("MassMailingIconTools", {
+    template: "mass_mailing.IconTools",
+    selector: "span.fa, i.fa, img",
+    exclude: "[data-oe-type='image'] > img, [data-oe-xpath]",
+});
+
+registerMassMailingOption("MassMailingHrOptions", {
+    template: "mass_mailing.s_hr_options",
+    selector: ".s_hr",
+    target: "hr",
+});

addons/mass_mailing/static/src/snippets/s_hr/options.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+<t t-name="mass_mailing.s_hr_options">
+    <t t-call="mass_mailing.snippet_options_border_line_widgets">
+        <t t-set="label">Border</t>
+        <t t-set="direction" t-value="'top'"/>
+    </t>
+    <WeSelect title.translate="Width">
+        <WeButton selectClass="'w-25'">25%</WeButton>
+        <WeButton selectClass="'w-50'">50%</WeButton>
+        <WeButton selectClass="'w-75'">75%</WeButton>
+        <WeButton selectClass="'w-100'" name="'so_width_100'">100%</WeButton>
+    </WeSelect>
+    <WeButtonGroup title.translate="Alignment" dependencies="'!so_width_100'">
+        <WeButton class="'fa fa-fw fa-align-left'" tooltip.translate="Left" selectClass="'me-auto'"/>
+        <WeButton class="'fa fa-fw fa-align-center'" tooltip.translate="Center" selectClass="'mx-auto'"/>
+        <WeButton class="'fa fa-fw fa-align-right'" tooltip.translate="Right" selectClass="'ms-auto'"/>
+    </WeButtonGroup>
+</t>
+
+</templates>

addons/mass_mailing/static/src/snippets/s_masonry_block/options.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import options from "@web_editor/js/editor/snippets.options";
+import options from "@web_editor/js/editor/snippets.options.legacy";
 
 options.registry.MasonryLayout = options.registry.SelectTemplate.extend({
     /**

addons/mass_mailing/static/src/snippets/s_media_list/options.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import options from "@web_editor/js/editor/snippets.options";
+import options from "@web_editor/js/editor/snippets.options.legacy";
 
 options.registry.MediaItemLayout = options.Class.extend({
 

addons/mass_mailing/static/src/snippets/s_rating/options.js

@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { MediaDialog } from "@web_editor/components/media_dialog/media_dialog";
-import options from "@web_editor/js/editor/snippets.options";
+import options from "@web_editor/js/editor/snippets.options.legacy";
 
 options.registry.Rating = options.Class.extend({
     /**

addons/mass_mailing/static/src/snippets/s_showcase/options.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import options from "@web_editor/js/editor/snippets.options";
+import options from "@web_editor/js/editor/snippets.options.legacy";
 
 options.registry.Showcase = options.Class.extend({
     /**

addons/mass_mailing/views/snippets/s_alert.xml

@@ -35,9 +35,11 @@
                 data-color-prefix="alert-"/>
         </div>
         <div data-selector=".s_mail_alert .s_alert">
-            <t t-call="mass_mailing.snippet_options_border_widgets">
+            <!-- TODO @owl-options: do convert & uncomment this. Just commented
+                in legacy to avoid errors. -->
+            <!-- <t t-call="mass_mailing.snippet_options_border_widgets">
                 <t t-set="so_rounded_no_dependencies" t-value="True"/>
-            </t>
+            </t> -->
         </div>
     </xpath>
 </template>

addons/mass_mailing/views/snippets/s_hr.xml

@@ -10,28 +10,6 @@
     </xpath>
 </template>
 
-<template id="s_hr_options" inherit_id="mass_mailing.snippet_options">
-    <xpath expr="." position="inside">
-        <div data-selector=".s_hr" data-target="hr">
-            <t t-call="mass_mailing.snippet_options_border_line_widgets">
-                <t t-set="label">Border</t>
-                <t t-set="direction" t-value="'top'"/>
-            </t>
-            <we-select string="Width">
-                <we-button data-select-class="w-25">25%</we-button>
-                <we-button data-select-class="w-50">50%</we-button>
-                <we-button data-select-class="w-75">75%</we-button>
-                <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
-            </we-select>
-            <we-button-group string="Alignment" data-dependencies="!so_width_100">
-                <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
-                <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
-                <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
-            </we-button-group>
-        </div>
-    </xpath>
-</template>
-
 <record id="mass_mailing.s_hr_000_scss" model="ir.asset">
     <field name="name">Hr 000 SCSS</field>
     <field name="bundle">web.assets_frontend</field>