From cb81b5ef932f75af14dfbdf89f8451a9d1827856 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Wed, 5 Oct 2022 13:00:16 +0000
Subject: [PATCH] [FIX] website, website_sale: repair Plausible dashboard
 layout

This commit includes several changes in the Plausible dashboard:
- Remove the "Analytics" title.
- Add margins (container-fluid => container).
  This also fixes the country map overflow and the flickering.
- Remove the duplicated scrollbars.
- Use the background colors from within the iframe.
- Hide the date range buttons by default, but show them if website_sale
  is installed.

It also reorders the Reporting menu as follows:
- Analytics
- eCommerce
- Online Sales
- Visitors
- Page Views

task-2993773

X-original-commit: b8c1976e933628182496929d348dda11b5051a0c
Part-of: odoo/odoo#102782
---
 .../static/src/scss/website.backend.scss      | 29 ++++++++++++++++
 .../static/src/xml/website.backend.xml        | 33 ++++++++++---------
 addons/website/views/website_views.xml        |  4 +--
 .../website/views/website_visitor_views.xml   |  4 +--
 .../static/src/xml/website_sale_dashboard.xml |  7 ++++
 5 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 9c8d292524c..d9b74db7f5d 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -1,8 +1,37 @@
 .o_dashboards {
     background-color: #ececec;
 
+    &:has(iframe[src*='plausible']) {
+        background-color: #f9fafb; // Copied from iframe.
+    }
+
     .o_website_dashboard {
         background-color: #ececec;
+
+        &:has(iframe[src*='plausible']) {
+            background-color: #f9fafb; // Copied from iframe.
+
+            iframe {
+                // TODO: Find another way to set the height, not robust enough,
+                // especially if plausible change those values later.
+                height: 2350px; // Copied from iframe.
+                top: 2px; // Do not cover eCommerce dashboard border.
+
+                @include media-breakpoint-only(md) {
+                    height: 2500px; // Copied from iframe.
+                }
+                @include media-breakpoint-only(lg) {
+                    height: 1600px; // Copied from iframe.
+                }
+                @include media-breakpoint-only(xl) {
+                    height: 1570px; // Copied from iframe.
+                }
+                @include media-breakpoint-only(xxl) {
+                    height: 1650px; // Copied from iframe.
+                }
+            }
+        }
+
         div.o_box {
             @include clearfix;
             color: $o-main-color-muted;
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index f5ec944162c..c8bd6c11b77 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -30,24 +30,24 @@
 
     <t t-name="website.plausible_content">
         <div class="row o_dashboard_visits" t-if="widget.groups.website_designer">
-            <div class="col-12 o_box">
-                <h2>Analytics</h2>
-                <div t-if="widget.dashboards_data.plausible_share_url" class="row">
+            <div t-if="widget.dashboards_data.plausible_share_url" class="col-12">
+                <div class="container">
                     <div class="ratio ratio-1x1">
-                        <iframe t-att-src='widget.dashboards_data.plausible_share_url' class="embed-responsive-item" frameborder="0" loading="lazy"/>
+                        <iframe t-att-src='widget.dashboards_data.plausible_share_url' class="embed-responsive-item" frameborder="0" loading="lazy" scrolling="no"/>
                     </div>
                 </div>
-                <div t-else="" class="col-lg-12">
-                    <div class="o_demo_background">
-                        <div class="o_layer">
-                        </div>
-                        <div class="o_buttons text-center">
-                            <h3>Easily track your visitor with Plausible</h3>
-                            <a class="btn btn-primary" target="_blank"
-                               href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/plausible.html">
-                                Connect Plausible
-                            </a>
-                        </div>
+            </div>
+            <div t-else="" class="col-lg-12 o_box">
+                <h2>Analytics</h2>
+                <div class="o_demo_background">
+                    <div class="o_layer">
+                    </div>
+                    <div class="o_buttons text-center">
+                        <h3>Easily track your visitor with Plausible</h3>
+                        <a class="btn btn-primary" target="_blank"
+                           href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/plausible.html">
+                            Connect Plausible
+                        </a>
                     </div>
                 </div>
             </div>
@@ -56,7 +56,8 @@
 
     <t t-name="website.DateRangeButtons">
         <!-- TODO: Hide in mobile as it is going to push in control panel and it breaks UI, maybe we will improve it in future -->
-        <div class="btn-group o_date_range_buttons d-none d-md-inline-flex float-end">
+        <t t-set="show_range_buttons" t-value="0"/>
+        <div t-attf-class="btn-group o_date_range_buttons #{show_range_buttons ? 'd-md-inline-flex' : 'd-none'} float-end">
             <button class="btn btn-secondary js_date_range active" data-date="week">Last Week</button>
             <button class="btn btn-secondary js_date_range" data-date="month">Last Month</button>
             <button class="btn btn-secondary js_date_range" data-date="year">Last Year</button>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 25e4fcec836..a079fa10225 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -454,14 +454,14 @@
 
         <menuitem id="menu_website_dashboard"
             name="eCommerce"
-            sequence="10"
+            sequence="20"
             parent="menu_reporting"
             action="website.ir_actions_server_website_dashboard"
             active="0"/>
 
         <menuitem id="menu_website_analytics"
             name="Analytics"
-            sequence="20"
+            sequence="10"
             parent="menu_reporting"
             action="website.ir_actions_server_website_analytics"/>
 
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index 0b446c6f173..554b3956d9d 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -349,11 +349,11 @@
     </record>
 
     <menuitem id="website_visitor_menu" name="Visitors"
-        sequence="5"
+        sequence="40"
         parent="website.menu_reporting"
         action="website.website_visitors_action"/>
     <menuitem id="menu_visitor_view_menu" name="Page Views"
-        sequence="40"
+        sequence="50"
         parent="website.menu_reporting"
         action="website.website_visitor_view_action"/>
 </data></odoo>
diff --git a/addons/website_sale/static/src/xml/website_sale_dashboard.xml b/addons/website_sale/static/src/xml/website_sale_dashboard.xml
index 020a390c7c5..896ad6cb378 100644
--- a/addons/website_sale/static/src/xml/website_sale_dashboard.xml
+++ b/addons/website_sale/static/src/xml/website_sale_dashboard.xml
@@ -159,4 +159,11 @@
             </div>
         </div>
     </t>
+
+    <!-- Show the date range buttons related to the 'community' Sales Dashboard -->
+    <t t-extend="website.DateRangeButtons">
+        <t t-jquery="t[t-set='show_range_buttons']" t-operation="attributes">
+            <attribute name="t-value" value="1" />
+        </t>
+    </t>
 </templates>