From a87ac2ac36b0c967b1c36e1d436967fdb4533822 Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Mon, 19 Sep 2022 13:33:22 +0000
Subject: [PATCH] [FIX] web: fix field selector popover style

Before this commit, the popover was incorrectly
positionned because of the style of the legacy widget.
The legacy widget added some rules to add margin and an arrow
that the new component does not need.

closes odoo/odoo#101097

X-original-commit: bd4862774264c5169aa2dcf4cd80908c2f4c71bb
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../model_field_selector.scss                 | 42 +++++++++++++++++++
 .../model_field_selector_popover.scss         | 11 ++++-
 addons/web/static/src/legacy/xml/base.xml     |  4 +-
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_selector.scss

diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector.scss b/addons/web/static/src/core/model_field_selector/model_field_selector.scss
new file mode 100644
index 00000000000..b4088d32cf0
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector.scss
@@ -0,0 +1,42 @@
+.o_field_selector:not(.o_legacy_field_selector) {
+    position: relative;
+
+    > .o_field_selector_value {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        height: 100%;
+        min-height: 20px; // needed when there is no value in it and used standalone
+        &:active, &:focus, &:active:focus {
+            outline: none;
+        }
+
+        > .o_field_selector_chain_part {
+            padding: 0px 1px;
+            border: 1px solid darken($o-brand-lightsecondary, 10%);
+            background: $o-brand-lightsecondary;
+            margin-bottom: 1px;
+        }
+        > i {
+            align-self: center;
+            margin: 0 2px;
+            font-size: 10px;
+        }
+    }
+    > .o_field_selector_controls {
+        @include o-position-absolute(0, 0, 1px);
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    &.o_edit_mode {
+        > .o_field_selector_controls::after {
+            @include o-caret-down;
+        }
+
+        > .o_field_selector_popover {
+            @include o-position-absolute($top: 100%, $left: 0);
+        }
+    }
+}
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
index 83d0972e3a2..845d8278a96 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
@@ -1,7 +1,11 @@
+.o_popover_field_selector .popover-arrow::after {
+    border-bottom-color: map-get($theme-colors, 'primary');
+}
 
-.o_field_selector_popover {
+.o_field_selector_popover:not(.o_legacy_field_selector_popover) {
     width: 265px;
     background: white;
+    --o-input-background-color: white;
 
     &:focus {
         outline: none;
@@ -22,7 +26,10 @@
         .o_field_selector_search {
             padding-right: 0.4rem;
             > .o_input {
+                font-size: 13px;
                 padding: 5px 0.4rem;
+                text-align: left;
+                line-height: normal;
             }
         }
         .o_field_selector_popover_option {
@@ -77,7 +84,9 @@
         padding: 5px 0.4em;
 
         > input {
+            font-size: 13px;
             width: 100%;
+            padding: 0 0.4rem;
         }
     }
 }
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 0169e833d9f..282924134c1 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -909,13 +909,13 @@
         </t>
     </div>
 </div>
-<div aria-atomic="true" t-name="ModelFieldSelector" t-attf-class="o_field_selector#{!widget.options.readonly ? ' o_edit_mode o_input' : ''}">
+<div aria-atomic="true" t-name="ModelFieldSelector" t-attf-class="o_field_selector o_legacy_field_selector#{!widget.options.readonly ? ' o_edit_mode o_input' : ''}">
     <div class="o_field_selector_value" tabindex="0"/>
     <div class="o_field_selector_controls" tabindex="0">
         <i role="alert" class="fa fa-exclamation-triangle o_field_selector_warning d-none" title="Invalid field chain" aria-label="Invalid field chain"/>
     </div>
 </div>
-<div  t-name="ModelFieldSelector.popover" class="o_field_selector_popover d-none" tabindex="0">
+<div  t-name="ModelFieldSelector.popover" class="o_field_selector_popover o_legacy_field_selector_popover d-none" tabindex="0">
     <div class="o_field_selector_popover_header text-center">
         <i class="fa fa-arrow-left o_field_selector_popover_option o_field_selector_prev_page" title="Previous" role="img" aria-label="Previous"/>
         <div class="o_field_selector_title"/>