[REF] website: convert s_alert options to owl

task-3850413

Author: agau-odoo

addons/website/__manifest__.py

@@ -244,6 +244,8 @@
             'website/static/src/js/editor/snippets.options.legacy.js',
             'website/static/src/js/editor/snippets.registry.js',
             'website/static/src/js/editor/options/common/*',
+            'website/static/src/snippets/s_alert/options.js',
+            'website/static/src/snippets/s_alert/options.xml',
             'website/static/src/snippets/s_facebook_page/options.js',
             'website/static/src/snippets/s_facebook_page/options.xml',
             'website/static/src/snippets/s_image/options.js',

addons/website/static/src/js/editor/snippets.options.js

@@ -4573,7 +4573,7 @@ registerWebsiteOption("horizontal_alignment", {
 
 registerWebsiteOption("block_width_option", {
     template: "website.block_width_option",
-    selector: ".s_alert, .s_blockquote, .s_text_highlight",
+    selector: ".s_blockquote, .s_text_highlight",
 });
 
 registerWebsiteOption("vertical_alignment", {

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

@@ -0,0 +1,6 @@
+import { registerWebsiteOption } from "@website/js/editor/snippets.registry";
+
+registerWebsiteOption("Alert", {
+    template: "website.s_alert_options",
+    selector: ".s_alert",
+});

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

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="website.s_alert_options">
+        <WeSelect title.translate="Type" applyTo="'.fa.s_alert_icon'" trigger="'alert_colorpicker_opt'">
+            <WeButton selectClass="'fa-user-circle'" triggerValue="'primary'">Primary</WeButton>
+            <WeButton selectClass="'fa-user-circle-o'" triggerValue="'secondary'">Secondary</WeButton>
+            <WeButton selectClass="'fa-info-circle'" triggerValue="'info'">Info</WeButton>
+            <WeButton selectClass="'fa-check-circle'" triggerValue="'success'">Success</WeButton>
+            <WeButton selectClass="'fa-exclamation-triangle'" triggerValue="'warning'">Warning</WeButton>
+            <WeButton selectClass="'fa-exclamation-circle'" triggerValue="'danger'">Danger</WeButton>
+        </WeSelect>
+
+        <t t-call="website.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="Color"
+                       data-name="alert_colorpicker_opt"
+                       selectStyle="'true'"
+                       cssProperty="'background-color'"
+                       colorPrefix="'alert-'"/>
+    </t>
+
+</templates>

addons/website/views/snippets/s_alert.xml

@@ -10,35 +10,6 @@
     </div>
 </template>
 
-<template id="s_alert_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@id='so_width']" position="before">
-        <div data-selector=".s_alert" data-js="Alert">
-            <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
-                <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
-                <we-button data-select-class="fa-user-circle-o" data-trigger-value="secondary">Secondary</we-button>
-                <we-button data-select-class="fa-info-circle" data-trigger-value="info">Info</we-button>
-                <we-button data-select-class="fa-check-circle" data-trigger-value="success">Success</we-button>
-                <we-button data-select-class="fa-exclamation-triangle" data-trigger-value="warning">Warning</we-button>
-                <we-button data-select-class="fa-exclamation-circle" data-trigger-value="danger">Danger</we-button>
-            </we-select>
-        </div>
-    </xpath>
-    <!-- Keep those options in separate xpath for options order -->
-    <xpath expr="//div[@id='so_width']" position="after">
-        <div data-selector=".s_alert">
-            <we-select string="Size">
-                <we-button data-select-class="s_alert_sm">Small</we-button>
-                <we-button data-select-class="s_alert_md">Medium</we-button>
-                <we-button data-select-class="s_alert_lg">Large</we-button>
-            </we-select>
-            <we-colorpicker string="Color" data-name="alert_colorpicker_opt"
-                data-select-style="true"
-                data-css-property="background-color"
-                data-color-prefix="alert-"/>
-        </div>
-    </xpath>
-</template>
-
 <record id="website.s_alert_000_scss" model="ir.asset">
     <field name="name">Alert 000 SCSS</field>
     <field name="bundle">web.assets_frontend</field>