From dcf06d45cbb70fe3530e1adaa70f5090c7baf7f1 Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Fri, 13 Jan 2023 15:48:59 +0000
Subject: [PATCH] [FIX] web: settings control panel's layout on small screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The custom control panel for Settings form view has radically changed
and the old CSS rules (`.o_settings_title`, `.o_setting_search`) didn't
apply anymore, so we remove it.

Note that the form view uses a custom control panel `FormControlPanel`
but the settings form view uses the normal one: `ControlPanel`.

In this commit, we adapt the CSS to reflect the normal control panel
(e.g. the one used by the Kanban view)

Also note the differance between the old version and now:
* before (< Odoo 15.2) the input search was focused when the app was
opened and there wasn't any title
* after (>= Odoo 16) we have harmonized the search to match the other
control panel, so we have to click on the magnifying glass to show
the search input.

Steps to reproduce:
* Open Odoo on a small screen (e.g. on Mobile)
* Open the Settings app => BUG the magnifying glass isn't at the right
position.

closes odoo/odoo#110043

X-original-commit: 91ab277ef66a2ca6b34c13fcba7197f18c50aab0
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
---
 .../search/control_panel/control_panel.scss   |  3 ---
 .../form/control_panel/form_control_panel.xml |  4 +--
 .../src/views/form/form_controller.scss       |  8 ------
 .../settings_form_view.scss                   | 27 -------------------
 .../settings_form_view/settings_form_view.xml |  4 +--
 5 files changed, 4 insertions(+), 42 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 72e19f3fbaa..ee351727c60 100644
--- a/addons/web/static/src/search/control_panel/control_panel.scss
+++ b/addons/web/static/src/search/control_panel/control_panel.scss
@@ -16,9 +16,6 @@
     }
 
     @include media-breakpoint-down(md) {
-        padding-right: 0;
-        width: 100%;
-
         > div.o_cp_bottom {
             min-height: auto;
         }
diff --git a/addons/web/static/src/views/form/control_panel/form_control_panel.xml b/addons/web/static/src/views/form/control_panel/form_control_panel.xml
index 1b20b95cbc4..a05ac2c6dfd 100644
--- a/addons/web/static/src/views/form/control_panel/form_control_panel.xml
+++ b/addons/web/static/src/views/form/control_panel/form_control_panel.xml
@@ -3,8 +3,8 @@
 
     <t t-name="web.FormControlPanel" owl="1">
         <div class="o_control_panel" t-ref="root">
-            <div t-if="display['top']" class="o_cp_top">
-                <div class="o_cp_top_left d-flex flex-grow-1 align-items-center">
+            <div t-if="display['top']" class="o_cp_top" t-att-class="{ 'flex-wrap': env.isSmall }">
+                <div class="o_cp_top_left d-flex flex-grow-1 align-items-center" t-att-class="{ 'w-100': env.isSmall }">
                     <t t-if="display['top-left']">
                         <t t-slot="control-panel-breadcrumb">
                             <t t-if="env.isSmall">
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 556ea325554..f86ee69aef4 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -932,14 +932,6 @@
         }
     }
     @include media-breakpoint-down(md) {
-        .o_control_panel {
-            padding-right: 16px;
-
-            > div.o_cp_top {
-                flex-flow: column;
-            }
-        }
-
         .o_cp_buttons {
             width: 100%;
             div, .o-kanban-button-new {
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
index 798db569b36..1eeaa3276b4 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
@@ -91,33 +91,6 @@
            display: flex;
            flex-flow: row wrap;
            width: 100%;
-
-           .o_settings_title, .o_setting_search {
-               flex: 1 0 auto;
-               width: map-get($o-extra-grid-breakpoints, vsm) / 2;
-           }
-
-           .o_setting_search {
-               position: relative;
-
-               .searchInput {
-                   border: 0px;
-                   max-width: 400px;
-                   border-bottom: 1px solid $border-color;
-                   box-shadow: none;
-               }
-
-               .searchIcon {
-                   @include o-position-absolute($right: 0);
-                   color: map-get($grays, '700');
-               }
-
-               &:focus-within {
-                   .searchInput {
-                       border-bottom-color: $primary;
-                   }
-               }
-           }
        }
 
        .o_form_statusbar {
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
index 194615a3bb0..8bc38404be3 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
@@ -6,8 +6,8 @@
         </xpath>
         <xpath expr="//Layout" position="inside">
             <t t-set-slot="control-panel-top-right">
-                <div class="o_cp_searchview" role="search">
-                    <div class="o_searchview" role="search" aria-autocomplete="list">
+                <div class="o_cp_searchview d-flex flex-grow-1" role="search">
+                    <div class="o_searchview pb-1 align-self-center border-bottom flex-grow-1" role="search" aria-autocomplete="list">
                         <i class="o_searchview_icon oi oi-search" role="img" aria-label="Search..." title="Search..." />
                         <div class="o_searchview_input_container">
                             <input type="text" class="o_searchview_input" accesskey="Q" placeholder="Search..." role="searchbox" t-model="searchState.value" t-ref="autofocus"/>