diff options
| author | xO-Tx <mou@odoo.com> | 2021-01-29 17:23:32 +0000 |
|---|---|---|
| committer | xO-Tx <mou@odoo.com> | 2021-01-29 17:23:32 +0000 |
| commit | 7cc68d465338dd6338aeeba419af25ac84cc9df9 (patch) | |
| tree | 9722070e72406ab95cc3f2fdf123ed23215192c8 /addons/website/static/src | |
| parent | 36db3d06e1899b84f74328adef537fed3644f099 (diff) | |
[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>
Diffstat (limited to 'addons/website/static/src')
| -rw-r--r-- | addons/website/static/src/js/theme_preview_form.js | 10 | ||||
| -rw-r--r-- | addons/website/static/src/scss/website.backend.scss | 11 | ||||
| -rw-r--r-- | addons/website/static/src/xml/theme_preview.xml | 9 |
3 files changed, 22 insertions, 8 deletions
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> |