From f45f12d0bd3d7a4b17df32232dbd5f43d41faa72 Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Fri, 10 Sep 2021 11:32:03 +0000
Subject: [PATCH] [FIX] web: control panel bottom content style

Before this commit, the style of the control panel's bottom section
was a bit broken: the button groups did not flex.
This was because the dom changed a bit.

After this commit, they do.
Also, the structure of control-panel-bottom-left has changed.
It should contain `.btn-group` elements at its root.
The spacing between groups is handled by the control-panel.
(before, those spaces were actual spaces in DOM)

X-original-commit: 18ea11c99a7e2bd58d7469927352587cb14c76c4
Part-of: odoo/odoo#76390
---
 .../static/src/search/control_panel/control_panel.scss | 10 +++++++++-
 addons/web/static/src/views/graph/graph_view.xml       |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/search/control_panel/control_panel.scss b/addons/web/static/src/search/control_panel/control_panel.scss
index 5a121bdc2d5..b73b97bdeae 100644
--- a/addons/web/static/src/search/control_panel/control_panel.scss
+++ b/addons/web/static/src/search/control_panel/control_panel.scss
@@ -30,7 +30,15 @@
     }
 
     .o_cp_bottom_left {
-        display: flex;
+        // Bottom left holds only btn-groups
+        // they will handle pushing buttons on the relevant line
+        display: inline-block;
+
+        > .btn-group {
+            margin-bottom: map-get($spacers, 2);
+            // Before owl, the margin was handled by a real space!
+            margin-right: map-get($spacers, 1);
+        }
 
         > .o_cp_action_menus {
             padding-right: 10px;
diff --git a/addons/web/static/src/views/graph/graph_view.xml b/addons/web/static/src/views/graph/graph_view.xml
index 7d4f36f6ae5..a778bc4c6df 100644
--- a/addons/web/static/src/views/graph/graph_view.xml
+++ b/addons/web/static/src/views/graph/graph_view.xml
@@ -11,7 +11,7 @@
             </div>
             <GroupByMenu t-if="props.display and props.display['bottom-right'] === false"/>
         </div>
-        <div class="btn-group ml-4" role="toolbar" aria-label="Change graph">
+        <div class="btn-group" role="toolbar" aria-label="Change graph">
             <button class="btn btn-secondary fa fa-bar-chart-o o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="onModeSelected('bar')"
                 t-att-class="{ active: model.metaData.mode === 'bar' }"
@@ -25,13 +25,13 @@
                 t-att-class="{ active: model.metaData.mode === 'pie' }"
             />
         </div>
-        <div t-if="model.metaData.mode === 'bar'" class="btn-group ml-3" role="toolbar" aria-label="Change graph">
+        <div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
             <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
         </div>
-        <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group ml-3" role="toolbar" aria-label="Sort graph">
+        <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph">
             <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
                 t-on-click="toggleOrder('DESC')"
                 t-att-class="{ active: model.metaData.order === 'DESC' }"