[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

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"/>

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);
+}

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;

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;

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;
+        }
+    }
+}

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;
     }
 }

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;
             }
         }
     }

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
      */

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">

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;