[IMP] website: homepage welcome message when empty

3 files changed, 21 insertions, 64 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index b40c2deac9f..b79e04e2d69 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -22,7 +22,6 @@ website.TopBar.include({
         'click [data-action="edit"]': 'edit',
     },
     start: function () {
-        var self = this;
         $("#wrapwrap").find("[data-oe-model] .oe_structure.oe_empty, [data-oe-model].oe_structure.oe_empty, [data-oe-type=html]:empty")
             .filter(".oe_not_editable")
             .filter(".oe_no_empty")
@@ -39,6 +38,7 @@ website.TopBar.include({
         this.$el.addClass('editing_mode');
         editor.editor_bar = new editor.Class(this);
         editor.editor_bar.prependTo(document.body);
+        $('.o_homepage_editor_welcome_message').remove();
     },
 });
 
@@ -117,7 +117,7 @@ widget.LinkDialog.include({
             minimumInputLength: 1,
             placeholder: _t("New or existing page"),
             query: function (q) {
-                if (q.term == last) return;
+                if (q.term === last) return;
                 last = q.term;
                 $.when(
                     self.page_exists(q.term),
@@ -205,4 +205,16 @@ widget.LinkDialog.include({
     },
 });
 
+/**
+ * Display a welcome message on the homepage when it is empty and that the user is connected.
+ */
+base.ready().then(function () {
+    if (location.search.indexOf("enable_editor") < 0 && $(".editor_enable").length === 0) {
+        var $wrap = $("#wrapwrap.homepage #wrap");
+        if ($wrap.length && $wrap.html().trim() === "") {
+            $wrap.html(qweb.render("website.homepage_editor_welcome_message"));
+        }
+    }
+});
+
 });
diff --git a/addons/website/static/src/less/website.edit_mode.less b/addons/website/static/src/less/website.edit_mode.less
index 0f3d2e726c6..9a95b90c5a7 100644
--- a/addons/website/static/src/less/website.edit_mode.less
+++ b/addons/website/static/src/less/website.edit_mode.less
@@ -1,43 +1,6 @@
 
-@-webkit-keyframes dragAndDrop {
-    0% {
-        top: -10px;
-        left: -20px;
-        .rotate(0);
-        opacity: 0;
-    }
-    50% {
-        top: -10px;
-        left: -20px;
-        .rotate(0);
-        opacity: 0;
-    }
-    100% {
-        top: 30px;
-        left: 20px;
-        .rotate(45deg);
-        opacity: 1;
-    }
-}
-@keyframes dragAndDrop {
-    0% {
-        top: -10px;
-        left: -20px;
-        .rotate(0);
-        opacity: 0;
-    }
-    50% {
-        top: -10px;
-        left: -20px;
-        .rotate(0);
-        opacity: 0;
-    }
-    100% {
-        top: 30px;
-        left: 20px;
-        .rotate(45deg);
-        opacity: 1;
-    }
+.o_homepage_editor_welcome_message {
+    font-family: Roboto, @font-family-sans-serif;
 }
 
 .o_editable {
@@ -68,25 +31,6 @@
             color: #aaa;
         }
     }
-    &.oe_structure.oe_empty, &[data-oe-type=html] {
-        &:empty,
-        > .oe_drop_zone.oe_insert:only-child,
-        > p:empty:only-child {
-            position: relative;
-            &:before {
-                display: block;
-                font-family: FontAwesome;
-                content: "\f061";
-                color: @odoo-brand-primary;
-                font-size: 30px;
-
-                position: absolute;
-                z-index: 1031;
-                .o-animation(dragAndDrop, 1s, linear, 0s, infinite, alternate);
-            }
-            &:focus:before { display: none; }
-        }
-    }
 }
 .editor_enable [data-oe-readonly]:hover {
     cursor: default;
@@ -111,9 +55,6 @@
 
 [data-oe-type=html].oe_no_empty:empty {
     height: 16px!important;
-    &:before {
-        content: ''!important;
-    }
 }
 
 // EDITOR BAR
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index ce58e3a6c1e..43fcc557ddb 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-
     <t t-extend="web_editor.dialog.link">
         <t t-jquery=".list-group-item.form-group">
             this.removeClass('active');
@@ -17,4 +16,9 @@
         </t>
     </t>
 
+    <div t-name="website.homepage_editor_welcome_message" class="container text-center mt128 mb128 o_homepage_editor_welcome_message">
+        <h2 class="mt0">Welcome to your <b>Homepage</b>!</h2>
+        <p class="lead">Let's start designing.</p>
+        <p>Click on the <b>Edit</b> button in the top-right corner.</p>
+    </div>
 </templates>