Master snippet options owl agau

addons/mass_mailing/__manifest__.py

@@ -149,14 +149,19 @@
         ],
         'mass_mailing.assets_wysiwyg': [
             'mass_mailing/static/src/js/mass_mailing_snippets.js',
+            'mass_mailing/static/src/js/snippets.options.xml',
+            'mass_mailing/static/src/snippets/s_alert/options.js',
+            'mass_mailing/static/src/snippets/s_alert/options.xml',
             'mass_mailing/static/src/snippets/s_masonry_block/options.js',
+            'mass_mailing/static/src/snippets/s_masonry_block/options.xml',
             'mass_mailing/static/src/snippets/s_media_list/options.js',
             'mass_mailing/static/src/snippets/s_showcase/options.js',
             'mass_mailing/static/src/snippets/s_rating/options.js'
         ],
         'mass_mailing.assets_snippets_menu': [
             ('include', 'web_editor.assets_snippets_menu'),
             'mass_mailing/static/src/js/snippets.editor.js',
+            'mass_mailing/static/src/js/snippets.registry.js',
             'mass_mailing/static/src/xml/mass_mailing.editor.xml',
         ],
         'web.assets_frontend': [
@@ -171,6 +176,7 @@
             'mass_mailing/static/src/snippets/s_media_list/options.js',
             'mass_mailing/static/src/snippets/s_showcase/options.js',
             'mass_mailing/static/src/snippets/s_rating/options.js',
+            'mass_mailing/static/src/snippets/s_rating/options.xml',
             'mass_mailing/static/tests/mass_mailing_html_tests.js',
         ],
     },

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

@@ -1,7 +1,8 @@
 /** @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 { registerSnippetAdditionSelector } from "@web_editor/js/editor/snippets.registry";
 const SelectUserValueWidget = options.userValueWidgetsRegistry['we-select'];
 import weUtils from "@web_editor/js/common/utils";
 import {
@@ -11,12 +12,15 @@ import {
     transformFontFamilySelector,
 } from "@mass_mailing/js/mass_mailing_design_constants";
 import { isCSSColor, normalizeCSSColor } from "@web/core/utils/colors";
+import { registerMassMailingOption } from "./snippets.registry";
 
 
 //--------------------------------------------------------------------------
 // Options
 //--------------------------------------------------------------------------
 
+registerSnippetAdditionSelector(".o_mail_snippet_general");
+
 // Adding compatibility for the outlook compliance of mailings.
 // Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42
 options.registry.MassMailingBackgroundImage = options.registry.BackgroundImage.extend({
@@ -322,3 +326,13 @@ options.registry.DesignTab = options.Class.extend({
         return [...(this.styleSheet.cssRules || this.styleSheet.rules)].find(rule => rule.selectorText === selectorText);
     },
 });
+
+registerMassMailingOption("mass_mailing_block_width", {
+    template: "mass_mailing.block_width_option",
+    selector: ".s_mail_blockquote, .s_mail_text_highlight",
+});
+
+registerMassMailingOption("mass_mailing_block_align", {
+    template: "mass_mailing.block_align_option",
+    selector: ".s_mail_blockquote, .s_mail_text_highlight",
+});

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

@@ -84,6 +84,15 @@ export class MassMailingSnippetsMenu extends snippetsEditor.SnippetsMenu {
         html.querySelectorAll('img').forEach(img => img.setAttribute("loading", "lazy"));
         return super._computeSnippetTemplates(html);
     }
+    /**
+     * @override
+     */
+    getOptions() {
+        const options = super.getOptions().filter(([, option]) => {
+            return ["mass_mailing", "web_editor"].includes(option.module);
+        });
+        return options;
+    }
     /**
      * @override
      */

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

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+<t t-name="mass_mailing.block_width_option">
+    <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>
+</t>
+
+<t t-name="mass_mailing.block_align_option">
+    <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>
+
+<!-- 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>
+
+</templates>

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

