From 50aaf73eea54961e1a0fa67aeb0c8bb0f511937a Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Wed, 18 Jan 2023 13:54:05 +0000
Subject: [PATCH] [IMP] web: improve list control panel style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, the bottom row of control panel in
list view could change height when reducing window size
and give an ugly layout.
This commit gives more flex to this row to keep a correct
layout when reducing window size.

task 3095775

closes odoo/odoo#110277

Related: odoo/enterprise#36895
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../search/control_panel/control_panel.xml    |  2 +-
 .../static/src/views/list/list_controller.xml | 21 +++++++------------
 .../static/src/views/list/list_renderer.scss  |  8 +++++++
 .../tests/mobile/views/list_view_tests.js     |  2 +-
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 330c5d04afb..15484877575 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -44,7 +44,7 @@
                 </div>
 
                 <t t-if="env.config.viewSwitcherEntries.length > 1">
-                    <nav class="btn-group o_cp_switch_buttons">
+                    <nav class="btn-group o_cp_switch_buttons ms-auto">
                         <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
                             <button class="btn btn-light o_switch_view "
                                 t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
diff --git a/addons/web/static/src/views/list/list_controller.xml b/addons/web/static/src/views/list/list_controller.xml
index ba1558ca953..4832877f7d9 100644
--- a/addons/web/static/src/views/list/list_controller.xml
+++ b/addons/web/static/src/views/list/list_controller.xml
@@ -32,7 +32,7 @@
     </t>
 
     <t t-name="web.ListView.Buttons" owl="1">
-        <div class="o_list_buttons d-flex" role="toolbar" aria-label="Main actions">
+        <div class="o_list_buttons d-flex flex-wrap" role="toolbar" aria-label="Main actions">
             <t t-if="props.showButtons">
                 <t t-if="model.root.editedRecord">
                     <button type="button" class="btn btn-primary o_list_button_save" data-hotkey="s" t-on-click.stop="onClickSave">
@@ -71,21 +71,16 @@
     </t>
 
     <t t-name="web.ListView.Selection" owl="1">
-        <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center ps-0 px-lg-2 py-0 mb-0 ms-0 ms-md-2" role="alert">
-            <t t-if="env.isSmall">
-                <button class="btn btn-link py-0 o_discard_selection" t-on-click="discardSelection">
-                    <span class="fa-2x">&#215;</span>
-                </button>
-            </t>
-            <span t-if="isDomainSelected">All <span class="font-monospace" t-esc="nbTotal"/> selected</span>
+        <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center p-1" role="alert">
+            <span t-if="isDomainSelected" class="p-1">All <t t-esc="nbTotal"/> selected</span>
             <t t-else="">
-                <span class="font-monospace me-1" t-esc="nbSelected"/> selected
-                <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ms-2 btn btn-sm btn-info px-2 py-1 border-0 fw-normal" t-on-click="onSelectDomain">
-                    <i class="fa fa-arrow-right"/> Select all <span class="font-monospace" t-esc="nbTotal"/>
+                <span class="me-1" t-esc="nbSelected"/> selected
+                <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ms-2 btn btn-sm btn-info p-1 border-0 fw-normal" t-on-click="onSelectDomain">
+                    <i class="fa fa-fw fa-arrow-right"/> Select all <span t-esc="nbTotal"/>
                 </a>
             </t>
-            <a t-if="nbSelected > 1" href="#" class="o_list_unselect_all ms-2 btn btn-sm btn-info px-2 py-1 border-0 fw-normal" t-on-click="onUnselectAll">
-                Unselect all
+            <a t-if="nbSelected > 1" href="#" class="o_list_unselect_all ms-2 btn btn-sm btn-info p-1 border-0 fw-normal" t-att-class="{'btn-link': env.isSmall}" t-on-click="onUnselectAll">
+                <i class="fa fa-fw fa-times"/><t t-if="!env.isSmall"> Unselect all</t>
             </a>
         </div>
     </t>
diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss
index a1d7f8f7d1b..ce1ec00e264 100644
--- a/addons/web/static/src/views/list/list_renderer.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -475,3 +475,11 @@
         @include o-sample-data-disabled;
     }
 }
+
+.o_list_view .o_list_buttons {
+    gap: 0.5rem;
+
+    > * {
+        margin: auto 0;
+    }
+}
diff --git a/addons/web/static/tests/mobile/views/list_view_tests.js b/addons/web/static/tests/mobile/views/list_view_tests.js
index 5330c9f4ce4..5484217752d 100644
--- a/addons/web/static/tests/mobile/views/list_view_tests.js
+++ b/addons/web/static/tests/mobile/views/list_view_tests.js
@@ -92,7 +92,7 @@ QUnit.module("Mobile Views", ({ beforeEach }) => {
         );
 
         // unselect all
-        await click(fixture, ".o_discard_selection");
+        await click(fixture, ".o_list_unselect_all");
         assert.containsNone(fixture, ".o_list_selection_box");
         assert.containsOnce(fixture, ".o_control_panel .o_cp_bottom_right");
     });