From 8fa6e923d0fc8695d92e0b114e230d3abab7d9bc Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Mon, 22 Aug 2022 07:38:34 +0000 Subject: [PATCH] [REF] web, website: `FormView`, review and simplify scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Review, simplify SCSS and adapt legacy code. Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2918464 closes odoo/odoo#98101 Related: odoo/enterprise#30421 Signed-off-by: Adrien Dieudonné (adr) --- .../src/views/form/button_box/button_box.scss | 30 +++++-------------- .../src/views/form/button_box/button_box.xml | 9 +++--- .../static/src/views/form/form_compiler.js | 9 ++++-- .../static/src/views/form/form_controller.js | 2 +- .../src/views/form/form_controller.scss | 28 +++++------------ .../web/static/src/views/form/form_label.js | 2 +- .../src/views/form/form_view_extra.scss | 1 - .../status_bar_buttons/status_bar_buttons.xml | 2 +- addons/web/static/src/views/view_compiler.js | 2 +- .../tests/views/form/form_compiler_tests.js | 8 ++--- .../static/src/js/backend/redirect_field.xml | 2 +- 11 files changed, 35 insertions(+), 60 deletions(-) diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss index b37ea96fd5a..be3ef0d6dbc 100644 --- a/addons/web/static/src/views/form/button_box/button_box.scss +++ b/addons/web/static/src/views/form/button_box/button_box.scss @@ -1,16 +1,14 @@ .o-form-buttonbox { - position: relative; - display: block; + --o-input-border-color: #{map-get($grays, '600')}; margin-bottom: $o-sheet-vpadding; margin-top: -$o-sheet-vpadding; @include o-form-sheet-negative-margin; - text-align: right; // Use box-shadow instead of border-bottom because some button boxes are // empty in some cases and we do not want to see a floating border in // that cases. box-shadow: inset 0 -1px 0 $border-color; - .btn.oe_stat_button { + .btn.oe_stat_button, > .o_field_widget { flex: 0 0 auto; width: percentage(1/3); // Adapt the number of visible buttons for each screen width @include media-breakpoint-up(md) { @@ -24,25 +22,15 @@ } } + &.o_full > *:first-child { + border-left: none !important; + box-shadow: -1px 0 0 $border-color; + } + .btn.oe_stat_button { - color: $o-main-text-color; height: $o-statbutton-height; - // Use !important to avoid touch_device style - padding: 0 $o-statbutton-spacing 0 0 !important; // padding-left will be achieved through margin-left of content - text-align: left; - white-space: nowrap; - background-color: transparent; - border-radius: 0px; - margin-bottom: 0; // If the button comes from a field - - &:hover, &:focus { - background-color: rgba(black, 0.03); - color: inherit; - opacity: 1; - } > .o_button_icon { - margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug) display: inline-block; vertical-align: middle; line-height: $o-statbutton-height; @@ -127,8 +115,6 @@ .o_dropdown_more { width: 150px; > .dropdown-item { - border: none; - border-bottom: 1px solid $border-color; .oe_stat_button { border: none; width: 100%; @@ -136,4 +122,4 @@ } } } -} \ No newline at end of file +} diff --git a/addons/web/static/src/views/form/button_box/button_box.xml b/addons/web/static/src/views/form/button_box/button_box.xml index 03f93110cce..23d92169b46 100644 --- a/addons/web/static/src/views/form/button_box/button_box.xml +++ b/addons/web/static/src/views/form/button_box/button_box.xml @@ -5,13 +5,12 @@ -
- - +
+ - + More - + diff --git a/addons/web/static/src/views/form/form_compiler.js b/addons/web/static/src/views/form/form_compiler.js index bed508d254d..dd35caed661 100644 --- a/addons/web/static/src/views/form/form_compiler.js +++ b/addons/web/static/src/views/form/form_compiler.js @@ -148,8 +148,11 @@ export class FormCompiler extends ViewCompiler { ? `!evalDomainFromRecord(props.record,${JSON.stringify(invisible)})` : true, }); - if (child.tagName === "button") { - child.classList.add("oe_stat_button"); + if (child.tagName === "button" || child.children.tagName === "button") { + child.classList.add("oe_stat_button", "btn-light", "flex-shrink-0", "mb-0", "py-0", "border-0", "border-start", "border-bottom", "rounded-0", "text-start", "text-nowrap", "text-capitalize"); + } + if (child.tagName === "field") { + child.classList.add("d-inline-block", "mb-0"); } append(mainSlot, this.compileNode(child, params, false)); append(buttonBox, mainSlot); @@ -361,7 +364,7 @@ export class FormCompiler extends ViewCompiler { */ compileHeader(el, params) { const statusBar = createElement("div"); - statusBar.className = "o_form_statusbar"; + statusBar.className = "o_form_statusbar position-relative d-flex justify-content-between border-bottom"; const buttons = []; const others = []; for (const child of el.childNodes) { diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js index be218821f7c..98233283a39 100644 --- a/addons/web/static/src/views/form/form_controller.js +++ b/addons/web/static/src/views/form/form_controller.js @@ -428,7 +428,7 @@ export class FormController extends Component { if (size <= SIZES.XS) { sizeClass = "o_xxs_form_view"; } else if (size === SIZES.XXL) { - sizeClass = "o_xxl_form_view"; + sizeClass = "o_xxl_form_view h-100"; } return { [this.props.className]: true, diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss index 9558c270898..98c35bcb36e 100644 --- a/addons/web/static/src/views/form/form_controller.scss +++ b/addons/web/static/src/views/form/form_controller.scss @@ -1,7 +1,7 @@ // Define left and right padding according to screen resolution @mixin o-form-sheet-inner-left-padding { padding-left: $o-horizontal-padding; - @include media-breakpoint-between(lg, $o-extra-grid-breakpoints) { + @include media-breakpoint-up(lg, $o-extra-grid-breakpoints) { padding-left: $o-horizontal-padding*2; } } @@ -10,7 +10,7 @@ } @mixin o-form-sheet-inner-right-padding { padding-right: $o-horizontal-padding; - @include media-breakpoint-between(lg, $o-extra-grid-breakpoints) { + @include media-breakpoint-up(lg, $o-extra-grid-breakpoints) { padding-right: $o-horizontal-padding*2; } } @@ -18,7 +18,7 @@ @mixin o-form-sheet-negative-margin { margin-left: -$o-horizontal-padding; margin-right: -$o-horizontal-padding; - @include media-breakpoint-between(lg, $o-extra-grid-breakpoints) { + @include media-breakpoint-up(lg, $o-extra-grid-breakpoints) { margin-left: -$o-horizontal-padding*2; margin-right: -$o-horizontal-padding*2; } @@ -192,14 +192,10 @@ $o-form-label-margin-right: 0px; // Statusbar .o_form_statusbar { - position: relative; // Needed for the "More" dropdown - display: flex; - justify-content: space-between; padding-left: $o-horizontal-padding; - border-bottom: 1px solid $border-color; background-color: $o-view-background-color; - > .o_statusbar_buttons, > .o_statusbar_status { + > .o_statusbar_status { display: flex; align-items: center; align-content: space-around; @@ -211,8 +207,6 @@ $o-form-label-margin-right: 0px; } > .o_statusbar_buttons { - flex-flow: row wrap; - > .btn, .o_widget > .btn { $o-statusbar-buttons-vmargin: 4px; min-height: $o-statusbar-height - 2 * $o-statusbar-buttons-vmargin; @@ -380,10 +374,6 @@ $o-form-label-margin-right: 0px; // Separators .o_horizontal_separator { - font-size: $font-size-sm; - font-weight: $font-weight-bold; - margin: 1.2em ($grid-gutter-width * .5) .8em 0; - &:not(:empty) { box-shadow: 0 $border-width 0 $o-form-separator-color; } @@ -405,8 +395,7 @@ $o-form-label-margin-right: 0px; // Labels .o_form_label { - margin: 0 $o-form-spacing-unit 0 0; - color: $headings-color; + margin-right: $o-form-spacing-unit; font-size: $font-size-base; // The label muse have the same size whatever their position line-height: $line-height-base; font-weight: $font-weight-bold; @@ -482,7 +471,7 @@ $o-form-label-margin-right: 0px; .o_form_label { padding-right: 20px; - + margin-right: 0; min-width: 0; white-space: nowrap; &:after { @@ -500,11 +489,10 @@ $o-form-label-margin-right: 0px; > tbody > tr:first-child > td { padding-top: 4px; } - .oe_subtotal_footer_separator { width: 100%; text-align: right; - border-top: 1px solid map-get($grays, '300'); + border-top: 1px solid $border-color; font-weight: $font-weight-bold; font-size: 1.3em; } @@ -757,6 +745,7 @@ $o-form-label-margin-right: 0px; > tr { display: flex; flex-flow: row wrap; + padding-bottom: map-get($spacers, 3); > td { flex: 1 0 auto; @@ -792,7 +781,6 @@ $o-form-label-margin-right: 0px; .o_xxl_form_view { flex-flow: row nowrap; - height: 100%; .o_form_sheet_bg { flex: 1 1 auto; // Side chatter is disabled if this has to shrink but this was added for safety diff --git a/addons/web/static/src/views/form/form_label.js b/addons/web/static/src/views/form/form_label.js index d9e826d333e..3c50689dabf 100644 --- a/addons/web/static/src/views/form/form_label.js +++ b/addons/web/static/src/views/form/form_label.js @@ -55,6 +55,6 @@ export class FormLabel extends Component { } FormLabel.template = xml` `; diff --git a/addons/web/static/src/views/form/form_view_extra.scss b/addons/web/static/src/views/form/form_view_extra.scss index d2da3cc52cb..9607c74c6f5 100644 --- a/addons/web/static/src/views/form/form_view_extra.scss +++ b/addons/web/static/src/views/form/form_view_extra.scss @@ -97,7 +97,6 @@ $o-td-label-padding-right: 8px; // Separators .o_horizontal_separator { color: $o-brand-primary; - font-weight: bold; } // Specific style classes diff --git a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml index e6d760bf136..65e0f8bba4b 100644 --- a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml +++ b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml @@ -2,7 +2,7 @@ -
+
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js index 156f7c74aa1..6f5c90ee3a1 100644 --- a/addons/web/static/src/views/view_compiler.js +++ b/addons/web/static/src/views/view_compiler.js @@ -217,7 +217,7 @@ export function isTextNode(node) { */ export function makeSeparator(title) { const separator = createElement("div"); - separator.className = "o_horizontal_separator"; + separator.className = "o_horizontal_separator mt-4 mb-3 text-uppercase fw-bolder small"; separator.textContent = title; return separator; } diff --git a/addons/web/static/tests/views/form/form_compiler_tests.js b/addons/web/static/tests/views/form/form_compiler_tests.js index 93a85da3e7c..0f6c860af92 100644 --- a/addons/web/static/tests/views/form/form_compiler_tests.js +++ b/addons/web/static/tests/views/form/form_compiler_tests.js @@ -145,7 +145,7 @@ QUnit.module("Form Compiler", () => { const expected = /*xml*/ `
-
+
someDiv
`; @@ -168,7 +168,7 @@ QUnit.module("Form Compiler", () => {
-
+
someDiv
inside sheet
@@ -228,7 +228,7 @@ QUnit.module("Form Compiler", () => { `; const expected = /*xml*/ ` -
+
someDiv
@@ -246,7 +246,7 @@ QUnit.module("Form Compiler", () => { `; const expected = /*xml*/ ` -
+
`; diff --git a/addons/website/static/src/js/backend/redirect_field.xml b/addons/website/static/src/js/backend/redirect_field.xml index 23b4e5cf1fb..2c94d976b96 100644 --- a/addons/website/static/src/js/backend/redirect_field.xml +++ b/addons/website/static/src/js/backend/redirect_field.xml @@ -2,7 +2,7 @@ -