From 68facf03dcb53de4f0c2ae591fb981a92e8835c6 Mon Sep 17 00:00:00 2001
From: Damien Bouvy <dbo@odoo.com>
Date: Mon, 10 Oct 2022 11:03:55 +0200
Subject: [PATCH 1/3] [FIX] dashboard, web: o_field_highlight class

Add a new .o_field_highlight class which can be used on fields and field
containers to force having a border on fields (e.g. in places where they
are heavily used inline, like Settings, or where it might not be clear
that you are using a form and that these are fields; e.g. sidepanel,
etc.

This class is automatically added when the device size goes below the
XSS breakpoint, or when the device has touch input (our best metric for
mobile device detection, where hovering is not possible).

X-original-commit: 0f0c8e3b9f7c42c5126dc49d3378d41ad76afbf3
---
 .../dashboard_action/dashboard_action.xml     |  2 +-
 .../web/static/src/views/fields/fields.scss   |  8 +++++
 .../many2many_tags/many2many_tags_field.scss  |  2 +-
 .../views/fields/many2one/many2one_field.scss |  2 +-
 .../src/views/fields/url/url_field.scss       |  7 ++++
 .../static/src/views/form/form_controller.js  |  2 +-
 .../src/views/form/form_controller.scss       | 36 +++++++++----------
 .../settings_form_controller.js               |  6 ----
 .../settings_form_view/settings_form_view.xml |  2 +-
 .../static/src/scss/web_editor.backend.scss   |  2 +-
 10 files changed, 39 insertions(+), 30 deletions(-)
 create mode 100644 addons/web/static/src/views/fields/url/url_field.scss

diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
index 22b52a9c03d..dae68214c19 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
-    <div t-name="spreadsheet_dashboard.DashboardAction" owl="1" class="o_action o_spreadsheet_dashboard_action">
+    <div t-name="spreadsheet_dashboard.DashboardAction" owl="1" class="o_action o_spreadsheet_dashboard_action o_field_highlight">
         <ControlPanel display="controlPanelDisplay">
             <t t-set-slot="control-panel-top-right">
                 <t t-set="status" t-value="state.activeDashboard and state.activeDashboard.status"/>
diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss
index d877330e9e6..b7dd74edeb4 100644
--- a/addons/web/static/src/views/fields/fields.scss
+++ b/addons/web/static/src/views/fields/fields.scss
@@ -1,3 +1,11 @@
 .o_field_cursor_disabled {
     cursor: not-allowed;
 }
+
+// .o_field_highlight is used in several types of view to force fields
+// to be displayed with a bottom border even when not hovered (e.g. added
+// by mobile detection, in several specific places such as spreadsheet or
+// knowledge sidebars, settings view, kanban quick create (not a form view), etc.)
+.o_field_highlight .o_field_widget .o_input, .o_field_highlight.o_field_widget .o_input {
+    border-color: var(--o-input-border-color);
+}
diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss
index 6baf5020ac9..97f9bf8b4ca 100644
--- a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss
+++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss
@@ -78,7 +78,7 @@
         }
     }
 
