pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: Dialog footer buttons' spacing

Browse Source 
Before this commit, some dialog's footer buttons were glued to each
other which impacted their readability and usability.

This commit fixes it by properly applying the existing `gap` CSS rule
which defined the spacing between the buttons, and this independently of
the structure of the footer.

Indeed, due to historical reasons, the `.modal-footer` may contain
drastically different structures depending of the kind of modal.

A non-exhaustive list of encountered structures:
- `.modal-footer > button`
- `.modal-footer > div > footer > button`
- `.modal-footer > div > button`

Note: some existing rules already illustrate that in `modal.scss`.

task-2792884

closes odoo/odoo#91371

X-original-commit: d15bfc785d392a7dffadf9489d1d21f449d42ca4
Related: odoo/enterprise#27337
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Pierre Paridans
2022-05-16 10:09:42 +02:00
committed by Barad Mahendra
parent fc79bd1e0e
commit 8ed9d667fe
5 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/dialog/dialog.scss
+14 -1
View File
@@ -1,5 +1,18 @@
.modal.o_technical_modal .modal-footer {
gap: map-get($spacers, 1);
// FIXME: These selectors should not be necessary if we used buttons
// as direct children of the modal-footer as normally required
div,
footer {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: flex-start;
gap: map-get($spacers, 1);
@include media-breakpoint-down(sm) {
justify-content: space-around;
}
}
button {
margin: 0; // Reset boostrap.
addons/web/static/src/core/dialog/dialog.xml
+1 -1
View File
@@ -19,7 +19,7 @@
<main class="modal-body">
<t t-slot="default"/>
</main>
<footer t-if="props.footer" class="modal-footer justify-content-start">
<footer t-if="props.footer" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1">
<t t-slot="footer">
<button class="btn btn-primary" t-on-click="data.close">
<t>Ok</t>
addons/web/static/src/legacy/scss/modal.scss
-8
View File
@@ -45,15 +45,7 @@
}
.modal-footer {
flex-wrap: wrap;
text-align: left;
justify-content: flex-start;
// TODO These rules should not be necessary if we used buttons
// as direct children of the modal-footer as normally required
> div, > footer {
flex: 1 1 auto;
}
}
}
addons/web/static/src/legacy/xml/base.xml
+1 -1
View File
@@ -260,7 +260,7 @@
<main class="modal-body">
<t t-slot="default"/>
</main>
<footer t-if="props.renderFooter" class="modal-footer" t-ref="modal-footer">
<footer t-if="props.renderFooter" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1" t-ref="modal-footer">
<t t-slot="buttons" close="_close" >
<button class="btn btn-primary" t-on-click.prevent="_close">
<t>Ok</t>
addons/web/static/src/legacy/xml/dialog.xml
+1 -1
View File
@@ -18,7 +18,7 @@
<button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">×</button>
</header>
<main class="modal-body"/>
<footer t-if="renderFooter" class="modal-footer"/>
<footer t-if="renderFooter" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1"/>
</div>
</div>
</div>