From 2a09a948f81eea8b7dba166b9659a06fdd355595 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Tue, 25 Apr 2023 11:24:54 +0000
Subject: [PATCH] [IMP] web: ControlPanel adaptations on mobile

Part-of: odoo/odoo#116641
---
 .../src/search/control_panel/control_panel.js |  22 ++++
 .../search/control_panel/control_panel.xml    | 108 ++++++++++++------
 2 files changed, 95 insertions(+), 35 deletions(-)

diff --git a/addons/web/static/src/search/control_panel/control_panel.js b/addons/web/static/src/search/control_panel/control_panel.js
index abc0491cb45..8d9e26ca18b 100644
--- a/addons/web/static/src/search/control_panel/control_panel.js
+++ b/addons/web/static/src/search/control_panel/control_panel.js
@@ -70,6 +70,28 @@ export class ControlPanel extends Component {
             this.lastScrollTop = 0;
             this.initialScrollTop = this.getScrollingElement().scrollTop;
         });
+
+        this.mainButtons = useRef("mainButtons");
+
+        useEffect(() => {
+            if (!this.env.isSmall) {
+                return;
+            }
+            // on small screen, clean-up the dropdown elements
+            const dropdownButtons = this.mainButtons.el.querySelectorAll(".dropdown-menu button");
+            if (!dropdownButtons.length) {
+                this.mainButtons.el
+                    .querySelectorAll(".dropdown-menu, .dropdown-toggle")
+                    .forEach((el) => el.classList.add("d-none"));
+                return;
+            }
+            for (const button of dropdownButtons) {
+                for (const cl of Array.from(button.classList)) {
+                    button.classList.toggle(cl, !cl.startsWith("btn-"));
+                }
+                button.classList.add("dropdown-item", "btn", "btn-link");
+            }
+        });
     }
 
     getScrollingElement() {
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 6c99958b23a..2fcb36a0d1c 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -4,11 +4,25 @@
     <t t-name="web.ControlPanel" owl="1">
         <div class="o_control_panel d-flex flex-column gap-3 gap-lg-1 px-3 pt-2 pb-3" t-ref="root">
             <div class="o_control_panel_main d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-lg-start gap-3">
-                <div class="o_control_panel_breadcrumbs d-flex align-items-center w-100 w-md-50 w-lg-auto">
-                    <div class="o_control_panel_main_buttons d-flex gap-1 d-empty-none d-print-none me-2">
-                        <t t-slot="control-panel-create-button"/>
-                        <t t-slot="layout-buttons"/>
-                        <t t-slot="control-panel-always-buttons"/>
+                <div class="o_control_panel_breadcrumbs d-flex align-items-center justify-content-between w-100 w-md-50 w-lg-auto">
+                    <div class="o_control_panel_main_buttons d-flex gap-1 d-empty-none d-print-none me-md-2 order-1 order-md-0" t-ref="mainButtons">
+                        <t t-if="env.isSmall">
+                            <div class="btn-group">
+                                <t t-slot="control-panel-create-button"/>
+                                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <span class="visually-hidden">Toggle Dropdown</span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <t t-slot="layout-buttons"/>
+                                    <t t-slot="control-panel-always-buttons"/>
+                                </ul>
+                            </div>
+                        </t>
+                        <t t-else="">
+                            <t t-slot="control-panel-create-button"/>
+                            <t t-slot="layout-buttons"/>
+                            <t t-slot="control-panel-always-buttons"/>
+                        </t>
                     </div>
                     <t t-if="env.config.noBreadcrumbs">
                         <section class="o_control_panel_breadcrumbs_actions d-contents">
@@ -26,22 +40,38 @@
                     <t t-slot="layout-actions"/>
                 </div>
 
-                <div class="o_control_panel_navigation d-flex flex-wrap flex-md-nowrap align-items-center justify-content-between justify-content-md-end w-100 w-md-auto gap-3 gap-lg-1 gap-xl-3 order-2 order-lg-3">
+                <div class="o_control_panel_navigation d-flex flex-wrap flex-md-nowrap align-items-center justify-content-end w-100 w-md-auto gap-3 gap-lg-1 gap-xl-3 order-2 order-lg-3">
                     <span class="d-none d-xl-block ms-auto"/> <!-- Spacer -->
                     <div t-if="pagerProps and pagerProps.total > 0" class="o_cp_pager text-nowrap order-2 order-md-1" role="search">
                         <Pager t-props="pagerProps"/>
                     </div>
-                    <nav t-if="env.config.viewSwitcherEntries?.length > 1"
-                         class="o_cp_switch_buttons d-print-none btn-group order-1"
-                         t-att-class="{'w-100 w-sm-auto': env.config.viewSwitcherEntries?.length > 5}">
-                        <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
-                            <button class="btn btn-secondary o_switch_view "
-                                t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
-                                t-att-data-tooltip="view.name"
-                                t-on-click="() => this.onViewClicked(view.type)"
-                                />
+                    <t t-if="env.config.viewSwitcherEntries?.length > 1">
+                        <t t-if="env.isSmall">
+                            <Dropdown class="'o_cp_switch_buttons order-1 order-md-2'" togglerClass="'btn btn-secondary'" showCaret="true">
+                                <t t-set-slot="toggler">
+                                    <t t-set="activeView" t-value="env.config.viewSwitcherEntries.find((view) => view.active)"/>
+                                    <i class="oi-fw" t-att-class="activeView.icon"/>
+                                </t>
+                                <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
+                                    <DropdownItem onSelected="() => this.onViewClicked(view.type)" class="view.active ? 'selected' : ''">
+                                        <i class="oi-fw" t-att-class="view.icon"/>
+                                        <span class="ms-1" t-out="view.name"/>
+                                    </DropdownItem>
+                                </t>
+                            </Dropdown>
                         </t>
-                    </nav>
+                        <t t-else="">
+                            <nav class="o_cp_switch_buttons d-print-none btn-group order-1 order-md-2">
+                                <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
+                                    <button class="btn btn-secondary o_switch_view "
+                                        t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
+                                        t-att-data-tooltip="view.name"
+                                        t-on-click="() => this.onViewClicked(view.type)"
+                                        />
+                                </t>
+                            </nav>
+                        </t>
+                    </t>
                 </div>
             </div>
         </div>
@@ -53,26 +83,34 @@
         <t t-set="collapsedBreadcrumbs" t-value="breadcrumbs.slice(0, -3)"/>
         <t t-set="breadcrumb" t-value="currentBreadcrumbs[0] || {}"/>
 
-        <div t-if="collapsedBreadcrumbs.length || visiblePathBreadcrumbs.length" class="d-flex flex-column align-self-stretch justify-content-between min-w-0">
-            <ol class="breadcrumb flex-nowrap text-nowrap small lh-1">
-                <li t-if="collapsedBreadcrumbs.length" class="breadcrumb-item d-inline-flex min-w-0">
-                    <Dropdown togglerClass="'btn btn-light btn-sm p-0'">
-                        <t t-set-slot="toggler">
-                            <i class="fa fa-ellipsis-h"/>
-                        </t>
-                        <t t-foreach="collapsedBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
-                            <DropdownItem onSelected="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
-                                <t t-call="web.Breadcrumb.Name"/>
-                            </DropdownItem>
-                        </t>
-                    </Dropdown>
-                </li>
-                <t t-foreach="visiblePathBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
-                    <li class="breadcrumb-item d-inline-flex min-w-0" t-att-data-hotkey="breadcrumb_last and 'b'" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
-                        <a href="#" class="fw-bold text-truncate" t-att-data-tooltip="'Back to &quot;' + breadcrumb.name + '&quot;'"><t t-call="web.Breadcrumb.Name"/></a>
+        <div t-if="collapsedBreadcrumbs.length || visiblePathBreadcrumbs.length" class="d-flex flex-row flex-md-column align-self-stretch justify-content-between min-w-0">
+            <t t-if="env.isSmall">
+                <t t-set="previousBreadcrumb" t-value="visiblePathBreadcrumbs.slice(-1)"/>
+                <button class="o_back_button btn btn-link px-1" t-on-click.prevent="() => this.onBreadcrumbClicked(previousBreadcrumb.jsId)">
+                    <i class="fa fa-fw fa-arrow-left"/>
+                </button>
+            </t>
+            <t t-else="">
+                <ol class="breadcrumb flex-nowrap text-nowrap small lh-1">
+                    <li t-if="collapsedBreadcrumbs.length" class="breadcrumb-item d-inline-flex min-w-0">
+                        <Dropdown togglerClass="'btn btn-light btn-sm p-0'">
+                            <t t-set-slot="toggler">
+                                <i class="fa fa-ellipsis-h"/>
+                            </t>
+                            <t t-foreach="collapsedBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
+                                <DropdownItem onSelected="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
+                                    <t t-call="web.Breadcrumb.Name"/>
+                                </DropdownItem>
+                            </t>
+                        </Dropdown>
                     </li>
-                </t>
-            </ol>
+                    <t t-foreach="visiblePathBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
+                        <li class="breadcrumb-item d-inline-flex min-w-0" t-att-data-hotkey="breadcrumb_last and 'b'" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
+                            <a href="#" class="fw-bold text-truncate" t-att-data-tooltip="'Back to &quot;' + breadcrumb.name + '&quot;'"><t t-call="web.Breadcrumb.Name"/></a>
+                        </li>
+                    </t>
+                </ol>
+            </t>
             <div class="d-flex gap-1">
                 <div class="active d-flex gap-2 align-items-center min-w-0 lh-sm">
                     <span class="min-w-0 text-truncate" t-call="web.Breadcrumb.Name"/>