[REF] website: convert s_badge_options to OWL

task-3850413

# Conflicts:
#	addons/website/views/snippets/s_badge.xml

Author: robinlej

addons/website/__manifest__.py

@@ -301,6 +301,7 @@
             'website/static/src/snippets/s_website_controller_page_listing_layout/options.xml',
             'website/static/src/snippets/s_website_form/options.js',
             'website/static/src/snippets/s_website_form/options.xml',
+            'website/static/src/snippets/s_badge/options.xml',
             'website/static/src/js/form_editor_registry.js',
             'website/static/src/js/send_mail_form.js',
             'website/static/src/xml/website_form.xml',

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

@@ -15,3 +15,9 @@ registerWebsiteOption("WebsiteIconTools", {
     selector: "span.fa, i.fa",
     exclude: "[data-oe-xpath]",
 });
+
+registerWebsiteOption("BadgeOptions", {
+    template: "website.s_badge_options",
+    selector: ".s_badge",
+});
+

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

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+<t t-name="website.s_badge_options">
+    <WeColorpicker title.translate="Color" name="'badge_colorpicker_opt'"
+        selectStyle="'true'"
+        cssProperty="'background-color'"
+        colorPrefix="'bg-'"/>
+
+    <WeSelect title.translate="Style">
+        <WeButton selectClass="'text-bg-primary'">Primary</WeButton>
+        <WeButton selectClass="'text-bg-secondary'">Secondary</WeButton>
+        <WeButton selectClass="'text-bg-success'">Success</WeButton>
+        <WeButton selectClass="'text-bg-info'">Info</WeButton>
+        <WeButton selectClass="'text-bg-warning'">Warning</WeButton>
+        <WeButton selectClass="'text-bg-danger'">Danger</WeButton>
+        <WeButton selectClass="'text-bg-light'">Light</WeButton>
+        <WeButton selectClass="'text-bg-dark'">Dark</WeButton>
+    </WeSelect>
+</t>
+
+</templates>

addons/website/views/snippets/s_badge.xml

@@ -7,23 +7,6 @@
     </span>
 </template>
 
-<template id="s_badge_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@data-js='Box']" position="before">
-        <div data-selector=".s_badge">
-            <we-select string="Style">
-                <we-button data-select-class="text-bg-primary">Primary</we-button>
-                <we-button data-select-class="text-bg-secondary">Secondary</we-button>
-                <we-button data-select-class="text-bg-success">Success</we-button>
-                <we-button data-select-class="text-bg-info">Info</we-button>
-                <we-button data-select-class="text-bg-warning">Warning</we-button>
-                <we-button data-select-class="text-bg-danger">Danger</we-button>
-                <we-button data-select-class="text-bg-light">Light</we-button>
-                <we-button data-select-class="text-bg-dark">Dark</we-button>
-            </we-select>
-        </div>
-    </xpath>
-</template>
-
 <record id="website.s_badge_000_variables_scss" model="ir.asset">
     <field name="name">Badge 000 variables SCSS</field>
     <field name="bundle">web._assets_primary_variables</field>