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

[IMP] web: split {non-}legacy modal{_mobile}.scss

Browse Source 
And normalize the responsiveness of the modal between Community &
Enterprise.

task-3439226

Part-of: odoo/odoo#133289
This commit is contained in:
Pierre Paridans
2023-08-31 06:15:55 +00:00
parent 05f7404066
commit 73f2d5d8fd
5 changed files with 144 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/dialog/dialog.scss
+102 -14
View File
@@ -1,21 +1,77 @@
.modal.o_technical_modal .modal-footer {
// FIXME: These selectors should not be necessary if we used buttons
// as direct children of the modal-footer as normally required
footer, .o_form_buttons_edit, .o_form_buttons_view {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: flex-start;
gap: map-get($spacers, 1);
@include media-breakpoint-down(md) {
justify-content: space-around;
.modal.o_technical_modal {
.modal-content {
.modal-header .modal-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.modal-footer {
text-align: left;
// FIXME: These selectors should not be necessary if we used buttons
// as direct children of the modal-footer as normally required
footer, .o_form_buttons_edit, .o_form_buttons_view {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: flex-start;
gap: map-get($spacers, 1);
@include media-breakpoint-down(md) {
justify-content: space-around;
}
}
button {
margin: 0; // Reset boostrap.
}
@include media-breakpoint-down(md) {
.btn {
width: 45%;
text-overflow: ellipsis;
white-space: inherit;
}
}
button {
margin: 0; // Reset boostrap.
}
@include media-breakpoint-down(sm) {
&.o_modal_full {
.modal-dialog {
margin: 0px;
height: 100%;
.modal-content {
height: 100%;
border: none;
.modal-header {
background: $o-navbar-background;
.modal-title, button.close {
color: $o-navbar-entry-color;
}
}
.modal-body {
height: 100%;
overflow-y: auto;
}
}
}
}
}
}
.modal.o_inactive_modal {
z-index: $zindex-modal-backdrop - 1;
}
.o_dialog > .modal {
display: block;
}
@include media-breakpoint-up(sm) {
@@ -24,3 +80,35 @@
max-width: none;
}
}
@include media-breakpoint-down(md) {
.modal {
&.o_modal_full .modal-content {
.modal-header {
align-items: center;
height: $o-navbar-height;
padding: 0 1rem;
.btn {
color: white;
background-color: transparent;
border-color: transparent;
&, .btn-sm {
padding: 14px; // according to the padding for touch device
}
&.fa {
padding: 10px; // according to the padding for touch device
}
}
}
.modal-footer {
@include o-webclient-padding($top: 1rem, $bottom: 0.5rem);
box-shadow: 0 1rem 2rem black;
z-index: 0;
}
}
}
}
addons/web/static/src/legacy/scss/modal.scss
+2 -107
View File
@@ -1,125 +1,20 @@
.modal.o_technical_modal {
.modal-content {
.modal-header .o_subtitle {
margin-left: 10px;
}
.modal-header .modal-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.modal-body {
&.o_act_window {
padding: 0;
@include media-breakpoint-down(md) {
.o_action {
display: flex;
flex-direction: column;
height: 100%;
}
}
}
// Fix dropzones of nested sortable.
.mjs-nestedSortable-error {
outline: none;
}
.o_modal_header {
@include o-webclient-padding($top: 10px, $bottom: 10px);
@include clearfix;
.o_search_options {
display: inline-block;
}
.o_pager {
float: right;
}
}
.o_modal_changes td {
&:first-child {
padding-right: 10px;
vertical-align: top;
white-space: nowrap;
}
&:not(:first-child) {
width: 100%;
}
}
}
.modal-footer {
text-align: left;
}
}
@include media-breakpoint-up(sm) {
.modal-dialog .modal-content .modal-body.o_dialog_error {
overflow: visible;
display: flex;
flex-flow: column nowrap;
> .alert, > button {
flex: 0 0 auto;
}
> .o_error_detail {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
}
}
@include media-breakpoint-down(sm) {
&.o_modal_full {
.modal-dialog {
margin: 0px;
height: 100%;
.modal-content {
height: 100%;
border: none;
.modal-header {
background: $o-navbar-background;
.modal-title, .o_subtitle, button.close {
color: $o-navbar-entry-color;
}
}
.modal-body {
height: 100%;
overflow-y: auto;
}
}
}
&.o_modal_full .modal-dialog .modal-content .modal-header .o_subtitle {
color: $o-navbar-entry-color;
}
}
}
.modal.o_inactive_modal {
z-index: $zindex-modal-backdrop - 1;
}
.o_dialog {
> .modal {
display: block;
}
}
// Temporary fix for modals which are not instantiated thanks to the Dialog
// JS classes (deprecated case) (see bootstrap_overridden.scss) + Frontend.
//
// TODO the following code was disabled because it is saas-incompatible
//
// :not(body) > .modal {
// z-index: $zindex-modal-background + 1;
// }
addons/web/static/src/views/form/form_controller.scss
+13
View File
@@ -1051,6 +1051,19 @@
}
}
@include media-breakpoint-down(md) {
.modal {
&.o_modal_full .modal-content {
.modal-body .o_form_view .o_form_sheet_bg {
&, & > .o_form_sheet {
border-bottom: 0;
border-top: 0;
}
}
}
}
}
@media print {
.oe_button_box, .o_form_statusbar {
display: none !important;
addons/web/static/src/views/list/list_confirmation_dialog.scss
+12
View File
@@ -0,0 +1,12 @@
.modal.o_technical_modal {
.o_modal_changes td {
&:first-child {
padding-right: 10px;
vertical-align: top;
white-space: nowrap;
}
&:not(:first-child) {
width: 100%;
}
}
}
addons/web/static/src/webclient/actions/action_dialog.scss
+15
View File
@@ -0,0 +1,15 @@
.modal.o_technical_modal {
.modal-content {
.modal-body.o_act_window {
padding: 0;
@include media-breakpoint-down(md) {
.o_action {
display: flex;
flex-direction: column;
height: 100%;
}
}
}
}
}