[FIX] web,web_editor: better manage borderless inputs

This commit refactors the style for borderless inputs and
adds a special class to better manage where they should be used.

closes odoo/odoo#102848

X-original-commit: 6b45cd5f3fbe0986e36401308d19214b689adc45
Related: odoo/enterprise#32609
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>
Signed-off-by: Michaël Mattiello <mcm@odoo.com>

addons/web/static/src/legacy/scss/fields.scss

@@ -33,6 +33,7 @@
 
 .o_input {
     border:$input-border-width solid var(--o-input-border-color);
+    border-width: 0 0 $input-border-width 0;
     padding: $o-input-padding-y $o-input-padding-x;
     background-color: var(--o-input-background-color, unset);
 

addons/web/static/src/views/fields/email/email_field.scss

@@ -0,0 +1,7 @@
+body:not(.o_touch_device) .o_field_email {
+    &:not(:hover):not(:focus-within) {
+        & input:not(:hover) ~ a {
+            display: none !important;
+        }
+    }
+}

addons/web/static/src/views/fields/fields.scss

@@ -1,70 +1,3 @@
 .o_field_cursor_disabled {
     cursor: not-allowed;
 }
-
-.o_field_widget:not(.o_legacy_field_widget) {
-    .o_input, .note-editable {
-        border: $input-border-width solid transparent;
-        border-width: 0 0 $input-border-width 0;
-        padding: $o-input-padding-y $o-input-padding-x;
-
-        &:hover, &:focus {
-            border-color: var(--o-input-border-color);
-        }
-    }
-
-    .o_field_many2one_selection, .o_field_many2many_selection, .o_datepicker {
-        .o_dropdown_button, .o_datepicker_button {
-            display: none;
-        }
-
-        &:hover, &:focus-within {
-            .o_dropdown_button, .o_datepicker_button {
-                display: unset;
-            }
-        }
-    }
-
-    .o_field_many2one_selection {
-        display: flex;
-        width: 100%;
-
-        .o_external_button {
-            visibility: hidden;
-        }
-
-        &:hover, &:focus-within {
-            .o_external_button {
-                visibility: visible;
-            }
-        }
-    }
-
-    &.o_field_invalid .o_input {
-        border-color: var(--o-input-border-color);
-    }
-}
-
-.o_kanban_quick_create .o_field_widget .o_input {
-    border-color: var(--o-input-border-color);
-}
-
-body:not(.o_touch_device) .o_field_widget {
-    // Phone, Email
-    &.o_field_phone, &.o_field_email {
-        &:not(:hover):not(:focus-within) {
-            & input:not(:hover) ~ a {
-                display: none !important;
-            }
-        }
-    }
-
-    // Selection
-    &.o_field_selection {
-        &:not(:hover):not(:focus-within) {
-            & select:not(:hover) {
-                background: none !important;
-            }
-        }
-    }
-}

addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss

@@ -12,10 +12,6 @@
     .o_tags_input {
         padding: 1px 0;
 
-        &:hover, &:focus-within {
-            border-color: var(--o-input-border-color);
-        }
-
         .o_tag {
             padding-left: 0.6em;
             padding-right: 0.6em;
@@ -81,6 +77,20 @@
             width: 100%;
         }
     }
+
+    &.o_form_with_borderless_input {
+        .o_field_many2many_selection {
+            .o_dropdown_button {
+                visibility: hidden;
+            }
+
+            &:hover, &:focus-within {
+                .o_dropdown_button {
+                    visibility: visible;
+                }
+            }
+        }
+    }
 }
 
 .o_form_statusbar .o_field_tags {

addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss

@@ -3,10 +3,6 @@
 
     .o_tags_input {
         padding: 1px 0;
-
-        &:hover, &:focus-within {
-            border-color: var(--o-input-border-color);
-        }
     }
 
     .o_field_many2many_selection {

addons/web/static/src/views/fields/many2one/many2one_field.scss

@@ -0,0 +1,13 @@
+.o_form_view.o_form_with_borderless_input {
+    .o_field_many2one_selection {
+        .o_external_button, .o_dropdown_button {
+            visibility: hidden;
+        }
+
+        &:hover, &:focus-within {
+            .o_external_button, .o_dropdown_button {
+                visibility: visible;
+            }
+        }
+    }
+}

addons/web/static/src/views/fields/phone/phone_field.scss

@@ -0,0 +1,7 @@
+body:not(.o_touch_device) .o_field_phone {
+    &:not(:hover):not(:focus-within) {
+        & input:not(:hover) ~ a {
+            display: none !important;
+        }
+    }
+}

addons/web/static/src/views/fields/selection/selection_field.scss

@@ -0,0 +1,7 @@
+body:not(.o_touch_device) .o_field_selection {
+    &:not(:hover):not(:focus-within) {
+        & select:not(:hover) {
+            background: none !important;
+        }
+    }
+}

addons/web/static/src/views/form/form_controller.js

@@ -15,6 +15,7 @@ import { standardViewProps } from "@web/views/standard_view_props";
 import { isX2Many } from "@web/views/utils";
 import { useViewButtons } from "@web/views/view_button/view_button_hook";
 import { useSetupView } from "@web/views/view_hook";
+import { hasTouch } from "@web/core/browser/feature_detection";
 import { FormStatusIndicator } from "./form_status_indicator/form_status_indicator";
 
 const { Component, onWillStart, useEffect, useRef, onRendered, useState, toRaw } = owl;
@@ -466,6 +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();
         return result;
     }
 }

addons/web/static/src/views/form/form_controller.scss

@@ -208,6 +208,33 @@
         flex: 1 1 auto;
     }
 
+    &.o_form_with_borderless_input {
+        .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 {
+            border-color: var(--o-input-border-color);
+        }
+
+        .o_datepicker {
+            .o_datepicker_button {
+                visibility: hidden;
+            }
+
+            &:hover, &:focus-within {
+                .o_datepicker_button {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+
     // No sheet
     &.o_form_nosheet, .o_form_nosheet {
         @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding);

addons/web/static/src/webclient/settings_form_view/settings_form_controller.js

@@ -43,6 +43,12 @@ 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_editor/static/src/scss/web_editor.backend.scss

@@ -44,6 +44,17 @@
     }
 }
 
+.o_form_view.o_form_with_borderless_input {
+    .o_field_html .note-editable {
+        border: $input-border-width solid transparent;
+        border-width: 0 0 $input-border-width 0;
+
+        &:hover, &:focus {
+            border-color: var(--o-input-border-color);
+        }
+    }
+}
+
 .o_field_widgetTextHtml_fullscreen {
     .o_field_mass_mailing_html.o_form_fullscreen_ancestor iframe {
         position: absolute !important;