initial commit 2

2 files changed, 640 insertions, 0 deletions

diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
new file mode 100644
index 00000000..3d87ba2d
--- /dev/null
+++ b/addons/web_editor/views/editor.xml
@@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="wysiwyg_iframe_editor_assets" name="Editor assets for wysiwyg iframe content" groups="base.group_user">
+    <t t-call-assets="web.assets_common"/>
+    <t t-call-assets="web.assets_frontend" t-js="false"/>
+    <t t-call-assets="web_editor.assets_wysiwyg"/>
+</template>
+
+<template id="compiled_assets_wysiwyg" name="Wysiwyg Editor" groups="base.group_user,base.group_portal">
+    <t t-call-assets="web_editor.assets_wysiwyg"/>
+</template>
+
+<template id="web_editor.assets_wysiwyg" name="Wysiwyg Editor Assets">
+    <!-- lib -->
+
+    <t t-call-assets="web_editor.assets_summernote"/>
+
+    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/cropperjs/cropper.css"/>
+    <script type="text/javascript" src="/web_editor/static/lib/cropperjs/cropper.js"/>
+    <script type="text/javascript" src="/web_editor/static/lib/jquery-cropper/jquery-cropper.js"/>
+    <script type="text/javascript" src="/web_editor/static/lib/jQuery.transfo.js"/>
+    <script type="text/javascript" src="/web/static/lib/nearest/jquery.nearest.js"/>
+    <script type="text/javascript" src="/web_editor/static/lib/webgl-image-filter/webgl-image-filter.js"/>
+
+    <!-- odoo utils -->
+
+    <t t-call="web._assets_helpers">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
+    </t>
+
+    <!-- integration -->
+
+    <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg.scss"/>
+    <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_iframe.scss"/>
+    <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_snippets.scss"/>
+
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/fonts.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/base.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/editor.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/rte.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/rte.summernote.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/image_processing.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/custom_colors.js"/>
+
+    <!-- widgets & plugins -->
+
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/media.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/dialog.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/alt_dialog.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/color_palette.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/image_crop_widget.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/widgets.js"/>
+
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/snippets.editor.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/snippets.options.js"/>
+
+    <!-- Launcher -->
+    <script type="text/javascript" src="/web_editor/static/lib/jabberwock/jabberwock.js"/>
+    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/jabberwock/jabberwock.css"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg_translate_attributes.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js"/>
+</template>
+
+<template id="assets_summernote" name="Summernote">
+    <script type="text/javascript" src="/web_editor/static/lib/summernote/src/js/enable_summernote.js"/>
+    <script type="text/javascript">
+        (function () {
+            "use strict";
+            odoo.define('jquery', function () {return $;});
+
+            var uniqId = 0;
+            odoo.__define__ = window.define;
+            window.define = function (id) {
+                if (!odoo.__enable_summernote__) return;
+                var args = Array.prototype.slice.call(arguments);
+                var factorie = args.pop();
+                var id = args[0];
+
+                if (id instanceof Array) {
+                    var name = "summernote_factorie_" + (++uniqId);
+                    odoo[name] = factorie;
+
+                    var head = '';
+                    var fn = 'var fn = odoo.'+name+';\ndelete odoo.'+name+';\n';
+                    fn += 'return fn(';
+                    for (var k=0; k&lt;id.length; k++) {
+                        head += 'var a'+(++uniqId)+' = require("'+id[k]+'");\n';
+                        fn += 'a'+uniqId+', ';
+                    }
+                    fn += 'null);';
+
+                    odoo.define(odoo.website_next_define, new Function('require', head + fn));
+                } else {
+                    odoo.define(id, factorie);
+                }
+            };
+        })();
+    </script>
+    <t t-set="summer_js_files" t-value="['core/async', 'core/func', 'core/agent', 'core/list',
+        'core/dom', 'core/key', 'core/range', 'editing/Bullet', 'editing/History', 'editing/Style',
+        'editing/Table', 'editing/Typing', 'module/Editor', 'module/Button', 'module/Clipboard',
+        'module/Codeview', 'module/DragAndDrop', 'module/Fullscreen', 'module/Handle',
+        'module/HelpDialog', 'module/ImageDialog', 'module/LinkDialog', 'module/Popover',
+        'module/Statusbar', 'module/Toolbar', 'Renderer', 'EventHandler', 'defaults', 'summernote']" />
+    <t t-foreach="summer_js_files" t-as="file">
+        <script>odoo.website_next_define = 'summernote/<t t-esc="file" />';</script>
+        <script type="text/javascript" t-attf-src="/web_editor/static/lib/summernote/src/js/{{ file }}.js"></script>
+    </t>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/summernote.js" />
+    <script type="text/javascript">
+        window.define = odoo.__define__;
+        delete odoo.__define__;
+        delete odoo.website_next_define;
+        delete odoo.__enable_summernote__;
+    </script>
+    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/src/css/summernote.css"/>
+</template>
+
+<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.variables.scss"/>
+    </xpath>
+</template>
+
+<template id="_assets_13_0_color_system_support_primary_variables" inherit_id="web_editor._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss"/>
+    </xpath>
+</template>
+
+<template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables">
+    <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/secondary_variables.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_common" inherit_id="web.assets_common" name="Web Editor Common Assets (used in backend interface and website)">
+    <xpath expr="script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js"/>
+        <script type="text/javascript" src="/web_editor/static/src/js/common/ace.js"/>
+        <script type="text/javascript" src="/web_editor/static/src/js/common/utils.js"/>
+        <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/root.js"/>
+    </xpath>
+</template>
+
+<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
+    <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_backend" inherit_id="web.assets_backend" name="Web Editor Backend Assets (used in backend interface)">
+    <xpath expr="link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.backend.scss"/>
+    </xpath>
+    <xpath expr="script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/src/js/frontend/loader.js" />
+        <script type="text/javascript" src="/web_editor/static/src/js/backend/field_html.js" />
+        <script type="text/javascript" src="/web_editor/static/src/js/backend/convert_inline.js" />
+    </xpath>
+</template>
+
+<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
+    <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
+    </xpath>
+</template>
+
+<template id="_assets_frontend_minimal_js" inherit_id="web._assets_frontend_minimal_js">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/src/js/frontend/loader_loading.js"/>
+    </xpath>
+</template>
+
+<template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
+        <link rel="stylesheet" type ="text/scss" href="/web_editor/static/src/scss/web_editor.frontend.scss"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/src/js/frontend/loader.js"/>
+    </xpath>
+</template>
+
+<template id="qunit_suite" inherit_id="web.qunit_suite_tests">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript">
+            odoo.define('web_editor.wysiwyg.root.test', function (require) {
+                'use strict';
+                var WysiwygRoot = require('web_editor.wysiwyg.root');
+                if (WysiwygRoot) {
+                    WysiwygRoot.include({
+                        assetLibs: null // We need to add the asset because tests performed overwrites (Dialog, Unbreakable...)
+                    });
+                }
+            });
+        </script>
+        <t t-call="web_editor.assets_wysiwyg"/>
+
+        <script type="text/javascript" src="/web_editor/static/tests/test_utils.js"/>
+        <script type="text/javascript" src="/web_editor/static/tests/field_html_tests.js"/>
+    </xpath>
+</template>
+
+<template id="assets_edit_html_field" name="Wysiwyg Editor Assets for html field (style-inline)" groups="base.group_user,base.group_portal">
+    <t t-call-assets="web.assets_common" t-js="false"/>
+    <t t-call-assets="web_editor.assets_wysiwyg" t-js="false"/>
+</template>
+
+<!--
+    The web_editor.colorpicker template regroups section of colorpicker menu for website customization
+    (text foreground/background but also snippet background color option).
+    As it is presentend below, the colorpicker tag regroups a set of .o_colorpicker_section with name,
+    icon-class and icon-content as data. These will be used to build the colorpicker dropdowns.
+
+    Redefinition can edit section content, add sections or even remove them. If no section is found when
+    building a colorpicker dropdown, the template content will be used without changes as the colorpicker
+    dropdown content.
+
+    Sections should contain a set of button with a data-color attribute. When selecting such a button to
+    edit style, the "bg-x" class or the "text-x" will be automatically added.
+
+    If a color is no longer used you need to add the d-none class to it and not remove it from this file !!
+    Else you will no longer be able to use them.
+-->
+<template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user">
+    <colorpicker>
+        <div class="o_colorpicker_section" data-name="theme">
+            <button t-foreach="5" t-as="i" t-attf-data-color="o-color-#{i + 1}"></button>
+        </div>
+        <div class="o_colorpicker_section" data-name="common">
+            <button data-color="black"></button>
+            <button data-color="900"></button>
+            <button data-color="800"></button>
+            <button data-color="700" class="d-none"></button>
+            <button data-color="600"></button>
+            <button data-color="500" class="d-none"></button>
+            <button data-color="400"></button>
+            <button data-color="300" class="d-none"></button>
+            <button data-color="200"></button>
+            <button data-color="100"></button>
+            <button data-color="white"></button>
+        </div>
+        <div class="o_colorpicker_section" data-name="transparent_grayscale">
+            <button data-color="black-15"></button>
+            <button data-color="black-25"></button>
+            <button data-color="black-50"></button>
+            <button data-color="black-75"></button>
+            <button data-color="white-25"></button>
+            <button data-color="white-50"></button>
+            <button data-color="white-75"></button>
+            <button data-color="white-85"></button>
+        </div>
+    </colorpicker>
+</template>
+</odoo>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
new file mode 100644
index 00000000..35eea6ce
--- /dev/null
+++ b/addons/web_editor/views/snippets.xml
@@ -0,0 +1,377 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<template id="snippets" groups="base.group_user">
+    <form class="o_we_website_top_actions d-none">
+        <button type="button" class="btn btn-primary" name="save" data-action="save" accesskey="s">Save</button>
+        <button type="button" class="btn btn-secondary" name="cancel" data-action="cancel" accesskey="j">Discard</button>
+        <button type="button" class="btn btn-secondary" name="mobile" data-action="mobile">Mobile preview</button>
+    </form>
+    <div id="snippets_menu">
+        <button type="button" tabindex="1" class="o_we_add_snippet_btn active text-uppercase" accesskey="1">
+            <span>Blocks</span>
+        </button>
+        <t t-set="customize_title">Click in the page to customize</t>
+        <button type="button" tabindex="2" class="o_we_customize_snippet_btn text-uppercase"
+                t-att-data-title="customize_title"
+                disabled="disabled">
+            <span>Style</span>
+        </button>
+    </div>
+
+    <div class="o_snippet_search_filter">
+        <input type="text" class="o_snippet_search_filter_input" placeholder="Search..."/>
+        <i role="button" class="fa fa-times o_snippet_search_filter_reset d-none"/>
+    </div>
+
+    <div id="o_scroll">
+        <div id="snippet_custom" class="o_panel d-none">
+            <div class="o_panel_header">Custom</div>
+            <div id="snippet_custom_body" class="o_panel_body"/>
+        </div>
+        <t id="default_snippets">
+            <div id="snippet_structure" class="o_panel">
+                <div class="o_panel_header">First Panel</div>
+                <div class="o_panel_body">
+                    <t t-snippet="web_editor.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png"/>
+                </div>
+            </div>
+        </t>
+    </div>
+
+    <div id="snippet_options" class="d-none">
+        <t t-call="web_editor.snippet_options"/>
+    </div>
+</template>
+
+<template id="snippet_options_image_optimization_widgets">
+    <div class="o_we_external_warning d-none">
+        <we-title title="Quality options are unavailable for external images. If you want to change this image's quality, please first download it from the original source and upload it in Odoo.">
+            <i class="fa fa-warning" /> External Image
+        </we-title>
+    </div>
+
+    <t t-set="filter_label">Filter</t>
+    <we-select t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label">
+        <we-button data-gl-filter="">None</we-button>
+        <we-button data-gl-filter="blur">Blur</we-button>
+        <we-button data-gl-filter="1977">1977</we-button>
+        <we-button data-gl-filter="aden">Aden</we-button>
+        <we-button data-gl-filter="brannan">Brannan</we-button>
+        <we-button data-gl-filter="earlybird">EarlyBird</we-button>
+        <we-button data-gl-filter="inkwell">Inkwell</we-button>
+        <we-button data-gl-filter="maven">Maven</we-button>
+        <we-button data-gl-filter="toaster">Toaster</we-button>
+        <we-button data-gl-filter="walden">Walden</we-button>
+        <we-button data-gl-filter="valencia">Valencia</we-button>
+        <we-button data-gl-filter="xpro">Xpro</we-button>
+        <we-button data-gl-filter="custom" data-name="custom_glfilter_opt">Custom</we-button>
+    </we-select>
+    <t t-set="color_label">Color</t>
+    <t t-set="saturation_label">Saturation</t>
+    <t t-set="contrast_label">Contrast</t>
+    <t t-set="brightness_label">Brightness</t>
+    <t t-set="sepia_label">Sepia</t>
+    <t t-set="blur_label">Blur</t>
+    <we-row t-att-string="indent and ('  ⌙ %s' % color_label) or ('⌙ %s' % color_label)">
+        <we-select data-filter-property="blend" data-dependencies="custom_glfilter_opt">
+            <we-button data-custom-filter="normal">Normal</we-button>
+            <we-button data-custom-filter="overlay">overlay</we-button>
+            <we-button data-custom-filter="screen">screen</we-button>
+            <we-button data-custom-filter="multiply">multiply</we-button>
+            <we-button data-custom-filter="lighter">add</we-button>
+            <we-button data-custom-filter="exclusion">exclusion</we-button>
+            <we-button data-custom-filter="darken">darken</we-button>
+            <we-button data-custom-filter="lighten">lighten</we-button>
+        </we-select>
+        <we-colorpicker data-dependencies="custom_glfilter_opt" data-custom-filter="" data-filter-property="filterColor" data-excluded="common, theme"/>
+    </we-row>
+    <we-range t-att-string="indent and ('  ⌙ %s' % saturation_label) or ('⌙ %s' % saturation_label)"
+            data-dependencies="custom_glfilter_opt"
+            data-custom-filter=""
+            data-filter-property="saturation"
+            data-min="-100"
+            data-step="10"/>
+    <we-range t-att-string="indent and ('  ⌙ %s' % contrast_label) or ('⌙ %s' % contrast_label)"
+            data-dependencies="custom_glfilter_opt"
+            data-custom-filter=""
+            data-filter-property="contrast"
+            data-min="-100"
+            data-step="10"/>
+    <we-range t-att-string="indent and ('  ⌙ %s' % brightness_label) or ('⌙ %s' % brightness_label)"
+            data-dependencies="custom_glfilter_opt"
+            data-custom-filter=""
+            data-filter-property="brightness"
+            data-min="-100"
+            data-step="10"/>
+    <we-range t-att-string="indent and ('  ⌙ %s' % sepia_label) or ('⌙ %s' % sepia_label)"
+            data-dependencies="custom_glfilter_opt"
+            data-custom-filter=""
+            data-filter-property="sepia"
+            data-step="5"/>
+    <we-range t-att-string="indent and ('  ⌙ %s' % blur_label) or ('⌙ %s' % blur_label)"
+            data-dependencies="custom_glfilter_opt"
+            data-custom-filter=""
+            data-filter-property="blur"
+            data-max="2000"
+            data-step="100"/>
+
+    <t t-set="width_label">Width</t>
+    <we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt"/>
+
+    <t t-set="quality_label">Quality</t>
+    <we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
+
+    <div class="o_we_image_weight d-none"><small/><b/></div>
+</template>
+
+<template id="snippet_options_background_color_widget">
+    <we-colorpicker title="Color"
+                    data-name="bg_color_opt"
+                    data-select-style=""
+                    data-css-property="background-color"
+                    data-color-prefix="bg-"
+                    t-att-data-with-combinations="with_color_combinations and 'true' or None"
+                    t-att-data-css-compatible="css_compatible and 'true' or None"/>
+</template>
+
+<template id="snippet_options_background_options">
+    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
+         t-att-data-selector="selector"
+         t-att-data-exclude="exclude"
+         t-att-data-target="target">
+        <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
+            <t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
+            <t t-if="with_images">
+                <we-button title="Image" class="ml-auto"
+                           data-name="bg_image_toggle_opt"
+                           t-att-data-dependencies="images_dependencies"
+                           data-toggle-bg-image="true"
+                           data-no-preview="true">
+                    <i class="fa fa-fw fa-camera"/>
+                </we-button>
+                <we-button title="Filter"
+                           data-name="bg_filter_toggle_opt"
+                           data-dependencies="bg_image_toggle_opt"
+                           data-toggle-bg-filter="true"
+                           data-no-preview="true">
+                    <i class="fa fa-fw fa-paint-brush"/>
+                </we-button>
+                <we-button title="Shape"
+                           data-toggle-bg-shape="true"
+                           t-att-data-dependencies="images_dependencies"
+                           data-no-preview="true"
+                           data-img="/web_editor/static/src/img/snippets_options/bg_shape.svg"/>
+            </t>
+        </we-row>
+    </div>
+    <t t-if="with_images">
+        <div data-js="BackgroundImage"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string="⌙ Image">
+                <we-imagepicker title="Edit image"
+                                data-background=""
+                                data-name="bg_image_opt"
+                                data-dependencies="bg_image_opt"/>
+            </we-row>
+            <we-colorpicker string="  ⌙ Dynamic color" data-dynamic-color="true" data-name="dynamic_color_opt"/>
+        </div>
+
+        <div data-js="BackgroundPosition"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string=" ⌙ Position"><!-- &emsp; -->
+                <we-select data-no-preview="true">
+                    <we-button data-background-type="cover">Cover</we-button>
+                    <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
+                </we-select>
+                <we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
+                    <i class="fa fa-fw fa-crosshairs"/>
+                </we-button>
+            </we-row>
+            <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
+                <!-- &emsp; -->
+                <we-input string="  ⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
+                <we-input string="  ⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
+            </we-multi>
+        </div>
+
+        <div data-js="BackgroundOptimize"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <t t-call="web_editor.snippet_options_image_optimization_widgets">
+                <t t-set="indent" t-value="True"/>
+            </t>
+        </div>
+
+        <!-- Color filter -->
+        <div data-option-name="colorFilter"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-colorpicker string="⌙ Color filter"
+                            data-select-style="true"
+                            data-css-property="background-color"
+                            data-color-prefix="bg-"
+                            data-apply-to=".o_we_bg_filter"/>
+        </div>
+
+        <div data-js="BackgroundShape" string="Shape"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-select-pager class="o_we_shape_menu" string="⌙ Shape" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
+                <!-- Invisible None button to be used for select's placeholder text -->
+                <we-button data-shape="" data-name="shape_none_opt"/>
+                <we-select-page string="Origins">
+                    <we-button data-shape="web_editor/Origins/01" data-select-label="Origins 01"/>
+                    <we-button data-shape="web_editor/Origins/02" data-select-label="Origins 02"/>
+                    <we-button data-shape="web_editor/Origins/03" data-select-label="Origins 03"/>
+                    <we-button data-shape="web_editor/Origins/04" data-select-label="Origins 04"/>
+                    <we-button data-shape="web_editor/Origins/05" data-select-label="Origins 05"/>
+                    <we-button data-shape="web_editor/Origins/06" data-select-label="Origins 06"/>
+                    <we-button data-shape="web_editor/Origins/07" data-select-label="Origins 07"/>
+                    <we-button data-shape="web_editor/Origins/08" data-select-label="Origins 08"/>
+                    <we-button data-shape="web_editor/Origins/09" data-select-label="Origins 09"/>
+                    <we-button data-shape="web_editor/Origins/10" data-select-label="Origins 10"/>
+                    <we-button data-shape="web_editor/Origins/11" data-select-label="Origins 11"/>
+                    <we-button data-shape="web_editor/Origins/12" data-select-label="Origins 12"/>
+                    <we-button data-shape="web_editor/Origins/13" data-select-label="Origins 13"/>
+                    <we-button data-shape="web_editor/Origins/14" data-select-label="Origins 14"/>
+                    <we-button data-shape="web_editor/Origins/15" data-select-label="Origins 15"/>
+                </we-select-page>
+                <we-select-page string="Blocks &amp; Rainy">
+                    <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
+                    <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
+                    <we-button data-shape="web_editor/Rainy/01" data-select-label="Rainy 01"/>
+                    <we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
+                    <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
+                    <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
+                    <we-button data-shape="web_editor/Blocks/02_001" data-select-label="Blocks 02"/>
+                    <we-button data-shape="web_editor/Blocks/01_001" data-select-label="Blocks 01"/>
+                    <we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
+                    <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
+                    <we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 05"/>
+                    <we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>
+                    <we-button data-shape="web_editor/Rainy/09" data-select-label="Rainy 09"/>
+                </we-select-page>
+                <we-select-page string="Wavy">
+                    <we-button data-shape="web_editor/Wavy/01" data-select-label="Wavy 01"/>
+                    <we-button data-shape="web_editor/Wavy/02" data-select-label="Wavy 02"/>
+                    <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
+                    <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 04"/>
+                    <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 05"/>
+                    <we-button data-shape="web_editor/Wavy/06_001" data-select-label="Wavy 06"/>
+                    <we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 07"/>
+                    <we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 08"/>
+                    <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 09"/>
+                    <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 10"/>
+                    <we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 11"/>
+                    <we-button data-shape="web_editor/Wavy/12" data-select-label="Wavy 12"/>
+                    <we-button data-shape="web_editor/Wavy/13" data-select-label="Wavy 13"/>
+                    <we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 14"/>
+                    <we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 15"/>
+                    <we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 16"/>
+                    <we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 17"/>
+                    <we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 18"/>
+                    <we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 19"/>
+                    <we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 20"/>
+                    <we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 21"/>
+                    <we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 22"/>
+                    <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 23"/>
+                </we-select-page>
+                <we-select-page string="Blobs">
+                    <we-button data-shape="web_editor/Blobs/01" data-select-label="Blobs 01"/>
+                    <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
+                    <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
+                    <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
+                    <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
+                    <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
+                    <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
+                    <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
+                    <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
+                    <we-button data-shape="web_editor/Blobs/10" data-select-label="Blobs 10"/>
+                    <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
+                    <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
+                </we-select-page>
+                <we-select-page string="Bold">
+                    <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
+                    <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
+                    <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
+                    <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
+                    <we-button data-shape="web_editor/Bold/05_001" data-select-label="Bold 05"/>
+                    <we-button data-shape="web_editor/Bold/06_001" data-select-label="Bold 06"/>
+                    <we-button data-shape="web_editor/Bold/07" data-select-label="Bold 07"/>
+                    <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
+                    <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
+                    <we-button data-shape="web_editor/Bold/10_001" data-select-label="Bold 10"/>
+                    <we-button data-shape="web_editor/Bold/11_001" data-select-label="Bold 11"/>
+                    <we-button data-shape="web_editor/Bold/12" data-select-label="Bold 12"/>
+                </we-select-page>
+                <we-select-page string="Airy &amp; Zigs">
+                    <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
+                    <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
+                    <we-button data-shape="web_editor/Airy/03" data-select-label="Airy 03"/>
+                    <we-button data-shape="web_editor/Airy/04" data-select-label="Airy 04"/>
+                    <we-button data-shape="web_editor/Airy/05" data-select-label="Airy 05"/>
+                    <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
+                    <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
+                    <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
+                    <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
+                    <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
+                    <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
+                    <we-button data-shape="web_editor/Airy/12" data-select-label="Airy 12"/>
+                    <we-button data-shape="web_editor/Airy/13" data-select-label="Airy 13"/>
+                    <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
+                    <we-button data-shape="web_editor/Zigs/01" data-select-label="Zigs 01"/>
+                    <we-button data-shape="web_editor/Zigs/02" data-select-label="Zigs 02"/>
+                    <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
+                    <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
+                    <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
+                </we-select-page>
+            </we-select-pager>
+            <we-row string=" ⌙ Flip"><!-- &emsp; -->
+                <we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
+                <we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
+            </we-row>
+            <we-row string=" ⌙ Colors" data-name="colors">
+                <we-colorpicker data-select-style="" data-css-property="background-color" data-color-prefix="bg-" data-apply-to="> .o_we_shape"/>
+            </we-row>
+        </div>
+    </t>
+</template>
+
+<!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
+<template id="snippet_options">
+    <!-- t-field -->
+    <div data-js='many2one'
+         data-selector="[data-oe-many2one-model]:not([data-oe-readonly])"
+         data-no-check="true"/>
+
+    <div data-selector=".s_hr"
+         data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>
+
+    <div data-js="VersionControl"
+         data-selector="[data-snippet]"/>
+
+    <div data-js="ImageOptimize"
+         data-selector="img">
+        <t t-call="web_editor.snippet_options_image_optimization_widgets"/>
+    </div>
+
+    <div data-js="DynamicSvg" data-selector="img">
+        <we-colorpicker string="Dynamic color" data-color="true"/>
+    </div>
+</template>
+
+<!-- default block -->
+<template id="s_hr" name="Separator">
+    <div class="s_hr pt32 pb32">
+        <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>
+    </div>
+</template>
+
+</odoo>