From cc138a684ef8d2205ca7e872f29d64a0d665f11b Mon Sep 17 00:00:00 2001 From: "Michael (mcm)" Date: Wed, 5 Oct 2022 11:33:28 +0000 Subject: [PATCH] [FIX] web,web_editor: better manage borderless inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Signed-off-by: Michaël Mattiello --- addons/web/static/src/legacy/scss/fields.scss | 1 + .../src/views/fields/email/email_field.scss | 7 ++ .../web/static/src/views/fields/fields.scss | 67 ------------------- .../many2many_tags/many2many_tags_field.scss | 18 +++-- .../many2many_tags_avatar_field.scss | 4 -- .../views/fields/many2one/many2one_field.scss | 13 ++++ .../src/views/fields/phone/phone_field.scss | 7 ++ .../fields/selection/selection_field.scss | 7 ++ .../static/src/views/form/form_controller.js | 2 + .../src/views/form/form_controller.scss | 27 ++++++++ .../settings_form_controller.js | 6 ++ .../static/src/scss/web_editor.backend.scss | 11 +++ 12 files changed, 95 insertions(+), 75 deletions(-) create mode 100644 addons/web/static/src/views/fields/email/email_field.scss create mode 100644 addons/web/static/src/views/fields/many2one/many2one_field.scss create mode 100644 addons/web/static/src/views/fields/phone/phone_field.scss create mode 100644 addons/web/static/src/views/fields/selection/selection_field.scss diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss index 1b486e5b29c..7fffb1ba174 100644 --- a/addons/web/static/src/legacy/scss/fields.scss +++ b/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); diff --git a/addons/web/static/src/views/fields/email/email_field.scss b/addons/web/static/src/views/fields/email/email_field.scss new file mode 100644 index 00000000000..ab369744d4e --- /dev/null +++ b/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; + } + } +} diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss index 3f08228f97c..d877330e9e6 100644 --- a/addons/web/static/src/views/fields/fields.scss +++ b/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; - } - } - } -} 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 dc9857c039e..6baf5020ac9 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 @@ -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 { diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss index 21d169e6cfb..490a1cd8307 100644 --- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss +++ b/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 { diff --git a/addons/web/static/src/views/fields/many2one/many2one_field.scss b/addons/web/static/src/views/fields/many2one/many2one_field.scss new file mode 100644 index 00000000000..8f442eade70 --- /dev/null +++ b/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; + } + } + } +} diff --git a/addons/web/static/src/views/fields/phone/phone_field.scss b/addons/web/static/src/views/fields/phone/phone_field.scss new file mode 100644 index 00000000000..2c8e853964a --- /dev/null +++ b/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; + } + } +} diff --git a/addons/web/static/src/views/fields/selection/selection_field.scss b/addons/web/static/src/views/fields/selection/selection_field.scss new file mode 100644 index 00000000000..169f9227b75 --- /dev/null +++ b/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; + } + } +} diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js index 8d834872154..58afdafad45 100644 --- a/addons/web/static/src/views/form/form_controller.js +++ b/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; } } diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss index 53cbd718df1..f133526f672 100644 --- a/addons/web/static/src/views/form/form_controller.scss +++ b/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); 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 b2ef535225a..17d4ee9106d 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,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 */ 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 d5acafaf0f5..71043923ddd 100644 --- a/addons/web_editor/static/src/scss/web_editor.backend.scss +++ b/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;