[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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user