[REF] mass_mailing: convert so_block_align option to owl

task-3850413

Author: agau-odoo

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

@@ -12,6 +12,7 @@ import {
     transformFontFamilySelector,
 } from "@mass_mailing/js/mass_mailing_design_constants";
 import { isCSSColor, normalizeCSSColor } from "@web/core/utils/colors";
+import { registerMassMailingOption } from "./snippets.registry";
 
 
 //--------------------------------------------------------------------------
@@ -325,3 +326,8 @@ options.registry.DesignTab = options.Class.extend({
         return [...(this.styleSheet.cssRules || this.styleSheet.rules)].find(rule => rule.selectorText === selectorText);
     },
 });
+
+registerMassMailingOption("mass_mailing_block_align", {
+    template: "mass_mailing.block_align_option",
+    selector: ".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight",
+});

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

@@ -1,6 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 
+<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">

addons/mass_mailing/views/snippets_themes.xml

@@ -340,14 +340,6 @@
         </we-select>
     </div>
 
-    <div id="so_block_align" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
-        <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>
-
     <div data-selector=".o_mail_snippet_general" data-exclude=".o_mail_snippet_general .row > div *">
         <we-button-group string="Height">
             <we-button data-name="minheight_auto_opt" data-select-class="" title="Fit content">Auto</we-button>