From 73f2d5d8fd4d458a9b042ae5bce2350e9d712914 Mon Sep 17 00:00:00 2001 From: Pierre Paridans Date: Tue, 29 Aug 2023 17:25:54 +0200 Subject: [PATCH] [IMP] web: split {non-}legacy modal{_mobile}.scss And normalize the responsiveness of the modal between Community & Enterprise. task-3439226 Part-of: odoo/odoo#133289 --- addons/web/static/src/core/dialog/dialog.scss | 116 +++++++++++++++--- addons/web/static/src/legacy/scss/modal.scss | 109 +--------------- .../src/views/form/form_controller.scss | 13 ++ .../views/list/list_confirmation_dialog.scss | 12 ++ .../src/webclient/actions/action_dialog.scss | 15 +++ 5 files changed, 144 insertions(+), 121 deletions(-) create mode 100644 addons/web/static/src/views/list/list_confirmation_dialog.scss create mode 100644 addons/web/static/src/webclient/actions/action_dialog.scss diff --git a/addons/web/static/src/core/dialog/dialog.scss b/addons/web/static/src/core/dialog/dialog.scss index e07faedf5bb..26746e07a90 100644 --- a/addons/web/static/src/core/dialog/dialog.scss +++ b/addons/web/static/src/core/dialog/dialog.scss @@ -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; + } + } + } +} diff --git a/addons/web/static/src/legacy/scss/modal.scss b/addons/web/static/src/legacy/scss/modal.scss index 48f8904ff08..7db8655e946 100644 --- a/addons/web/static/src/legacy/scss/modal.scss +++ b/addons/web/static/src/legacy/scss/modal.scss @@ -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; -// } diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss index 13e1e36b6b9..968b6dcbf55 100644 --- a/addons/web/static/src/views/form/form_controller.scss +++ b/addons/web/static/src/views/form/form_controller.scss @@ -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; diff --git a/addons/web/static/src/views/list/list_confirmation_dialog.scss b/addons/web/static/src/views/list/list_confirmation_dialog.scss new file mode 100644 index 00000000000..6491e4f280d --- /dev/null +++ b/addons/web/static/src/views/list/list_confirmation_dialog.scss @@ -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%; + } + } +} diff --git a/addons/web/static/src/webclient/actions/action_dialog.scss b/addons/web/static/src/webclient/actions/action_dialog.scss new file mode 100644 index 00000000000..235610bd081 --- /dev/null +++ b/addons/web/static/src/webclient/actions/action_dialog.scss @@ -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%; + } + } + } + } +}