[FIX] web_editor: select checklist when language is rtl

task-2734731

closes odoo/odoo#85627

X-original-commit: 0a236b11e770b6a8db5192685a2c36ce1e303399
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Nicolas Bayet
2022-03-02 08:36:06 +00:00
parent 268025dccc
commit 1b4a390b73
5 changed files with 49 additions and 31 deletions
@@ -16,6 +16,8 @@
<!-- custom style -->
<link rel="stylesheet" href="../src/style.css"/>
<!-- Checklists are styled separately in Odoo -->
<link rel="stylesheet" href="../src/checklist.css"/>
<style>
html, body {
width: 100%;
@@ -92,31 +94,6 @@
.d-none {
display: none !important;
}
/* Checklists are styled separately in Odoo */
ul.o_checklist > li {
list-style: none;
position: relative;
margin-left: 20px;
}
ul.o_checklist > li:not(.oe-nested):before {
content: '';
position: absolute;
left: -20px;
display: block;
height: 14px;
width: 14px;
top: 1px;
border: 1px solid;
cursor: pointer;
}
ul.o_checklist > li.o_checked:after {
content: "✓";
transition: opacity .5s;
position: absolute;
left: -18px;
top: -1px;
opacity: 1;
}
</style>
<script src="main.js" type="module" defer></script>
@@ -2674,7 +2674,21 @@ export class OdooEditor extends EventTarget {
const node = ev.target;
// handle checkbox lists
if (node.tagName == 'LI' && getListMode(node.parentElement) == 'CL') {
if (ev.offsetX < 0) {
const beforStyle = window.getComputedStyle(node, 'before');
const style1 = {
left: parseInt(beforStyle.getPropertyValue('left'), 10),
top: parseInt(beforStyle.getPropertyValue('top'), 10),
}
style1.right = style1.left + parseInt(beforStyle.getPropertyValue('width'), 10);
style1.bottom = style1.top + parseInt(beforStyle.getPropertyValue('height'), 10);
const isMouseInsideCheckboxBox =
ev.offsetX >= style1.left &&
ev.offsetX <= style1.right &&
ev.offsetY >= style1.top &&
ev.offsetY <= style1.bottom;
if (isMouseInsideCheckboxBox) {
toggleClass(node, 'o_checked');
ev.preventDefault();
this.historyStep();
@@ -0,0 +1,24 @@
ul.o_checklist > li {
list-style: none;
position: relative;
margin-left: 20px;
}
ul.o_checklist > li:not(.oe-nested):before {
content: '';
position: absolute;
left: -20px;
display: block;
height: 14px;
width: 14px;
top: 1px;
border: 1px solid;
cursor: pointer;
}
ul.o_checklist > li.o_checked:after {
content: "✓";
transition: opacity .5s;
position: absolute;
left: -18px;
top: -1px;
opacity: 1;
}
@@ -7,6 +7,7 @@
<title>Odoo Editor tests</title>
<link rel="stylesheet" href="../src/checklist.css"/>
<link rel="stylesheet" href="lib/mocha.css" />
<style type="text/css">
b.zws {
@@ -135,18 +135,20 @@ ul.o_checklist {
display: block;
height: $o-checklist-before-size;
width: $o-checklist-before-size;
margin-top: 4px;
top: 4px;
border: 1px solid;
text-align: center;
cursor: pointer;
}
&.o_checked {
text-decoration: line-through;
&::after {
&::before {
content: "✓";
position: absolute;
left: - ($o-checklist-margin-left - $o-checklist-checkmark-width);
top: +1px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 1px #{"/*rtl:ignore*/"};
padding-top: 1px;
}
}
}