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

[IMP] odoo_theme: open images in a modal

Browse Source 
task-2358082

closes odoo/documentation#2284

X-original-commit: 2a867b4f60
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
Co-authored-by: Elisabeth Dickinson (edi) <edi@odoo.com>
This commit is contained in:
Antoine Vandevenne (anv) 2022-03-10 17:00:49 +00:00
parent b3f26c2914
commit bc91b1d06c
4 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
conf.py
View File

@ -51,6 +51,10 @@ exclude_patterns = [
# See https://docutils.sourceforge.io/docs/ref/rst/roles.html#standard-roles for other roles.
default_role = 'literal'
# Whether scaled down images should be be wrapped in a `<a/>` tag linking to the image file or not.
html_scaled_image_link = False
# If true, '()' will be appended to :func: etc. cross-reference text
add_function_parentheses = True

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

@ -3,9 +3,29 @@
document.addEventListener('DOMContentLoaded', function () {
const content = document.getElementById('o_content');
// Enforce the presence of the `img-fluid` class on all images in the body.
let imageModalId = 0;
content.querySelectorAll('img').forEach(image => {
// 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}"/>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
</div>
</div>
`;
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.

7
extensions/odoo_theme/static/scss/bootstrap_overridden.scss vendored
View File

@ -19,6 +19,11 @@ $h6-font-size: $font-size-secondary;
$btn-font-size: $font-size-secondary;
$btn-font-weight: $fw_semibold;
$btn-focus-box-shadow: 0 0 0 transparent;
$btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="#000000"><path d="M15,16c-.27,0-.54-.11-.73-.31l-4.21-4.44c-.38-.4-.36-1.03,.04-1.41s1.03-.36,1.41,.04l3.48,3.67,3.42-3.67c.38-.4,1.01-.42,1.41-.05,.4,.38,.42,1.01,.05,1.41l-4.15,4.44c-.19,.2-.45,.32-.73,.32h0Z"/><path d="M10.79,20.44c-.25,0-.49-.09-.69-.27-.4-.38-.42-1.01-.04-1.41l4.21-4.45c.19-.2,.45-.31,.73-.31h0c.28,0,.54,.12,.73,.32l4.15,4.45c.38,.4,.35,1.04-.05,1.41-.41,.38-1.04,.35-1.41-.05l-3.42-3.67-3.48,3.67c-.2,.21-.46,.31-.73,.31Z"/><path d="M15,28.37c-7.37,0-13.37-6-13.37-13.37S7.63,1.63,15,1.63s13.37,6,13.37,13.37-6,13.37-13.37,13.37Zm0-24.74C8.73,3.63,3.63,8.73,3.63,15s5.1,11.37,11.37,11.37,11.37-5.1,11.37-11.37S21.27,3.63,15,3.63Z"/></svg>');
$btn-close-width: 2rem;
// Dropdowns
$dropdown-min-width: 4.5rem;
$dropdown-min-width: 4.5rem;
// Modals
$modal-backdrop-opacity: .7;

20
extensions/odoo_theme/static/style.scss
View File

@ -704,6 +704,7 @@ header {
border: 1px solid $gray-lighter;
background: $white;
padding: .5rem;
cursor: pointer;
}
img:not([alt="green"]):not([alt="orange"]):not([alt="red"]), iframe {
@ -1103,6 +1104,25 @@ header {
}
}
//------------------------------------------------------------------------------
// Image modals
//------------------------------------------------------------------------------
.o_image_modal {
.modal-dialog {
max-width: fit-content;
}
.modal-content {
background-color: transparent;
border: none;
}
.modal-body {
padding: 2.2rem;
}
.btn-close {
@include o-position-absolute($top: 0);
}
}
//------------------------------------------------------------------------------
// Footer
//------------------------------------------------------------------------------