initial commit 2

6 files changed, 839 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
new file mode 100644
index 00000000..be9fe53d
--- /dev/null
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+<t t-name="web_editor.ace_view_editor">
+    <div class="o_ace_view_editor">
+        <div class="form-inline o_ace_view_editor_title">
+            <div class="btn-group o_ace_type_switcher">
+                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">XML (HTML)</button>
+                <div class="dropdown-menu" role="menu">
+                    <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="xml">XML (HTML)</a>
+                    <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="scss">SCSS (CSS)</a>
+                    <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="js">JS</a>
+                </div>
+            </div>
+            <select id="ace-view-list" class="o_res_list"/>
+            <select id="ace-scss-list" class="o_res_list d-none"/>
+            <select id="ace-js-list" class="o_res_list d-none"/>
+            <label class="o_include_option oe_include_bundles">
+                <div class="dropdown">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_views" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Filter
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="o_dropdown_filter_views">
+                        <a class="dropdown-item o_ace_filter active" data-type="xml" data-value="default" href="#">Only Views</a>
+                        <a class="dropdown-item o_ace_filter" data-type="xml" data-value="all" href="#">Views and Assets bundles</a>
+                    </div>
+                </div>
+            </label>
+            <label class="o_include_option o_include_all_scss d-none">
+                <div class="dropdown">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_assets" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Filter
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="o_dropdown_filter_assets">
+                        <a class="dropdown-item o_ace_filter active" data-type="scss" data-value="custom" href="#">Only Custom SCSS Files</a>
+                        <a class="dropdown-item o_ace_filter" data-type="scss" data-value="restricted" href="#">Only Page SCSS Files</a>
+                        <a class="dropdown-item o_ace_filter" data-type="scss" data-value="all" href="#">All SCSS Files</a>
+                    </div>
+                </div>
+            </label>
+            <div class="o_button_section">
+                <button data-action="save" type="submit" class="btn btn-primary">Save</button>
+                <button data-action="close" type="button" class="btn btn-secondary">Close</button>
+            </div>
+        </div>
+        <div id="ace-view-id">
+            <div class="float-right mb-2">
+                <button data-action="reset" type="button" class="btn btn-sm btn-danger"><i class="fa fa-undo"/> Reset</button>
+                <button data-action="format" type="button" class="btn btn-sm btn-link">Format</button>
+            </div>
+            <span class="o_ace_editor_resource_info"/>
+            <div class="alert alert-warning alert-dismissible mt-2 mb-0" role="alert">
+                Editing a built-in file through this editor is not advised, as it will prevent it from being updated during future App upgrades.
+                <button type="button" class="close" aria-label="Close">
+                    <span>×</span>
+                </button>
+            </div>
+        </div>
+        <div id="ace-view-editor"/>
+    </div>
+</t>
+
+</templates>
diff --git a/addons/web_editor/static/src/xml/backend.xml b/addons/web_editor/static/src/xml/backend.xml
new file mode 100644
index 00000000..c79ee939
--- /dev/null
+++ b/addons/web_editor/static/src/xml/backend.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web_editor.FieldTextHtml.button.translate">
+        <div class="btn-group float-right">
+            <button t-if="widget.field.translate" class="o_field_translate btn btn-secondary" style="height: 24px; padding: 1px 17px 0px 5px" aria-label="Translate" title="Translate">
+                <span class="fa fa-language fa-lg oe_input_icon"/>
+            </button>
+        </div>
+    </t>
+
+    <t t-name="web_editor.FieldTextHtml.fullscreen">
+        <span style="margin: 5px; position: fixed; top: 0; right: 0; z-index: 2000;">
+            <button class="o_fullscreen btn btn-primary" style="width: 24px; height: 24px; background-color: #337ab7; border: 1px solid #2e6da4; border-radius: 4px; padding: 0; position: relative;">
+                <img src="/web_editor/font_to_img/61541/rgb(255,255,255)/16" style="position: absolute; top: 3px; left: 4px;" alt="Fullscreen"/>
+            </button>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
new file mode 100644
index 00000000..ee766a81
--- /dev/null
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <!--=================-->
+    <!-- Base components -->
+    <!--=================-->
+
+    <!-- Editor top bar which contains the summernote tools and save/discard buttons -->
+    <t t-name="web_editor.editorbar">
+        <div id="web_editor-toolbars"/>
+    </t>
+
+    <!--=================-->
+    <!-- Snippet options -->
+    <!--=================-->
+
+    <!-- Background position option overlay -->
+    <t t-name="web_editor.background_position_overlay">
+        <div class="o_we_background_position_overlay oe_overlay">
+            <div class="o_we_overlay_content position-absolute">
+                <div class="o_overlay_background"/>
+                <div class="o_we_overlay_buttons position-absolute d-flex m-1" style="top: 0">
+                    <button class="btn btn-primary mr-1 o_btn_apply">Apply</button>
+                    <button class="btn btn-danger o_btn_discard">Discard</button>
+                </div>
+            </div>
+        </div>
+    </t>
+    <!-- Save Snippet Name option dialog -->
+    <t t-name="web_editor.dialog.save_snippet">
+        <div>
+            <div class="form-group form-row">
+                <label class="col-form-label col-md-3" for="snippetName">Name</label>
+                <div class="col-md-9">
+                    <input type="text"
+                           class="form-control o_we_snippet_name_input"
+                           id="snippetName"
+                           t-att-value="currentSnippetName"/>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
new file mode 100644
index 00000000..0d833333
--- /dev/null
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="web_editor.snippet_overlay">
+        <div class="oe_overlay">
+            <div class="o_handles">
+                <!-- Visible overlay borders + allow to resize when not readonly -->
+                <div class="o_handle n readonly"/>
+                <div class="o_handle e readonly"/>
+                <div class="o_handle w readonly"/>
+                <div class="o_handle s readonly"/>
+
+                <div class="o_overlay_options_wrap">
+                    <!-- Overlay move specific section -->
+                    <div class="o_overlay_move_options">
+                        <!-- Button-like handle to drag and drop -->
+                        <div class="o_move_handle"/>
+                    </div>
+                    <button type="button" class="oe_snippet_remove fa fa-trash"/>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.customize_block_options_section">
+        <we-customizeblock-options>
+            <we-title>
+                <span t-esc="name"/>
+                <we-top-button-group>
+                    <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_link o_we_hover_success"
+                                title="Duplicate Container"
+                                aria-label="Duplicate Container"/>
+                    <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_link o_we_hover_danger"
+                                title="Remove Block"
+                                aria-label="Remove Block"/>
+                </we-top-button-group>
+            </we-title>
+        </we-customizeblock-options>
+    </t>
+    <t t-name="web_editor.outdated_block_message">
+        <we-alert>
+            <we-title>This block is outdated</we-title>
+            <span>To make changes, drop this block and use the new options in the last version.</span>
+        </we-alert>
+    </t>
+
+    <!-- options -->
+    <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">
+        <div class="o_we_colorpicker_switch_panel d-flex justify-content-end px-2">
+            <t t-if="widget.withCombinations">
+                <button type="button" tabindex="1" class="o_we_colorpicker_switch_pane_btn active" data-target="color-combinations">
+                    <span>Combinations</span>
+                </button>
+                <button type="button" tabindex="2" t-attf-class="o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors">
+                    <span>Custom</span>
+                </button>
+            </t>
+            <button t-if="widget.resetButton" type="button" class="my-1 ml-auto o_we_color_btn o_colorpicker_reset">
+                <t t-if="widget.withCombinations">None</t>
+                <t t-else="">Reset</t>
+            </button>
+        </div>
+        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} pt-2 px-2 pb-3 bg-black-25" data-color-tab="color-combinations">
+            <!-- List all Presets -->
+            <t t-foreach="5" t-as="i">
+                <t t-call="web_editor.colorpalette.combination.btn">
+                    <t t-set="number" t-value="i + 1"/>
+                </t>
+            </t>
+        </div>
+        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} py-3 px-2 bg-black-25" data-color-tab="theme-colors"/>
+    </div>
+    <t t-name="web_editor.colorpalette.combination.btn">
+        <button type="button" class="o_we_color_btn o_we_color_combination_btn"
+                t-att-data-color="number" t-attf-title="Preset #{number}">
+            <t t-call="web_editor.color.combination.preview"/>
+        </button>
+    </t>
+    <t t-name="web_editor.color.combination.preview">
+        <div class="o_we_cc_preview_wrapper d-flex justify-content-between">
+            <h1 class="o_we_color_combination_btn_title">Title</h1>
+            <p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
+            <span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
+            <span class="o_we_color_combination_btn_btn btn btn-sm btn-secondary o_btn_preview"><small>Button</small></span>
+        </div>
+    </t>
+
+    <t t-name="web_editor.many2one.button">
+        <div class="btn-group">
+            <a role="button" href="#" class="btn btn-secondary dropdown-toggle d-none" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact">
+                <i class="fa fa-search"></i>
+            </a>
+            <ul class="dropdown-menu contact_menu d-block list-group list-group-flush mx-1" role="menu">
+                <li class="px-1"><a role="menuitem" class="dropdown-item pl-1 pr-2"><i class="fa fa-search"></i><input href="#" type="email" placeholder="Search" class="ml-2" autocomplete="off"/></a></li>
+            </ul>
+        </div>
+    </t>
+
+    <t t-name="web_editor.many2one.search">
+        <t t-foreach="contacts" t-as="item">
+            <li class="list-group-item px-2"><a role="menuitem" href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
+        </t>
+    </t>
+</templates>
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
new file mode 100644
index 00000000..3ca5030a
--- /dev/null
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -0,0 +1,579 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+
+    <!--=================-->
+    <!-- Edition Iframe -->
+    <!--=================-->
+
+    <t t-name="wysiwyg.iframeContent"><head>
+            <meta charset="utf-8"/>
+            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+            <t t-foreach="assets || []" t-as="asset">
+                <t t-foreach="asset.cssLibs || []" t-as="cssLib">
+                    <link type="text/css" rel="stylesheet" t-att-href="cssLib"/>
+                </t>
+                <t t-foreach="asset.cssContents || []" t-as="cssContent">
+                    <style type="text/css" t-raw="cssContent"/>
+                </t>
+                <t t-foreach="asset.jsLibs || []" t-as="jsLib">
+                    <script type="text/javascript" t-att-src="jsLib"/>
+                </t>
+                <t t-foreach="asset.jsContents || []" t-as="jsContent" t-if="jsContent.indexOf('inline asset') !== -1">
+                    <script type="text/javascript" t-raw="jsContent"/>
+                </t>
+            </t>
+            <script type="text/javascript">
+                odoo.define('web.session', function () {
+                    return window.top.odoo.__DEBUG__.services['web.session'];
+                });
+
+                odoo.define('root.widget', function (require) {
+                    'use strict';
+                    var Widget = require('web.Widget');
+                    var widget = new Widget();
+                    widget.appendTo(document.body);
+                    return widget;
+                });
+
+                odoo.define('web.core.top', function (require) {
+                    var core = require('web.core');
+                    core.qweb.templates = window.top.odoo.__DEBUG__.services['web.core'].qweb.templates;
+                });
+            </script>
+        </head>
+        <body id="iframe_target" class="o_in_iframe">
+            <div id="web_editor-top-edit"></div>
+            <div id="wrapwrap">
+                <main>
+                    <div data-oe-model="model" data-oe-type="html" class="o_editable oe_structure"></div>
+                </main>
+            </div>
+            <script type="text/javascript">
+                odoo.define('web_editor.wysiwyg.iniframe', function (require) {
+                    'use strict';
+                    var editor = require('web_editor.editor');
+
+                    window._summernoteSlave = $.summernote;
+                    window._summernoteSlave.iframe = true;
+                    window._summernoteSlave.lang = window.top.$.summernote.lang;
+                    if (window.top.<t t-esc="updateIframeId"/>) {
+                        window.top.<t t-esc="updateIframeId"/>(editor.Class, <t t-esc="avoidDoubleLoad"/>);
+                    }
+                });
+            </script>
+        </body>
+    </t>
+
+    <!--=================-->
+    <!-- Edition Dialogs -->
+    <!--=================-->
+
+    <!-- Alt Dialog (allows to change alt and title of page images) -->
+    <form t-name="wysiwyg.widgets.alt" action="#">
+        <div class="form-group row">
+            <label class="col-md-3 col-form-label" for="alt"
+                   title="'Alt tag' specifies an alternate text for an image, if the image cannot be displayed (slow connection, missing image, screen reader ...).">
+               Description <small>(ALT Tag)</small>
+            </label>
+            <div class="col-md-8">
+                <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
+            </div>
+        </div>
+        <div class="form-group row">
+            <label class="col-md-3 col-form-label" for="title"
+                   title="'Title tag' is shown as a tooltip when you hover the picture.">
+               Tooltip  <small>(TITLE Tag)</small>
+            </label>
+            <div class="col-md-8">
+                <input class="form-control" id="title" required="required" t-att-value="widget.tag_title" type="text"/>
+            </div>
+        </div>
+    </form>
+
+    <!-- Media Dialog (allows to choose an img/pictogram/video) -->
+    <div t-name="wysiwyg.widgets.media">
+        <ul class="nav nav-tabs" role="tablist">
+            <li t-if="!widget.options.noImages" class="nav-item"><a t-attf-class="nav-link #{widget.isImageActive() ? 'active' : ''}" id="editor-media-image-tab" data-toggle="tab" href="#editor-media-image" role="tab" aria-controls="editor-media-image" t-att-aria-selected="widget.isImageActive().toString()">Image</a></li>
+            <li t-if="!widget.options.noDocuments" class="nav-item"><a t-attf-class="nav-link #{widget.isDocumentActive() ? 'active' : ''}" id="editor-media-document-tab" data-toggle="tab" href="#editor-media-document" role="tab" aria-controls="editor-media-document" t-att-aria-selected="widget.isDocumentActive().toString()">Document</a></li>
+            <li t-if="!widget.options.noIcons" class="nav-item"><a t-attf-class="nav-link #{widget.isIconActive() ? 'active' : ''}" id="editor-media-icon-tab" data-toggle="tab" href="#editor-media-icon" role="tab" aria-controls="editor-media-icon" t-att-aria-selected="widget.isIconActive().toString()">Pictogram</a></li>
+            <li t-if="!widget.options.noVideos" class="nav-item"><a t-attf-class="nav-link #{widget.isVideoActive() ? 'active' : ''}" id="editor-media-video-tab" data-toggle="tab" href="#editor-media-video" role="tab" aria-controls="editor-media-video" t-att-aria-selected="widget.isVideoActive().toString()">Video</a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+            <div t-if="!widget.options.noImages" t-attf-class="tab-pane fade #{widget.isImageActive() ? 'show active': ''}" id="editor-media-image" role="tabpanel" aria-labelledby="editor-media-image-tab"/>
+            <div t-if="!widget.options.noDocuments" t-attf-class="tab-pane fade #{widget.isDocumentActive() ? 'show active': ''}" id="editor-media-document" role="tabpanel" aria-labelledby="editor-media-document-tab"/>
+            <div t-if="!widget.options.noIcons" t-attf-class="tab-pane fade #{widget.isIconActive() ? 'show active': ''}" id="editor-media-icon" role="tabpanel" aria-labelledby="editor-media-icon-tab"/>
+            <div t-if="!widget.options.noVideos" t-attf-class="tab-pane fade #{widget.isVideoActive() ? 'show active': ''}" id="editor-media-video" role="tabpanel" aria-labelledby="editor-media-video-tab"/>
+        </div>
+    </div>
+
+    <t t-name="wysiwyg.widgets.media.search">
+        <div class="input-group ml-auto">
+            <input type="text" class="form-control o_we_search" t-att-placeholder="searchPlaceholder.trim()"/>
+            <div class="input-group-append">
+                <div class="input-group-text o_we_search_icon">
+                    <i class="fa fa-search" title="Search" role="img" aria-label="Search"/>
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <!-- File choosing part of the Media Dialog -->
+    <t t-name="wysiwyg.widgets.file">
+        <form>
+            <t t-call="wysiwyg.widgets.files.submenu"/>
+            <div class="form-text o_we_error_text"/>
+            <div class="o_we_existing_attachments"/>
+            <div class="mt-4 text-center mx-auto o_we_load_more">
+                <button class="btn btn-primary o_load_more d-none" type="button">Load more...</button>
+                <div class="mt-4 o_load_done_msg d-none">
+                    <span><i>All images have been loaded</i></span>
+                </div>
+            </div>
+        </form>
+    </t>
+
+    <t t-name="wysiwyg.widgets.files.submenu">
+        <div class="form-inline align-items-center py-4">
+            <input type="file" class="d-none o_file_input" name="upload" t-att-accept="widget.options.accept" t-att-multiple="widget.options.multiImages &amp;&amp; 'multiple'"/>
+
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary o_upload_media_button">
+                    <t t-esc="uploadText"/>
+                </button>
+            </div>
+
+            <div class="input-group align-items-center ml-2">
+                <input type="text" class="form-control o_we_url_input o_we_horizontal_collapse o_we_transition_ease" name="url" t-att-placeholder="urlPlaceholder"/>
+                <div class="input-group-append align-items-center">
+                    <button type="button" class="btn btn-secondary o_upload_media_url_button">
+                        <t t-esc="addText"/>
+                    </button>
+                    <div class="ml-2">
+                        <span class="o_we_url_success text-success d-none fa fa-lg fa-check" title="The URL seems valid."/>
+                        <span class="o_we_url_warning text-warning d-none fa fa-lg fa-warning" t-att-title="urlWarningTitle"/>
+                        <span class="o_we_url_error text-danger d-none fa fa-lg fa-times" title="The URL does not seem to work."/>
+                    </div>
+                </div>
+            </div>
+            <t t-raw="0"/>
+            <t t-call="wysiwyg.widgets.media.search"/>
+        </div>
+    </t>
+
+    <t t-name="wysiwyg.widgets.image">
+        <t t-call="wysiwyg.widgets.file">
+            <t t-set="uploadText">Upload an image</t>
+            <t t-set="urlPlaceholder">https://www.odoo.com/logo.png</t>
+            <t t-set="addText">Add URL</t>
+            <t t-set="searchPlaceholder">Search an image</t>
+            <t t-set="urlWarningTitle">The URL does not contain any image. The file will be added in the document section.</t>
+            <div class="d-flex justify-content-end flex-grow-1 pr-3">
+                <div t-attf-class="custom-control custom-switch #{__debug__ and 'd-flex' or 'd-none'} align-items-center mr-2">
+                    <input class="o_we_show_optimized ml-2 custom-control-input" type="checkbox" id="o_we_show_optimized_switch"/>
+                    <label class="custom-control-label" for="o_we_show_optimized_switch">
+                        Show optimized images
+                    </label>
+                </div>
+                <select class="custom-select o_we_search_select">
+                    <option value="all">All</option>
+                    <option value="database">My Images</option>
+                    <option t-if="widget.options.useMediaLibrary" value="media-library">Illustrations</option>
+                </select>
+            </div>
+        </t>
+    </t>
+
+    <t t-name="wysiwyg.widgets.document">
+        <t t-call="wysiwyg.widgets.file">
+            <t t-set="uploadText">Upload a document</t>
+            <t t-set="urlPlaceholder">https://www.odoo.com/mydocument</t>
+            <t t-set="addText">Add document</t>
+            <t t-set="searchPlaceholder">Search a document</t>
+            <t t-set="urlWarningTitle">The URL contains an image. The file will be added in the image section.</t>
+        </t>
+    </t>
+
+    <t t-name="wysiwyg.widgets.image.optimize">
+        <form class="o_we_image_optimize_dialog">
+            <div class="row">
+                <div class="o_we_config_column col-lg-6">
+                    <div class="form-group">
+                        <label class="o_we_title_label" for="o_we_name_input">
+                            Name
+                            <i class="fa fa-question-circle-o" title="Give a relevant name to your file to optimize search engine results."/>
+                        </label>
+                        <input type="text" class="form-control" id="o_we_name_input" name="filename" aria-describedby="nameHelp" t-att-value="widget.attachment.name" required="required"/>
+                    </div>
+
+                    <small t-if="widget.disableResize" class="form-text text-muted o_we_no_resize">
+                        <span class="fa fa-info-circle"/> Resizing is not supported for images of type <t t-esc="widget.attachment.mimetype"/>.
+                    </small>
+                    <div t-else="1" class="form-group">
+                        <label class="o_we_title_label" for="o_we_name_input">
+                            Size
+                            <i class="fa fa-question-circle-o" title="Reduce the size as much as possible to increase performance."/>
+                        </label>
+                        <div class="form-row align-items-center">
+                            <div class="col">
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <div class="input-group-text">Width</div>
+                                    </div>
+                                    <input type="number" class="form-control" id="o_we_width" name="width" aria-describedby="sizeHelp" min="1" t-att-max="widget.image_width" t-att-value="widget.defaultWidth"/>
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">px</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                <i class="fa fa-times"/>
+                            </div>
+                            <div class="col">
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <div class="input-group-text">Height</div>
+                                    </div>
+                                    <input type="number" class="form-control" id="o_we_height" name="height" aria-describedby="sizeHelp" min="1" t-att-max="widget.image_height" t-att-value="widget.defaultHeight"/>
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">px</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-text small text-right">
+                            <i class="fa fa-info-circle text-info"/>
+                            <span>Or choose a preset:</span>
+                            <t t-foreach="widget.suggestedWidths" t-as="suggestedWidth">
+                                <span t-if="suggestedWidth_index > 0">-</span>
+                                <a href="#" class="o_we_width_preset" t-att-data-width="suggestedWidth.width" t-esc="suggestedWidth.text"/>
+                            </t>
+                        </div>
+                    </div>
+
+                    <small t-if="widget.disableQuality" class="form-text text-muted o_we_no_quality">
+                        <span class="fa fa-info-circle"/> Changing the quality is not supported for images of type <t t-esc="widget.attachment.mimetype"/>.
+                    </small>
+                    <div class="form-group" t-else="1">
+                        <t t-if="widget.toggleQuality">
+                            <div class="custom-control custom-switch">
+                                <input type="checkbox" class="custom-control-input" id="o_we_optimize_quality" t-att-checked="widget.isExisting ? undefined : 'checked'" aria-describedby="toggleQualityHelp"/>
+                                <label class="custom-control-label" for="o_we_optimize_quality">
+                                    Optimize
+                                    <i class="fa fa-question-circle-o" title="This reduces the quality to increase performance."/>
+                                </label>
+                            </div>
+                        </t>
+                        <t t-else="1">
+                            <label class="o_we_title_label" for="o_we_quality_input">
+                                Quality
+                                <i class="fa fa-question-circle-o" title="Reduce the quality as much as possible to increase performance."/>
+                            </label>
+                            <div class="form-row align-items-center">
+                                <div class="col-sm-10">
+                                    <input type="range" class="custom-range align-middle o_we_quality_range" id="quality_range" name="quality_range" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/>
+                                </div>
+                                <div class="col-sm-2">
+                                    <input type="number" class="form-control" id="o_we_quality_input" name="quality" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/>
+                                </div>
+                            </div>
+                        </t>
+                    </div>
+                </div>
+                <div class="o_we_preview_column col-lg-6">
+                    <h4>Preview</h4>
+                    <div class="mw-100 o_we_preview_area">
+                        <img class="img o_we_preview_image" alt="Image Preview"/>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </t>
+
+    <t t-name="wysiwyg.widgets.image.existing.attachments">
+        <div class="o_we_existing_attachments o_we_images d-flex flex-wrap w-100 justify-content-between align-items-stretch my-0">
+            <t t-if="!widget.hasContent()">
+                <div t-if="widget.needle" class="o_nocontent_help">
+                    <p class="o_empty_folder_image">No images found.</p>
+                    <p class="o_empty_folder_subtitle">You can upload images with the button located in the top left of the screen.</p>
+                </div>
+                <div t-else="" class="o_we_search_prompt">
+                    <h2>Get the perfect image by searching in our library of copyright free photos and illustrations.</h2>
+                </div>
+            </t>
+            <t t-else="">
+                <t t-if="['all', 'database'].includes(widget.searchService)" t-foreach="attachments" t-as="attachment">
+                    <t t-call="wysiwyg.widgets.image.existing.attachment"/>
+                </t>
+                <t t-if="['all', 'media-library'].includes(widget.searchService)" t-foreach="libraryMedia" t-as="media">
+                    <t t-call="wysiwyg.widgets.image.library_media"/>
+                </t>
+                <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
+                <t t-foreach="20">
+                    <div class="o_we_attachment_placeholder"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="wysiwyg.widgets.image.existing.attachment">
+        <t t-set="isOptimized" t-value="!!attachment.original_id"/>
+        <div t-attf-class="o_existing_attachment_cell position-relative bg-light #{isOptimized and 'o_we_attachment_optimized d-none' or ''} align-items-center justify-content-center" t-att-data-id="attachment.id">
+            <t t-call="wysiwyg.widgets.file.existing.remove"/>
+            <div class="o_we_media_dialog_img_wrapper">
+                <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{attachment.thumbnail_src or attachment.image_src}" t-att-alt="attachment.name" t-att-title="attachment.name"/>
+            </div>
+            <span t-if="isOptimized" class="badge badge-success">Optimized</span>
+        </div>
+    </t>
+
+    <t t-name="wysiwyg.widgets.image.library_media">
+        <div t-attf-class="o_existing_attachment_cell position-relative bg-light align-items-center justify-content-center o_library_media_cell" t-att-data-media-id="media.id">
+            <div class="o_we_media_dialog_img_wrapper">
+                <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{media.thumbnail_url}" t-att-title="media.tooltip or ''" crossorigin="anonymous"/>
+                <a t-if="media.author" class="o_we_media_author" t-att-href="media.author_link" target="_blank" t-esc="media.author"/>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="wysiwyg.widgets.document.existing.attachments">
+        <div class="o_we_existing_attachments o_we_documents">
+            <div t-if="!attachments.length" class="o_nocontent_help">
+                <p class="o_empty_folder_image">No documents found.</p>
+                <p class="o_empty_folder_subtitle">You can upload documents with the button located in the top left of the screen.</p>
+            </div>
+            <div t-else="" class="row mx-auto">
+                <t t-foreach="attachments" t-as="attachment">
+                    <div class="col-2 o_existing_attachment_cell o_we_attachment_highlight my-2" t-att-data-id="attachment.id">
+                        <t t-call="wysiwyg.widgets.file.existing.remove"/>
+
+                        <div t-att-data-url="attachment.url" role="img" t-att-aria-label="attachment.name" t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-class="o_image d-flex align-items-center justify-content-center"/>
+                        <small class="o_file_name" t-esc="attachment.name"/>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="wysiwyg.widgets.file.existing.remove">
+        <t t-set="removeTitle" t-if="attachment.res_model === 'ir.ui.view'">This file is a public view attachment.</t>
+        <t t-set="removeTitle" t-else="">This file is attached to the current record.</t>
+        <i class="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
+    </t>
+
+    <t t-name="wysiwyg.widgets.image.existing.error">
+        <div class="form-text">
+            <p>The image could not be deleted because it is used in the
+               following pages or views:</p>
+            <ul t-as="view" t-foreach="views">
+                <li>
+                    <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
+                        <t t-esc="view.name"/>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </t>
+
+    <!-- Icon choosing part of the Media Dialog -->
+    <t t-name="wysiwyg.widgets.font-icons">
+        <form action="#">
+            <div class="form-inline align-items-center py-4">
+                <t t-call="wysiwyg.widgets.media.search">
+                    <t t-set="searchPlaceholder">Search a pictogram</t>
+                </t>
+            </div>
+            <div class="font-icons-icons">
+                <t t-call="wysiwyg.widgets.font-icons.icons">
+                    <t t-set="iconsParser" t-value="widget.iconsParser"/>
+                </t>
+            </div>
+        </form>
+    </t>
+    <t t-name="wysiwyg.widgets.font-icons.icons">
+        <t t-as="data" t-foreach="iconsParser">
+            <span t-foreach="data.cssData" t-as="cssData"
+                t-att-data-id="cssData.names[0]"
+                t-att-title="cssData.names[0]"
+                t-att-aria-label="cssData.names[0]" role="img"
+                t-attf-class="font-icons-icon #{data.base} #{cssData.names[0]}"
+                t-att-data-alias="cssData.names.join(',')"/>
+        </t>
+    </t>
+
+    <!-- Video choosing part of the Media Dialog -->
+    <t t-name="wysiwyg.widgets.video">
+        <form action="#" class="row">
+            <div class="col mt-4 o_video_dialog_form">
+                <div class="form-group mb-2" id="o_video_form_group">
+                    <label class="col-form-label" for="o_video_text">
+                        Video code <small>(URL or Embed)</small>
+                    </label>
+                    <textarea class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/>
+                </div>
+                <div class="text-right">
+                    <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
+                </div>
+                <div class="o_video_dialog_options d-none mt-4">
+                    <div class="o_youtube_option o_vimeo_option o_dailymotion_option">
+                      <label class="o_switch mb0">
+                        <input id="o_video_autoplay" type="checkbox"/><span/>
+                        <span style="margin-right: 8px;">Autoplay</span>
+                        <span class="small text-muted" style="margin-left: auto;">Videos are muted when autoplay is enabled</span>
+                      </label>
+                    </div>
+                    <div class="o_youtube_option o_vimeo_option">
+                        <label class="o_switch mb0"><input id="o_video_loop" type="checkbox"/><span/>Loop</label>
+                    </div>
+                    <div class="o_youtube_option o_dailymotion_option">
+                        <label class="o_switch mb0"><input id="o_video_hide_controls" type="checkbox"/><span/>Hide player controls</label>
+                    </div>
+                    <div class="o_youtube_option">
+                        <label class="o_switch mb0"><input id="o_video_hide_fullscreen" type="checkbox"/><span/>Hide fullscreen button</label>
+                    </div>
+                    <div class="o_youtube_option">
+                        <label class="o_switch mb0"><input id="o_video_hide_yt_logo" type="checkbox"/><span/>Hide Youtube logo</label>
+                    </div>
+                    <div class="o_dailymotion_option">
+                        <label class="o_switch mb0"><input id="o_video_hide_dm_logo" type="checkbox"/><span/>Hide Dailymotion logo</label>
+                    </div>
+                    <div class="o_dailymotion_option">
+                        <label class="o_switch mb0"><input id="o_video_hide_dm_share" type="checkbox"/><span/>Hide sharing button</label>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div id="video-preview" class="p-3">
+                    <div class="o_video_dialog_preview_text small mb-2 d-none">Preview</div>
+                    <div class="media_iframe_video">
+                        <div class="media_iframe_video_size"/>
+                        <iframe class="o_video_dialog_iframe" allowfullscreen="allowfullscreen" frameborder="0" src=""/>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </t>
+
+
+    <!-- Link Dialog (allows to choose a style and content for a link on the page) -->
+    <div t-name="wysiwyg.widgets.link" class="o_link_dialog">
+        <div class="row">
+            <form class="col-lg-8">
+                <div t-attf-class="form-group row#{widget.needLabel ? '' : ' d-none'}">
+                    <label class="col-form-label col-md-3" for="o_link_dialog_label_input">Link Label</label>
+                    <div class="col-md-9">
+                        <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.text"/>
+                    </div>
+                </div>
+                <div id="o_url_input" t-attf-class="form-group row o_url_input#{widget.isButton ? ' d-none' : ''}">
+                    <label class="col-form-label col-md-3" for="o_link_dialog_url_input">URL or Email</label>
+                    <div class="col-md-9">
+                        <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/>
+                        <div class="form-check o_strip_domain d-none">
+                            <input type="checkbox" id="o_link_dialog_url_strip_domain" checked="checked" class="form-check-input"/>
+                            <label for="o_link_dialog_url_strip_domain" class="form-check-label font-weight-normal">
+                                Autoconvert to relative link
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label class="col-form-label col-md-3">Type</label>
+                    <div class="col-md-9 d-flex align-items-center">
+                        <div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}">
+                            <t t-foreach="widget.colorsData" t-as="colorData">
+                                <label role="button" class="m-0 mr-2">
+                                    <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="colorData.type"/>
+                                    <span t-esc="colorData.label"
+                                            t-attf-class="o_btn_preview btn btn-sm btn-#{colorData.btnPreview} #{colorData.type ? '' : 'px-0'}"/>
+                                </label>
+                            </t>
+                        </div>
+                    </div>
+                </div>
+                <div id="o_link_dialog_button_opts_collapse" class="collapse">
+                    <div class="form-group row">
+                        <label class="col-form-label col-md-3">Size</label>
+                        <div class="col-md-9">
+                            <select name="link_style_size" class="form-control link-style">
+                                <option value="sm">Small</option>
+                                <option value="" selected="selected">Medium</option>
+                                <option value="lg">Large</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-form-label col-md-3">Style</label>
+                        <div class="col-md-9">
+                            <select name="link_style_shape" class="form-control link-style">
+                                <option value="" selected="selected">Default</option>
+                                <option value="rounded-circle">Default + Rounded</option>
+                                <option value="outline">Outline</option>
+                                <option value="outline,rounded-circle">Outline + Rounded</option>
+                                <option value="fill">Fill</option>
+                                <option value="fill,rounded-circle">Fill + Rounded</option>
+                                <option value="flat">Flat</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div t-if="!widget.isButton" class="form-group row">
+                    <div class="offset-md-3 col-md-9">
+                        <label class="o_switch">
+                            <input type="checkbox" name="is_new_window" t-att-checked="widget.data.isNewWindow ? 'checked' : undefined"/>
+                            <span/>
+                            Open in new window
+                        </label>
+                    </div>
+                </div>
+            </form>
+            <div class="col-lg-4 o_link_dialog_preview">
+                <div class="form-group text-center">
+                    <label>Preview</label>
+                    <div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}"
+                         style="overflow-x: auto; max-width: 100%; max-height: 200px;">
+                        <a href="#" id="link-preview" aria-label="Preview" title="Preview"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ImageCropWidget controls (allows to crop images on the page) -->
+    <div t-name="wysiwyg.widgets.crop" class="o_we_crop_widget" contenteditable="false">
+        <div class="o_we_cropper_wrapper">
+            <img class="o_we_cropper_img"/>
+            <div class="o_we_crop_buttons text-center mt16 position-absolute o_we_no_overlay" contenteditable="false">
+                <div class="btn-group btn-group-toggle" title="Aspect Ratio" data-toggle="buttons">
+                    <t t-foreach="widget.aspectRatios" t-as="ratio">
+                        <t t-set="is_active" t-value="ratio === widget.aspectRatio"/>
+                        <label t-attf-class="btn #{is_active and 'active' or ''}" data-action="ratio" t-att-data-value="ratio">
+                            <input type="radio" /><t t-esc="ratio_value.label"/>
+                        </label>
+                    </t>
+                </div>
+                <div class="btn-group" role="group">
+                    <button type="button" title="Zoom In" data-action="zoom" data-value="0.1"><i class="fa fa-fw fa-search-plus"/></button>
+                    <button type="button" title="Zoom Out" data-action="zoom" data-value="-0.1"><i class="fa fa-fw fa-search-minus"/></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button type="button" title="Rotate Left" data-action="rotate" data-value="-90"><i class="fa fa-fw fa-rotate-left"/></button>
+                    <button type="button" title="Rotate Right" data-action="rotate" data-value="90"><i class="fa fa-fw fa-rotate-right"/></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button type="button" title="Flip Horizontal" data-action="flip" data-scale-direction="scaleX"><i class="fa fa-fw fa-arrows-h"/></button>
+                    <button type="button" title="Flip Vertical" data-action="flip" data-scale-direction="scaleY"><i class="fa fa-fw fa-arrows-v"/></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button type="button" title="Reset Image" data-action="reset"><i class="fa fa-refresh"/> Reset Image</button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button type="button" title="Apply" data-action="apply" class="btn btn-primary"><i class="fa fa-check"/> Apply</button>
+                    <button type="button" title="Discard" data-action="discard" class="btn btn-danger"><i class="fa fa-times"/> Discard</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</templates>
diff --git a/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml b/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml
new file mode 100644
index 00000000..a536f6f9
--- /dev/null
+++ b/addons/web_editor/static/src/xml/wysiwyg_colorpicker.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <div t-name="wysiwyg.plugin.font.paletteButton" t-attf-class="note-btn-group btn-group {{className}}">
+        <button type="button" class="note-btn btn btn-light btn-sm dropdown-toggle" tabindex="-1" data-toggle="dropdown"><i
+                t-att-class="icon"></i></button>
+        <div class="dropdown-menu" />
+    </div>
+
+    <div t-name="wysiwyg.plugin.font.colorPalette" class="note-palette">
+        <button type="button" class="note-color-reset btn btn-light note-color-btn bg-undefined">
+            <t t-esc="lang.color.resetToDefault" /></button>
+        <div class="note-holder">
+            <div class="note-color-palette">
+                <h6 class="mt-2">Theme colors</h6>
+                <div class="o_theme_color_placeholder" />
+                <h6 class="mt-2">Transparent colors</h6>
+                <div class="o_transparent_color_placeholder" />
+                <h6 class="mt-2">Common colors</h6>
+                <div class="o_common_color_placeholder">
+                    <div class="note-color-row" t-foreach="colors" t-as="rowColors">
+                        <button t-foreach="rowColors" t-as="color" type="button" class="note-color-btn" data-toggle="button"
+                            tabindex="-1" t-attf-style="background-color:{{color}}" t-att-data-value="color"
+                            t-att-title="color" />
+                    </div>
+                </div>
+            </div>
+            <h6 class="note-custom-color mt8">
+                <t t-esc="lang.color.customColor" />
+            </h6>
+            <button class="note-custom-color-btn note-color-btn" style="display: none;"></button>
+        </div>
+    </div>
+</templates>