[IMP] website: add theme loader tips

The goal of this commit is to add tips when theme is loaded
to encourage users to follow the tour (in Edit mode).

task-2440450

closes odoo/odoo#65153

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 43 insertions, 8 deletions

diff --git a/addons/website/i18n/website.pot b/addons/website/i18n/website.pot
index 36c1da0849f..63c8cefda19 100644
--- a/addons/website/i18n/website.pot
+++ b/addons/website/i18n/website.pot
@@ -1638,6 +1638,13 @@ msgid "Building blocks system"
 msgstr ""
 
 #. module: website
+#. openerp-web
+#: code:addons/website/static/src/xml/theme_preview.xml:0
+#, python-format
+msgid "Building your website..."
+msgstr ""
+
+#. module: website
 #: model_terms:ir.ui.view,arch_db:website.bs_debug_view
 #: model_terms:website.page,arch_db:website.bs_debug_page
 msgid "Button"
@@ -6775,6 +6782,13 @@ msgid "Switch Theme"
 msgstr ""
 
 #. module: website
+#. openerp-web
+#: code:addons/website/static/src/xml/theme_preview.xml:0
+#, python-format
+msgid "TIP: Follow the"
+msgstr ""
+
+#. module: website
 #: model_terms:ir.ui.view,arch_db:website.user_navbar
 msgid "TRANSLATE"
 msgstr ""
@@ -8867,6 +8881,13 @@ msgid "this page"
 msgstr ""
 
 #. module: website
+#. openerp-web
+#: code:addons/website/static/src/xml/theme_preview.xml:0
+#, python-format
+msgid "to build the perfect page in 5 steps."
+msgstr ""
+
+#. module: website
 #: model_terms:ir.ui.view,arch_db:website.snippets
 msgid "valuation, rank"
 msgstr ""
diff --git a/addons/website/static/src/js/theme_preview_form.js b/addons/website/static/src/js/theme_preview_form.js
index 2519da77443..aada899b7a1 100644
--- a/addons/website/static/src/js/theme_preview_form.js
+++ b/addons/website/static/src/js/theme_preview_form.js
@@ -12,13 +12,6 @@ var qweb = core.qweb;
 */
 const ThemePreviewControllerCommon = {
     /**
-     * @override
-     */
-    init() {
-        this._super(...arguments);
-        this.$loader = $(qweb.render('website.ThemePreview.Loader'));
-    },
-    /**
      * Called to add loading effect and install/pdate the selected theme depending on action.
      *
      * @private
@@ -26,6 +19,9 @@ const ThemePreviewControllerCommon = {
      * @param {String} action
      */
     _handleThemeAction(res_id, action) {
+        this.$loader = $(qweb.render('website.ThemePreview.Loader', {
+            'showTips': action !== 'button_refresh_theme',
+        }));
         let actionCallback = undefined;
         this._addLoader();
         switch (action) {
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index a3ec2034d62..1122930ee78 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -429,6 +429,17 @@
 .o_theme_install_loader_container {
     background-color: rgba($o-shadow-color, .9);
     pointer-events: all;
+    font-size: 4.5rem;
+    justify-content: space-evenly;
+    .o_tooltip {
+        top: 0 !important;
+        left: 0 !important;
+        margin-right: 7px !important;
+        padding-left: 28px !important;
+    }
+    .o_theme_install_loader_tip {
+        font-size: 0.5em;
+    }
 }
 .o_theme_install_loader {
     position: relative;
diff --git a/addons/website/static/src/xml/theme_preview.xml b/addons/website/static/src/xml/theme_preview.xml
index 99e50a76f2f..67ce152e304 100644
--- a/addons/website/static/src/xml/theme_preview.xml
+++ b/addons/website/static/src/xml/theme_preview.xml
@@ -24,8 +24,15 @@
         </div>
     </t>
     <t t-name="website.ThemePreview.Loader">
-        <div class="o_theme_install_loader_container position-fixed fixed-top fixed-left h-100 w-100 d-flex justify-content-center align-items-center">
+        <div class="o_theme_install_loader_container position-fixed fixed-top fixed-left
+            h-100 w-100 d-flex flex-column align-items-center text-white font-weight-bold">
+            <t t-if="showTips">Building your website...</t>
             <div class="o_theme_install_loader"></div>
+            <p t-if="showTips" class="o_theme_install_loader_tip text-center w-25">
+                TIP: Follow the
+                <span class="o_tooltip o_tooltip_visible top o_animated position-relative"></span>
+                to build the perfect page in 5 steps.
+            </p>
         </div>
     </t>
 </templates>