[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#67007

X-original-commit: f5f9f336b052ddc4bd327618bad6d2a3284aa3ff
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website/i18n/website.pot

@@ -1533,6 +1533,13 @@ msgstr ""
 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.s_tabs_options
 #: model_terms:ir.ui.view,arch_db:website.snippet_options
@@ -6340,6 +6347,13 @@ msgstr ""
 msgid "Switch Theme"
 msgstr ""
 
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/xml/theme_preview.xml:0
+#, python-format
+msgid "TIP: Once loaded, follow the"
+msgstr ""
+
 #. module: website
 #: model_terms:ir.ui.view,arch_db:website.user_navbar
 msgid "TRANSLATE"
@@ -8291,6 +8305,13 @@ msgstr ""
 msgid "phone"
 msgstr ""
 
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/xml/theme_preview.xml:0
+#, python-format
+msgid "pointer to build the perfect page in 7 steps."
+msgstr ""
+
 #. module: website
 #: model_terms:ir.ui.view,arch_db:website.snippets
 msgid "pricing"

addons/website/static/src/js/theme_preview_form.js

@@ -11,13 +11,6 @@ var qweb = core.qweb;
 * Common code for theme installation/update handler.
 */
 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.
      *
@@ -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) {

addons/website/static/src/scss/website.theme_install.scss

@@ -1,11 +1,27 @@
 .o_theme_install_loader_container {
+    padding: 7%;
     background-color: rgba($o-shadow-color, .9);
+    font-size: 37px;
+    font-family: "Montserrat", $font-family-sans-serif;
     pointer-events: all;
+    justify-content: space-evenly;
     // above menu bar
     z-index: $zindex-modal - 1;
+    .o_tooltip {
+        top: auto !important;
+        bottom: 11px !important;
+        left: 0 !important;
+        margin-right: 7px !important;
+        padding-left: 33px !important;
+    }
+    .o_theme_install_loader_tip {
+        font-size: 0.5em;
+        @include media-breakpoint-down(md) {
+            width: 50% !important;
+        }
+    }
 }
 .o_theme_install_loader {
-    position: relative;
     display: inline-block;
     width: 400px;
     height: 220px;

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 text-center">
+            <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 w-25">
+                TIP: Once loaded, follow the
+                <span class="o_tooltip o_tooltip_visible bottom o_animated position-relative"></span>
+                <br/>pointer to build the perfect page in 7 steps.
+            </p>
         </div>
     </t>
 </templates>

addons/website/views/website_navbar_templates.xml

@@ -20,8 +20,15 @@
             <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
         </xpath>
         <xpath expr="//div[@id='wrapwrap']" position="before">
-            <div t-if="'with_loader' in request.params" 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 t-if="'with_loader' in request.params" 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 text-center">
+                Building your website...
                 <div class="o_theme_install_loader"/>
+                <p class="o_theme_install_loader_tip w-25">
+                    TIP: Once loaded, follow the
+                    <span class="o_tooltip o_tooltip_visible bottom o_animated position-relative"></span>
+                    <br/>pointer to build the perfect page in 7 steps.
+                </p>
             </div>
             <nav groups="base.group_user" t-if="website" id="oe_main_menu_navbar" class="o_main_navbar">
                 <ul id="oe_applications">