From 93790839b636fcd5bca669c258ec3df708662f33 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Wed, 18 Jan 2023 11:44:51 +0000
Subject: [PATCH] [FIX] web,website,point_of_sale: settings' header alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit is a follow-up of odoo/odoo@bb819f6a5c8f6e85eab865efd2c4d017a6258c33.

Even if the fix above worked around having the settinggs header's
content out of screen on smaller screen, the solution was ugly and was
meant to be improved later on.

This commit reworks the HeaderSetting's template and simplifies it to
properly fix this issue.

closes odoo/odoo#110530

X-original-commit: 0ab079664e380e5e77440e290ec604e3830108bb
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../views/res_config_settings_views.xml       |  4 ++--
 .../settings/setting_header.xml               | 20 ++++++-----------
 .../settings_form_view_tests.js               | 22 +++++++++----------
 .../views/res_config_settings_views.xml       |  2 +-
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/addons/point_of_sale/views/res_config_settings_views.xml b/addons/point_of_sale/views/res_config_settings_views.xml
index bdb5a60e3f4..0500dab0574 100644
--- a/addons/point_of_sale/views/res_config_settings_views.xml
+++ b/addons/point_of_sale/views/res_config_settings_views.xml
@@ -20,8 +20,8 @@
 
                 <app data-string="Point of sale" string="Point of Sale" name="point_of_sale" groups="point_of_sale.group_pos_manager">
                     <setting type="header" string="Point of Sale">
-                        <field name="pos_config_id" class="col" options="{'no_open': True, 'no_create': True}" title="Settings on this page will apply to this point of sale."/>
-                        <button name="action_pos_config_create_new" type="object" string="+ New Shop" class="col btn-link ms-2 text-nowrap" style="line-height: 0.5;"/>
+                        <field name="pos_config_id" options="{'no_open': True, 'no_create': True}" title="Settings on this page will apply to this point of sale."/>
+                        <button name="action_pos_config_create_new" type="object" string="+ New Shop" class="btn btn-link"/>
                     </setting>
 
                     <div class="o_view_nocontent" attrs="{'invisible': [('pos_config_id', '!=', False)]}">
diff --git a/addons/web/static/src/webclient/settings_form_view/settings/setting_header.xml b/addons/web/static/src/webclient/settings_form_view/settings/setting_header.xml
index f4a1de86c71..c65c5b178a6 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings/setting_header.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings/setting_header.xml
@@ -1,19 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="web.HeaderSetting" owl="1">
-        <div class="app_settings_header row my-0 ms-0 mw-100 bg-warning bg-opacity-25">
-            <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
-                <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
-                    <div class="content-group">
-                        <div class="row flex-row flex-nowrap mt8 align-items-center">
-                            <label class="o_form_label col ps-0 text-nowrap" t-att-for="props.fieldId" >
-                                <t t-esc="labelString"/>
-                            </label>
-                            <t t-slot="fieldSlot"/>
-                            <t t-slot="default"/>
-                        </div>
-                    </div>
-                </div>
+        <div class="app_settings_header d-flex flex-column flex-md-row align-items-baseline gap-1 gap-md-5 py-3 bg-warning bg-opacity-25">
+            <label class="o_form_label" t-att-for="props.fieldId">
+                <t t-esc="labelString"/>
+            </label>
+            <div class="input-group align-items-baseline w-auto o_field_highlight">
+                <t t-slot="fieldSlot"/>
+                <t t-slot="default"/>
             </div>
         </div>
     </t>
diff --git a/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js b/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
index ba3234a46b6..1550ea97d19 100644
--- a/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
+++ b/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
@@ -74,7 +74,7 @@ QUnit.module("SettingsFormView", (hooks) => {
                     <app string="CRM" name="crm">
                         <setting type="header" string="Foo">
                             <field name="foo" title="Foo?."/>
-                            <button name="nameAction" type="object" string="Button" class="col-auto btn-link ms-2 text-nowrap" style="line-height: 0.5;"/>
+                            <button name="nameAction" type="object" string="Button" class="btn btn-link"/>
                         </setting>
                         <block title="Title of group Bar">
                             <setting help="this is bar" documentation="/applications/technical/web/settings/this_is_a_test.html">
@@ -137,7 +137,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
         const docLinks = [...target.querySelectorAll(".o_setting_box a")];
         assert.strictEqual(docLinks.length, 2);
@@ -159,7 +159,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsNone(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "b");
@@ -184,7 +184,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "Big");
@@ -203,7 +203,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "Manage Us");
@@ -222,7 +222,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "group Bar");
@@ -236,7 +236,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "different");
@@ -250,7 +250,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "bx");
@@ -262,7 +262,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsNone(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "Fo");
@@ -281,7 +281,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsOnce(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
 
         await editSearch(target, "Hide");
@@ -300,7 +300,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         );
         assert.containsNone(
             target,
-            ".app_settings_block:not(.d-none) .app_settings_header .o_setting_box"
+            ".app_settings_block:not(.d-none) .app_settings_header"
         );
     });
 
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index 95c7e528ff2..7a3f7df1865 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -22,7 +22,7 @@
                 <app data-string="Website" string="Website" name="website" groups="website.group_website_designer">
                     <setting type="header" string="Settings of Website">
                         <field name="website_id" options="{'no_open': True, 'no_create': True}" title="Settings on this page will apply to this website"/>
-                        <button name="action_website_create_new" type="object" string="+ New Website" class="col-auto btn-link ms-2 text-nowrap" style="line-height: 0.5;"/>
+                        <button name="action_website_create_new" type="object" string="+ New Website" class="btn btn-link"/>
                     </setting>
                     <block title="Website Info" id="website_info_settings">
                         <setting>