-    &.o_form_with_borderless_input {
+    &:not(.o_field_highlight) {
         .o_field_many2many_selection {
             .o_dropdown_button {
                 visibility: hidden;
diff --git a/addons/web/static/src/views/fields/many2one/many2one_field.scss b/addons/web/static/src/views/fields/many2one/many2one_field.scss
index 8f442eade70..00b8d1ae9f5 100644
--- a/addons/web/static/src/views/fields/many2one/many2one_field.scss
+++ b/addons/web/static/src/views/fields/many2one/many2one_field.scss
@@ -1,4 +1,4 @@
-.o_form_view.o_form_with_borderless_input {
+.o_form_view:not(.o_field_highlight) {
     .o_field_many2one_selection {
         .o_external_button, .o_dropdown_button {
             visibility: hidden;
diff --git a/addons/web/static/src/views/fields/url/url_field.scss b/addons/web/static/src/views/fields/url/url_field.scss
new file mode 100644
index 00000000000..0c675fd21af
--- /dev/null
+++ b/addons/web/static/src/views/fields/url/url_field.scss
@@ -0,0 +1,7 @@
+body:not(.o_touch_device) .o_field_url {
+    &:not(:hover):not(:focus-within) {
+        & input:not(:hover) ~ a {
+            display: none !important;
+        }
+    }
+}
diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js
index 58afdafad45..fcedb2f123c 100644
--- a/addons/web/static/src/views/form/form_controller.js
+++ b/addons/web/static/src/views/form/form_controller.js
@@ -467,7 +467,7 @@ export class FormController extends Component {
         if (this.props.className) {
             result[this.props.className] = true;
         }
-        result["o_form_with_borderless_input"] = size > SIZES.SM && !hasTouch();
+        result["o_field_highlight"] = size < SIZES.SM || hasTouch();
         return result;
     }
 }
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 19dfb92b5a8..73584d29c9c 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -208,29 +208,29 @@
         flex: 1 1 auto;
     }
 
-    &.o_form_with_borderless_input {
-        .o_input {
-            border-color: transparent;
-            padding: $o-input-padding-y $o-input-padding-x;
+    // rules for fields borders: only on hover/focus by default
+    // except when used with o_field_highlight (on parent or on the field)
+    .o_input {
+        border-color: transparent;
+        padding: $o-input-padding-y $o-input-padding-x;
 
-            &:hover, &:focus {
-                border-color: var(--o-input-border-color);
-            }
-        }
-
-        &.o_field_invalid .o_input {
+        &:hover, &:focus {
             border-color: var(--o-input-border-color);
         }
+    }
 
-        .o_datepicker {
+    &.o_field_invalid .o_input {
+        border-color: var(--o-input-border-color);
+    }
+
+    .o_datepicker {
+        .o_datepicker_button {
+            visibility: hidden;
+        }
+
+        &:hover, &:focus-within {
             .o_datepicker_button {
-                visibility: hidden;
-            }
-
-            &:hover, &:focus-within {
-                .o_datepicker_button {
-                    visibility: visible;
-                }
+                visibility: visible;
             }
         }
     }
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_controller.js b/addons/web/static/src/webclient/settings_form_view/settings_form_controller.js
index 17d4ee9106d..b2ef535225a 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_controller.js
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_controller.js
@@ -43,12 +43,6 @@ export class SettingsFormController extends formView.Controller {
         this.initialApp = "module" in this.props.context && this.props.context.module;
     }
 
-    get className() {
-        const result = super.className;
-        result["o_form_with_borderless_input"] = false;
-        return result;
-    }
-
     /**
      * @override
      */
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 b764893b1c9..11dfe5b92ba 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
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="web.SettingsFormView" t-inherit="web.FormView" t-inherit-mode="primary" owl="1">
         <xpath expr="./div[@t-ref='root']" position="attributes">
-            <attribute name="class">o-settings-form-view</attribute>
+            <attribute name="class">o-settings-form-view o_field_highlight</attribute>
         </xpath>
         <xpath expr="//Layout" position="inside">
             <t t-set-slot="control-panel-top-right">
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index 71043923ddd..9cc3ec651f4 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -44,7 +44,7 @@
     }
 }
 
-.o_form_view.o_form_with_borderless_input {
+.o_form_view:not(o_field_highlight) {
     .o_field_html .note-editable {
         border: $input-border-width solid transparent;
         border-width: 0 0 $input-border-width 0;

From a9a7c9b30aa357bfbe82b1addf24e556fc1b3025 Mon Sep 17 00:00:00 2001
From: Damien Bouvy <dbo@odoo.com>
Date: Mon, 10 Oct 2022 11:06:51 +0200
Subject: [PATCH 2/3] [FIX] web: make notebook html fields visually consistent

No border on html fields in notebook tabs.

X-original-commit: afac4299f1d42b03b7ff080d60853d357dd75df1
---
 addons/web/static/src/views/form/form_controller.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 73584d29c9c..da813862754 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -529,6 +529,9 @@
 
                 > .o_field_html > .note-editable {
                     min-height: 180px;
+                    &:hover, &:focus {
+                        border-color: transparent;
+                    }
                 }
                 > :first-child {
                     // Reset margin to 0 and use tab-pane's padding

From efb752123ebb62feb4fffefdf3e0fee164c1a603 Mon Sep 17 00:00:00 2001
From: Damien Bouvy <dbo@odoo.com>
Date: Mon, 10 Oct 2022 11:45:31 +0200
Subject: [PATCH 3/3] [IMP] web: unify o_field_higlight usage

X-original-commit: 5f8521342fbad560d9b492cedc9bd9360aa445d6
---
 .../web/static/src/views/kanban/kanban_record_quick_create.xml  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
index 82641530d9b..e1fb0984c82 100644
--- a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.KanbanRecordQuickCreate" owl="1">
         <div
-            class="o_kanban_quick_create shadow"
+            class="o_kanban_quick_create o_field_highlight shadow"
             t-att-class="{ o_disabled: state.disabled, 'w-100 mx-0': props.listIsGrouped }"
             t-ref="root"
         >