[FIX] mail: stop the bubbling of various click events

Technical Reason:
- The events bound to the specific elements inside the `FileViewer` are
propagating/bubbling up and are triggering the `onGlobalClick`
(https://github.com/odoo/enterprise/blob/eaf40edbbacfc6a8eb9e0137c20e7f94b1f5d723/documents/static/src/views/kanban/documents_kanban_renderer.js#L36-L42)
event bound on the `DocumentsKanbanRenderer`.
(https://github.com/odoo/enterprise/blob/71dbc617d6fe533c4d0153361f9711bd4c9e4885/documents/static/src/views/kanban/documents_kanban_renderer.xml#L6)

After this commit:
- Only the events bound to the specific HTMLElements are now triggered.
- We successfully prevent the un-necessary call of the `onGlobalClick`
method mentioned above.

Refer the related enterprise PR for the test case of this fix.

Task-3489455

closes odoo/odoo#150257

X-original-commit: e321fe3a40dd470095c79e7abcd273d6fa0cfe7c
Related: odoo/enterprise#54752
Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
This commit is contained in:
Shubham Thanki
2024-01-23 18:27:45 +00:00
parent c17917b8d2
commit 8da12ebd75
@@ -4,7 +4,7 @@
<t t-name="web.FileViewer">
<div class="d-flex justify-content-center" t-att-class="{ 'modal fixed-top bottom-0': props.modal }">
<div class="o-FileViewer flex-column align-items-center d-flex w-100 h-100" tabindex="0" t-ref="autofocus" t-on-keydown.stop="(ev) => this.onKeydown(ev)">
<div class="o-FileViewer-header position-absolute top-0 d-flex w-100 bg-black-75 text-400">
<div class="o-FileViewer-header position-absolute top-0 d-flex w-100 bg-black-75 text-400" t-on-click.stop="">
<div t-if="isViewable" class="d-flex align-items-center ms-4 me-2">
<i t-if="state.file.isImage" class="fa fa-picture-o" role="img" title="Image"/>
<i t-if="state.file.isPdf" class="fa fa-file-text" role="img" title="PDF file"/>
@@ -15,7 +15,7 @@
<span class="text-truncate" t-out="state.file.displayName"/>
</div>
<div class="flex-grow-1"/>
<div class="o-FileViewer-download o-FileViewer-headerButton d-flex align-items-center px-3 cursor-pointer" role="button" title="Download">
<div class="o-FileViewer-download o-FileViewer-headerButton d-flex align-items-center px-3 cursor-pointer" role="button" title="Download" t-on-click.stop="">
<a t-att-href="state.file.downloadUrl" class="text-reset" download="">
<i class="fa fa-download fa-fw" role="img"/>
<span>Download</span>
@@ -41,32 +41,32 @@
</video>
</div>
<div t-if="state.file.isImage" class="position-absolute bottom-0 d-flex" role="toolbar">
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click="zoomIn" title="Zoom In (+)" role="button">
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="zoomIn" title="Zoom In (+)" role="button">
<i class="fa fa-fw fa-plus" role="img"/>
</div>
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === 1 }" t-on-click="resetZoom" role="button" title="Reset Zoom (0)">
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === 1 }" t-on-click.stop="resetZoom" role="button" title="Reset Zoom (0)">
<i class="fa fa-fw fa-search" role="img"/>
</div>
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === minScale }" t-on-click="zoomOut" title="Zoom Out (-)" role="button">
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === minScale }" t-on-click.stop="zoomOut" title="Zoom Out (-)" role="button">
<i class="fa fa-fw fa-minus" role="img"/>
</div>
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click="rotate" title="Rotate (r)" role="button">
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="rotate" title="Rotate (r)" role="button">
<i class="fa fa-fw fa-repeat" role="img"/>
</div>
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click="onClickPrint" title="Print" role="button">
<div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="onClickPrint" title="Print" role="button">
<i class="fa fa-fw fa-print" role="img"/>
</div>
<div class="o-FileViewer-download o-FileViewer-toolbarButton p-3 rounded-0 cursor-pointer" title="Download" role="button">
<div class="o-FileViewer-download o-FileViewer-toolbarButton p-3 rounded-0 cursor-pointer" title="Download" role="button" t-on-click.stop="">
<a t-att-href="state.file.downloadUrl" class="text-reset" download="">
<i class="fa fa-download fa-fw" role="img"/>
</a>
</div>
</div>
<t t-if="props.files.length > 1">
<div class="o-FileViewer-navigation position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click="previous" title="Previous (Left-Arrow)" aria-label="Previous" role="button">
<div class="o-FileViewer-navigation position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click.stop="previous" title="Previous (Left-Arrow)" aria-label="Previous" role="button">
<span class="oi oi-chevron-left" role="img"/>
</div>
<div class="o-FileViewer-navigation position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click="next" title="Next (Right-Arrow)" aria-label="Next" role="button">
<div class="o-FileViewer-navigation position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click.stop="next" title="Next (Right-Arrow)" aria-label="Next" role="button">
<span class="oi oi-chevron-right" role="img"/>
</div>
</t>