[FIX] note,web(_editor): fix html field style

Commit [1] added a div around the `.note-editable` node of the html
editor. This broke some css rules. For instance, the html field in
form view's notebooks should have a transparent bottom border when
focused, this was no longer the case (e.g. crm lead form view).
Moreover, we sometimes want to control the height of the editor
(e.g. in Notes or in the mail full composer). That was broken as
well due to the added div.

This commit fixes those issues.

We also ensure to set the border-radius to 0 when the editor only
has a bottom border.

In notes, we do not want to have borders, but the rule didn't
apply due to selector precedence, we fix that as well.

Finally, we fix a typo in a selector in the web_editor addon.

[1] https://github.com/odoo/odoo/commit/60ac6be0d3545#

closes odoo/odoo#107740

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Aaron Bohy
2022-12-19 12:43:09 +01:00
parent 9ffe67a975
commit 4ed9c18199
5 changed files with 6 additions and 5 deletions
+1 -1
View File
@@ -28,7 +28,7 @@
}
}
}
.note-editable {
.o_field_html .note-editable {
border: none;
padding: $o-sheet-vpadding $o-horizontal-padding 10px !important;
min-height: 300px;
@@ -524,7 +524,7 @@
> .tab-pane {
padding: $o-horizontal-padding 0;
> .o_field_html > .note-editable {
> .o_field_html .note-editable {
min-height: 180px;
&:hover, &:focus {
border-color: transparent;
@@ -10,7 +10,7 @@
<div t-ref="readonlyElement" class="o_readonly" t-out="markupValue" />
</t>
</t>
<div t-else="" t-ref="spellcheck">
<div t-else="" class="h-100" t-ref="spellcheck">
<t t-if="state.showCodeView">
<textarea t-ref="codeView" class="o_codeview" t-att-value="markupValue"/>
<div t-ref="codeViewButton" id="codeview-btn-group" class="btn-group" t-on-click="toggleCodeView">
@@ -39,10 +39,11 @@
}
}
.o_form_view:not(o_field_highlight) {
.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;
border-radius: 0;
&:hover, &:focus {
border-color: var(--o-input-border-color);
@@ -569,7 +569,7 @@ img::selection {
border-radius: 3px;
}
.oe-bordered-editor>.note-editable {
.oe-bordered-editor .note-editable {
border-width: 1px;
padding: 4px;
min-height: 180px;