Skip to content

Commit cae1a50

Browse files
OCA-git-botOCA-git-bot
committed
Merge PR #3322 into 18.0
Signed-off-by legalsylvain
2 parents 63ab757 + 5f2789c commit cae1a50

File tree

6 files changed

+157
-71
lines changed

6 files changed

+157
-71
lines changed

‎web_theme_classic/README.rst‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ Contributors
8080
------------
8181

8282
- Sylvain LE GAL (https://www.twitter.com/legalsylvain)
83+
- `Pyxiris <https://github.com/Pyxiris>`__
84+
85+
- `Liam Noonan <https://github.com/ljmnoonan>`__
8386

8487
Maintainers
8588
-----------

‎web_theme_classic/__manifest__.py‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,13 @@
1818
"web.assets_backend": [
1919
"/web_theme_classic/static/src/scss/web_theme_classic.scss",
2020
],
21+
"web.assets_web_dark": [
22+
(
23+
"before",
24+
"/web_theme_classic/static/src/scss/web_theme_classic.scss",
25+
"/web_theme_classic/static/src/scss/web_theme_classic.dark.scss",
26+
),
27+
],
2128
},
2229
"installable": True,
2330
"application": True,

‎web_theme_classic/readme/CONTRIBUTORS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
- Sylvain LE GAL (<https://www.twitter.com/legalsylvain>)
2+
- [Pyxiris](https://github.com/Pyxiris)
3+
- [Liam Noonan](https://github.com/ljmnoonan)

‎web_theme_classic/static/description/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,10 @@ <h2><a class="toc-backref" href="#toc-entry-3">Authors</a></h2>
418418
<h2><a class="toc-backref" href="#toc-entry-4">Contributors</a></h2>
419419
<ul class="simple">
420420
<li>Sylvain LE GAL (<a class="reference external" href="https://www.twitter.com/legalsylvain">https://www.twitter.com/legalsylvain</a>)</li>
421+
<li><a class="reference external" href="https://github.com/Pyxiris">Pyxiris</a><ul>
422+
<li><a class="reference external" href="https://github.com/ljmnoonan">Liam Noonan</a></li>
423+
</ul>
424+
</li>
421425
</ul>
422426
</div>
423427
<div class="section" id="maintainers">

‎web_theme_classic/static/src/scss/web_theme_classic.dark.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
$wtc-input-border-color-focus: rgba($o-action, 0.5) !default;
2+
$wtc-input-background-color-required: mix($o-action, transparent, 10) !default;

‎web_theme_classic/static/src/scss/web_theme_classic.scss‎

Lines changed: 139 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,105 +2,173 @@
22
Variables
33
************************************************************/
44

5-
$input-border-color: #cccccc;
6-
$input-border-color-focus: #71639e;
7-
$input-background-color-required: #d2d2ff;
8-
$input-color-placeholder-required: #6c757d;
9-
10-
$button-border-color: #dee2e6;
5+
/* The wtc prefix keeps these from conflicting with bootstrap vars*/
6+
$wtc-input-border-color: $o-gray-500 !default;
7+
$wtc-input-border-color-focus: $o-community-color !default;
8+
$wtc-input-color-required: $o-gray-900 !default;
9+
// Note, it is very important that this be a mix with transparent! The reason is that the normal $o-input-bg
10+
// is transparent and so some styles are built assuming this. The most notable examples are monetary fields
11+
// which are set up like this:
12+
// <div name="list_price" class="o_field_widget o_required_modifier o_field_monetary oe_inline">
13+
// <div class="text-nowrap d-inline-flex w-100 align-items-baseline position-relative">
14+
// <span class="o_input position-absolute pe-none d-flex w-100">
15+
// <span>$&nbsp;</span>
16+
// <span class="opacity-0 d-inline-block overflow-hidden mw-100 o_monetary_ghost_value">0.00</span>
17+
// </span>
18+
// <span class="opacity-0">$&nbsp;</span>
19+
// <input class="o_input flex-grow-1 flex-shrink-1" autocomplete="off" id="list_price_0" type="text">
20+
// </div>
21+
// </div>
22+
// So a non transparent background on the <input> element blocks off the display. so it is much better to immitate $o-input-invalid-bg
23+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/scss/primary_variables.scss#L170
24+
$wtc-input-background-color-required: mix(#0000ff, transparent, 10) !default;
25+
$wtc-input-color-placeholder-required: #6c757d !default;
1126

1227
/***********************************************************
13-
Form View : Handle Fields Borders
28+
Handle Borders
1429
************************************************************/
1530

16-
.o_form_view {
17-
.o_input,
18-
.o_field_html > .note-editable {
19-
/* Add border for all editable fields */
20-
border: 1px solid $input-border-color !important;
21-
border-radius: 3px;
22-
23-
/* add darker border on focus */
24-
&:focus {
25-
border-color: $input-border-color-focus !important;
26-
}
27-
}
28-
29-
.o_field_many2many_selection {
30-
.o_input {
31-
/* Prevent to have double border for many2many tags input fields */
32-
border: 0px solid !important;
33-
}
31+
/* Odoo sets this without consideration for nesting, as occurs with custom properties.
32+
* https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L36C1-L39C2
33+
* We fix that here. We also use our special toned down version of $o-action for full borders */
34+
.o_field_widget:focus-within {
35+
&:has(.o_field_widget) {
36+
@include print-variable(o-input-border-color, $wtc-input-border-color);
37+
@include print-variable(o-caret-color, $input-color);
3438
}
39+
@include print-variable(o-input-border-color, $wtc-input-border-color-focus);
40+
@include print-variable(o-caret-color, $wtc-input-border-color-focus);
41+
}
3542

36-
.o_field_monetary {
37-
/* Prevent to have double border for monetary fields */
38-
.o_input {
39-
border: 0px solid !important;
40-
}
43+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L50C1-L65C2
44+
.o_input {
45+
border: $input-border-width solid var(--o-input-border-color);
46+
border-radius: 3px;
47+
}
4148

42-
#list_price_0 {
43-
border: 1px solid $input-border-color !important;
44-
border-radius: 3px;
49+
// An odd case. The search input when adding a new user to an existing task from kanban
50+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss#L62C9-L62C55
51+
.o_m2m_tags_avatar_field_popover .o-autocomplete .o-autocomplete--input.o_input {
52+
border-width: $input-border-width;
53+
padding-left: $o-input-padding-x;
54+
}
4555

46-
&:focus {
47-
border-color: $input-border-color-focus !important;
48-
}
56+
// All these selectors are probably not necessary, but just following:
57+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/properties_field.scss#L12C1-L45C2
58+
.o_field_properties,
59+
.o_field_properties.o_field_invalid,
60+
.o_property_field_popover {
61+
.o_input:focus,
62+
.dropdown:focus ~ .o_dropdown_button,
63+
.dropdown:focus-within ~ .o_dropdown_button,
64+
.o_input:focus ~ .o_datepicker_button,
65+
.o_dropdown_button:focus {
66+
@include print-variable(o-input-border-color, $wtc-input-border-color-focus);
67+
* {
68+
@include print-variable(
69+
o-input-border-color,
70+
$wtc-input-border-color-focus
71+
);
4972
}
5073
}
5174
}
5275

53-
/***********************************************************
54-
Form View : Handle Button Borders
55-
************************************************************/
76+
// Give tag type custom properties input borders too. Note the code we are overriding
77+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/property_value.scss#L43C1-L46C2
78+
.o_field_property_many2many_value:not(.readonly),
79+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/property_tags.scss#L29C1-L32C2
80+
.o_field_property_tag:not(.readonly) {
81+
border: $input-border-width solid var(--o-input-border-color);
82+
border-radius: 3px;
83+
}
5684

5785
.o_form_view {
58-
.btn-light {
59-
border-color: $button-border-color;
86+
/* Odoo sets borders to transparent unless hovered or focused. We override this.
87+
* https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/form/form_controller.scss#L202C1-L204C6 */
88+
&:not(.o_field_highlight)
89+
.o_field_widget:not(.o_field_invalid):not(.o_field_highlight)
90+
.o_input:not(:hover):not(:focus) {
91+
--o-input-border-color: #{$wtc-input-border-color};
6092
}
6193

62-
.btn-light {
63-
&:hover {
64-
border-color: $button-border-color;
94+
/* Monetary fields need some special help */
95+
.o_field_monetary {
96+
/* Prevent having double border for monetary fields */
97+
span.o_input:has(~ input.o_input) {
98+
border: $input-border-width solid transparent !important;
6599
}
66-
}
67100

68-
.o_input {
69-
padding-left: 4px;
70-
padding-right: 2px;
101+
/* Keep the monetary symbol away from the border when it is outside the border */
102+
/* For when the symbol is on the left side */
103+
span.o_input + span.opacity-0 {
104+
margin-right: 3px;
105+
}
106+
/* For when the symbol is on the right side */
107+
span.o_input ~ span.opacity-0:not(span.o_input + span.opacity-0) {
108+
margin-left: 3px;
109+
}
71110
}
72111
}
73112

74113
/***********************************************************
75114
Form View : Handle Background for required fields
76115
************************************************************/
77116

78-
.o_form_view {
79-
.o_required_modifier:not(.o_readonly_modifier) {
80-
.o_input {
81-
/* Add background for all editable and required fields */
82-
background-color: $input-background-color-required !important;
83-
84-
/* darker placeholder as the background is darker */
85-
&::placeholder {
86-
color: $input-color-placeholder-required;
87-
}
88-
}
89-
}
90-
91-
.o_required_modifier.o_field_selection:not(.o_readonly_modifier) {
92-
/* Specific case for field selection */
93-
background-color: $input-background-color-required !important;
94-
}
117+
// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L31C1-L34C2
118+
.o_required_modifier {
119+
@include print-variable(
120+
o-input-background-color,
121+
$wtc-input-background-color-required
122+
);
95123
}
96124

97125
/***********************************************************
98-
Tree View : Handle style for required fields
126+
Tree View : Handle style for input fields
99127
************************************************************/
100128

101-
.o_list_renderer
102-
.o_data_row.o_selected_row
103-
> .o_data_cell.o_required_modifier:not(.o_readonly_modifier) {
104-
/* Disable border bottom as the field has now a background */
105-
border-bottom: 0px solid;
129+
// We override all lists, not just in forms
130+
.o_list_renderer .o_data_row {
131+
// Prevent item description from getting $wtc-input-background-color-required when row not in focus
132+
&:not(.selected_row) .o_input {
133+
background-color: initial;
134+
}
135+
&.o_selected_row > .o_data_cell {
136+
&.o_required_modifier:not(.o_readonly_modifier),
137+
&.o_invalid_cell:not(.o_readonly_modifier) {
138+
/* Disable border bottom as the field has now a background */
139+
border-bottom: 0px;
140+
}
141+
> .o_field_widget {
142+
// We have to manually reintroduce the input invalid styles
143+
&.o_field_invalid:not(.o_readonly_modifier):not(.o_invisible_modifier):has(
144+
.o_input
145+
) {
146+
--o-input-background-color: #{$o-input-invalid-bg};
147+
.o_input {
148+
--o-input-border-color: #{$o-danger};
149+
}
150+
}
151+
&:not(.o_readonly_modifier):not(.o_invisible_modifier) {
152+
&.o_required_modifier:not(.o_field_invalid) {
153+
.o_input {
154+
color: $wtc-input-color-required;
155+
--o-input-background-color: #{$wtc-input-background-color-required} !important;
156+
background-color: var(--o-input-background-color) !important;
157+
}
158+
}
159+
// Handle borders
160+
.o_input {
161+
border: $input-border-width solid var(--o-input-border-color) !important;
162+
/* Prevent double borders in nested o_input like tags */
163+
.o_input {
164+
border: 0 !important;
165+
}
166+
}
167+
}
168+
// Handle monetary fields in list
169+
&.o_field_monetary span.o_input:has(~ input.o_input) {
170+
border: $input-border-width solid transparent !important;
171+
}
172+
}
173+
}
106174
}

0 commit comments

Comments
 (0)