NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] odoo_theme: only open images that have no target in modal

Browse Source 
Since clicking on the image redirects the user to the target URL, it's
useless to open the image in a modal. Also, it partially broke the
layout of the /legal.html page due to the modal div being inserted into
table cells.

This commit also introduces the possibility to add the `o-no-modal`
class on images that should not open in a modal.

task-2909167

X-original-commit: 54d676c
Part-of: odoo/documentation#2461
This commit is contained in:
Antoine Vandevenne (anv) 2022-07-11 15:00:05 +00:00
parent 029ef0ae3b
commit 7cbbb77746
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
content/contributing/documentation/rst_cheat_sheet.rst
View File

@ -454,6 +454,11 @@ The ``image`` markup allows inserting images in a document.
:align: center
:alt: Create an invoice.
.. tip::
Add the :code:`:class: o-no-modal` `option
<https://docutils.sourceforge.io/docs/ref/rst/directives.html#common-options>`_ to an image to
prevent opening it in a modal.
.. _contributing/alert-blocks:
Alert blocks (admonitions)

34
extensions/odoo_theme/static/js/layout.js
View File

@ -8,24 +8,26 @@
// Enforce the presence of the `img-fluid` class on all images.
image.classList.add('img-fluid');
// Add a modal to each image.
const modalContainer = document.createElement('div');
modalContainer.classList.add('o_image_modal');
modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<img src="${image.src}" alt="${image.alt}" class="img-fluid"/>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
// Add a modal to each image that does not explicitly block it and has no target.
if (!image.classList.contains('o-no-modal') && image.parentElement.tagName !== 'A') {
const modalContainer = document.createElement('div');
modalContainer.classList.add('o_image_modal');
modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid"/>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
</div>
`;
image.parentNode.append(modalContainer);
image.setAttribute('data-bs-toggle', 'modal');
image.setAttribute('data-bs-target', `#modal-${imageModalId}`);
imageModalId++;
`;
image.parentNode.append(modalContainer);
image.setAttribute('data-bs-toggle', 'modal');
image.setAttribute('data-bs-target', `#modal-${imageModalId}`);
imageModalId++;
}
});
// Make all external links open in a new tab by default.