2 files changed, 32 insertions, 0 deletions
diff --git a/addons/website/static/src/xml/translator.xml b/addons/website/static/src/xml/translator.xml
new file mode 100644
index 00000000000..d3067f5e699
--- /dev/null
+++ b/addons/website/static/src/xml/translator.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<div t-name="website.TranslatorInfoDialog">
+    <p>You are about to enter the translation mode.</p>
+    <p>Here are the visuals used to help you translate efficiently:</p>
+    <ul class="oe_translate_examples">
+        <li data-oe-translation-state="to_translate">Content to translate</li>
+        <li data-oe-translation-state="translated">Translated content</li>
+    </ul>
+    <p>
+        In this mode, you can only translate texts. To change the structure of the page, you must edit the master page.
+        Each modification on the master page is automatically applied to all translated versions.
+    </p>
+</div>
+</templates>
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index a9ed7b66601..552c0b26ada 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -10,6 +10,23 @@
         <p class="text-muted">Your current changes will be saved automatically.</p>
     </div>
 
+    <!-- Editor top bar which contains the summernote tools and save/discard buttons -->
+    <t t-name="website.editorbar">
+        <div id="web_editor-top-edit">
+            <form class="navbar-form text-muted">
+                <button type="button" class="btn btn-secondary" data-action="cancel"><i class="fa fa-times"/> Discard</button>
+                <button type="button" class="btn btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
+            </form>
+        </div>
+    </t>
+    <!-- Custom checkbox (material-design-like toggle) -->
+    <t t-name="website.components.switch">
+        <label class="o_switch" t-att-for="id">
+            <input type="checkbox" t-att-id="id"/>
+            <span/>
+            <t t-if="label"><t t-esc="label"/></t>
+        </label>
+    </t>
 
     <div t-name="website.theme_customize_modal_layout" class="d-flex align-items-start">
         <ul class="nav flex-column flex-shrink-0 w-25"/>