[FW][MERGE] UI css fixes
Followup of #102259 Instead of adding a class to remove field borders, we want the opposite: hide the borders by default, except when specified specifically with a `.o_field_highlight` class (on a parent or the field itself). This makes it much easier to add field borders on specific parts of the ui (just add the class in the template), rather than having to _remove_ the class through a js override, which is far less discoverable. I converted all the new rules to work opposite as before, same for the JS logic which added the class based on mobile device detection (size + touch support). closes odoo/odoo#102977 Forward-port-of: odoo/odoo#102823 Signed-off-by: Michaël Mattiello <mcm@odoo.com> Signed-off-by: Bouvy Damien (dbo) <dbo@odoo.com>
This commit is contained in:
Odoo's Mergebot
+1
-1
@@ -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"/>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.o_form_with_borderless_input {
|
||||
&:not(.o_field_highlight) {
|
||||
.o_field_many2many_selection {
|
||||
.o_dropdown_button {
|
||||
visibility: hidden;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
body:not(.o_touch_device) .o_field_url {
|
||||
&:not(:hover):not(:focus-within) {
|
||||
& input:not(:hover) ~ a {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -471,7 +471,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,29 +202,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -523,6 +523,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
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -39,7 +39,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;
|
||||
|
||||
Reference in New Issue
Block a user