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

[IMP][CSS] Revamp modal to use all BS classes and variables

Browse Source
This commit is contained in:
Elisabeth Dickinson 2022-12-16 11:29:02 +01:00 committed by Antoine Vandevenne (anv)
parent 33cccf063f
commit 001fe6bd1e
3 changed files with 20 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,18 +6,19 @@
let imageModalId = 0;
content.querySelectorAll('img').forEach(image => {
// Enforce the presence of the `img-fluid` class on all images.
image.classList.add('img-fluid');
image.classList.add('img-fluid', 'img-thumbnail');
// 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-header">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<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>
<img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid img-thumbnail"/>
</div>
</div>
</div>

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

@ -46,6 +46,10 @@ $h4-font-size: $font-size-base * 1.266 !default;
$h5-font-size: $font-size-base * 1.125 !default;
$h6-font-size: $font-size-base !default;
// Images
$thumbnail-padding: .5rem;
// Buttons
// For each of Bootstrap's buttons, define text, background, and border color.
@ -61,6 +65,17 @@ $dropdown-min-width: 4.5rem;
// Modals
$modal-backdrop-opacity: .7;
$modal-content-bg: transparent;
$modal-content-border-color: transparent;
$modal-content-border-width: 0;
$modal-header-padding: 0;
$modal-sm: fit-content;
$modal-md: fit-content;
$modal-lg: fit-content;
$modal-xl: fit-content;
// Accordion
$accordion-body-padding-y: 0 !default;
$accordion-body-padding-x: 0 !default;

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

@ -752,9 +752,6 @@ header {
}
img {
border: 1px solid $o-gray-border;
background: $white;
padding: .5rem;
margin-bottom: 1rem;
}
@ -1160,25 +1157,6 @@ 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
//------------------------------------------------------------------------------