@@ -0,0 +1,8 @@
+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);
+}

addons/mass_mailing/static/src/snippets/s_alert/002.scss

@@ -0,0 +1,36 @@
+.o_mail_snippet_general .s_mail_alert [class^="col-lg"]{
+    padding-left: 0!important;
+    padding-right: 0!important;
+}
+
+.s_mail_alert {
+    .s_alert {
+        border-width: $alert-border-width;
+        border-style: solid;
+        border-radius: $alert-border-radius;
+        p, ul, ol {
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+    .s_alert_sm {
+        padding: $grid-gutter-width/3;
+        font-size: $font-size-sm;
+    }
+    .s_alert_md {
+        padding: $grid-gutter-width/2;
+        font-size: $font-size-base;
+    }
+    .s_alert_lg {
+        padding: $grid-gutter-width;
+        font-size: $font-size-lg;
+    }
+    .s_alert_icon {
+        float: left;
+        margin-right: 10px;
+    }
+    .s_alert_content {
+        overflow: hidden;
+    }
+}

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

@@ -0,0 +1,6 @@
+import { registerMassMailingOption } from "@mass_mailing/js/snippets.registry";
+
+registerMassMailingOption("MassMailingAlert", {
+    template: "mass_mailing.s_alert_options",
+    selector: ".s_mail_alert .s_alert",
+});

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

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="mass_mailing.s_alert_options">
+        <t t-call="mass_mailing.block_width_option"/>
+        <WeSelect title.translate="Size">
+            <WeButton selectClass="'s_alert_sm'">Small</WeButton>
+            <WeButton selectClass="'s_alert_md'">Medium</WeButton>
+            <WeButton selectClass="'s_alert_lg'">Large</WeButton>
+        </WeSelect>
+        <WeColorpicker title.translate="Background Color"
+                        name="'alert_colorpicker_opt'"
+                        selectStyle="'true'"
+                        cssProperty="'background-color'"
+                        colorPrefix="'alert-'"/>
+        <t t-call="mass_mailing.snippet_options_border_widgets">
+            <t t-set="so_rounded_no_dependencies" t-value="True"/>
+        </t>
+        <t t-call="mass_mailing.block_align_option"/>
+    </t>
+
+</templates>

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

@@ -1,14 +1,18 @@
-/** @odoo-module **/
+import { SelectTemplate } from "@web_editor/js/editor/snippets.options";
+import { registerMassMailingOption } from "@mass_mailing/js/snippets.registry";
 
-import options from "@web_editor/js/editor/snippets.options";
-
-options.registry.MasonryLayout = options.registry.SelectTemplate.extend({
-    /**
-     * @constructor
-     */
-    init() {
-        this._super(...arguments);
+export class MasonryLayout extends SelectTemplate {
+    constructor() {
+        super(...arguments);
         this.containerSelector = '> .container, > .container-fluid, > .o_container_small';
         this.selectTemplateWidgetName = 'masonry_template_opt';
-    },
+    }
+}
+
+registerMassMailingOption("MassMailingMasonryLayout", {
+    Class: MasonryLayout,
+    template: "mass_mailing.s_masonry_block_options",
+    selector: ".s_masonry_block",
+}, {
+    sequence: 10,
 });

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

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="mass_mailing.s_masonry_block_options" inherit_id="mass_mailing.snippet_options">
+        <WeSelect title.translate="Template"
+                  name="'masonry_template_opt'"
+                  attributeName="'masonryTemplate'"
+                  attributeDefaultValue="'default'">
+            <WeButton tooltip.translate="Default"
+                      selectTemplate="'mass_mailing.s_masonry_block_default_template'"
+                      selectDataAttribute="'default'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_default.svg'"/>
+            <WeButton tooltip.translate="Default Reversed"
+                      selectTemplate="'mass_mailing.s_masonry_block_reversed_template'"
+                      selectDataAttribute="'default_reversed'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_reversed.svg'"/>
+            <WeButton tooltip.translate="Images"
+                      selectTemplate="'mass_mailing.s_masonry_block_images_template'"
+                      selectDataAttribute="'images'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_images.svg'"/>
+            <WeButton tooltip.translate="Image Text Image"
+                      selectTemplate="'mass_mailing.s_masonry_block_image_texts_image_template'"
+                      selectDataAttribute="'image_text_image'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_image_texts_image.svg'"/>
+            <WeButton tooltip.translate="Mosaic"
+                      selectTemplate="'mass_mailing.s_masonry_block_mosaic_template'"
+                      selectDataAttribute="'mosaic'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_mosaic.svg'"/>
+            <WeButton tooltip.translate="Text Image Text"
+                      selectTemplate="'mass_mailing.s_masonry_block_texts_image_texts_template'"
+                      selectDataAttribute="'text_image_text'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_texts_image_texts.svg'"/>
+            <WeButton tooltip.translate="Alternate Text"
+                      selectTemplate="'mass_mailing.s_masonry_block_alternation_text_template'"
+                      selectDataAttribute="'alternate_text'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_alternate_texts.svg'"/>
+            <WeButton tooltip.translate="Alternate Text Image"
+                      selectTemplate="'mass_mailing.s_masonry_block_alternation_text_image_template'"
+                      selectDataAttribute="'alternate_text_image'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_alternate_text_image.svg'"/>
+            <WeButton tooltip.translate="Alternate Image Text"
+                      selectTemplate="'mass_mailing.s_masonry_block_alternation_image_text_template'"
+                      selectDataAttribute="'alternate_image_text'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_alternate_image_text.svg'"/>
+            <WeButton tooltip.translate="Alternate Text Image Text"
+                      selectTemplate="'mass_mailing.s_masonry_block_alternation_text_image_text_template'"
+                      selectDataAttribute="'alternate_text_image_text'"
+                      img="'/mass_mailing/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg'"/>
+        </WeSelect>
+    </t>
+
+</templates>

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

@@ -1,8 +1,9 @@
-/** @odoo-module **/
+import { SnippetOption } from "@web_editor/js/editor/snippets.options";
 
-import options from "@web_editor/js/editor/snippets.options";
-
-options.registry.MediaItemLayout = options.Class.extend({
+// FIXME: this is unused (no option definition in mass_mailing),
+//  see addons/website/static/src/snippets/s_media_list/options.js
+//  This is never attached to any snippet (no selector).
+export class MediaItemLayout extends SnippetOption {
 
     //--------------------------------------------------------------------------
     // Options
@@ -13,7 +14,7 @@ options.registry.MediaItemLayout = options.Class.extend({
      *
      * @see this.selectClass for parameters
      */
-    layout: function (previewMode, widgetValue, params) {
+    layout(previewMode, widgetValue, params) {
         const $image = this.$target.find('.s_media_list_img_wrapper');
         const $content = this.$target.find('.s_media_list_body');
 
@@ -23,7 +24,7 @@ options.registry.MediaItemLayout = options.Class.extend({
         }
         $image.addClass(`col-lg-${widgetValue}`);
         $content.addClass(`col-lg-${12 - widgetValue}`);
-    },
+    }
 
     //--------------------------------------------------------------------------
     // Private
@@ -32,7 +33,7 @@ options.registry.MediaItemLayout = options.Class.extend({
     /**
      * @override
      */
-    _computeWidgetState(methodName, params) {
+    async _computeWidgetState(methodName, params) {
         switch (methodName) {
             case 'layout': {
                 const $image = this.$target.find('.s_media_list_img_wrapper');
@@ -43,6 +44,6 @@ options.registry.MediaItemLayout = options.Class.extend({
                 }
             }
         }
-        return this._super(...arguments);
-    },
-});
+        return super._computeWidgetState(...arguments);
+    }
+}