From 16ddf96e0f0c4b92ce9a841adb3afff4fb59f73d Mon Sep 17 00:00:00 2001 From: Pierre Paridans Date: Tue, 27 Sep 2022 21:17:45 +0000 Subject: [PATCH] [IMP] web: cleanup notebook's styling in Form & Kanban examples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit removes unecessary overrides of the Notebook component styling in the Form and Kanban columns examples. Additionally, it also moves the most generic styles (like responsive) into the Notebook component itself. closes odoo/odoo#101868 X-original-commit: c1b9905b2e17ca0fda3aeb152c2927031d1662c4 Related: odoo/enterprise#32158 Signed-off-by: Adrien Dieudonné (adr) --- .../static/src/core/notebook/notebook.scss | 37 ++++++----- .../web/static/src/core/notebook/notebook.xml | 4 +- .../src/views/form/form_controller.scss | 62 +++---------------- .../views/kanban/kanban_examples_dialog.scss | 62 +++++++------------ 4 files changed, 57 insertions(+), 108 deletions(-) diff --git a/addons/web/static/src/core/notebook/notebook.scss b/addons/web/static/src/core/notebook/notebook.scss index d9d783f0ba6..952495765d2 100644 --- a/addons/web/static/src/core/notebook/notebook.scss +++ b/addons/web/static/src/core/notebook/notebook.scss @@ -8,6 +8,14 @@ .o_notebook_headers { margin: 0 var(--notebook-margin-x, 0); + + @include media-breakpoint-down(md) { + overflow-x: auto; + + &::-webkit-scrollbar { + display: none; + } + } } .nav { @@ -17,15 +25,13 @@ .nav-item { white-space: nowrap; + margin: 0 -1px 0 0; } .nav-link { - border: 1px solid var(--notebook-link-border-color, transparent); + border-color: var(--notebook-link-border-color, transparent); &.active { - border: 1px solid var(--notebook-link-border-color-active); - border-bottom-color: $o-view-background-color; - &, &:hover, &:focus, &:active { border-color: var(--notebook-link-border-color-active); border-top-color: var(--notebook-link-border-color-active-accent, var(--notebook-link-border-color-active)); @@ -33,38 +39,41 @@ } } + &:hover, &:focus, &:active { + outline: none; + } + &:hover { border-color: var(--notebook-link-border-color-hover); } } &.vertical { - .o_notebook_headers { - border-right: 1px solid $border-color; - } - .nav { width: max-content; - border-bottom: 1px solid var(--notebook-link-border-color); + border-bottom-color: transparent; // removing the width has weird side effect due to the negative margin } .nav-item { - margin: 0 -1px -1px 0; + margin: 0 0 -1px 0; &:first-child .nav-link { border-top-width: 0; } + + &:last-child .nav-link { + border-bottom-width: 0; + } } .nav-link { - border: 1px solid var(--notebook-link-border-color, transparent); + margin-bottom: 0; &.active { - border: 1px solid var(--notebook-link-border-color-active); - &, &:hover, &:focus, &:active { + border-color: var(--notebook-link-border-color-active); border-left-color: var(--notebook-link-border-color-active-accent, var(--notebook-link-border-color-active)); - border-right-color: $o-white; + border-right-color: $o-view-background-color; } } } diff --git a/addons/web/static/src/core/notebook/notebook.xml b/addons/web/static/src/core/notebook/notebook.xml index 55fd1da773d..bf244bcddc1 100644 --- a/addons/web/static/src/core/notebook/notebook.xml +++ b/addons/web/static/src/core/notebook/notebook.xml @@ -2,11 +2,11 @@ -
+
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss index 448d7a3e243..802ee3a7369 100644 --- a/addons/web/static/src/views/form/form_controller.scss +++ b/addons/web/static/src/views/form/form_controller.scss @@ -219,12 +219,9 @@ } .o_notebook { - > .o_notebook_headers { - @include o-form-nosheet-negative-margin; - > .nav.nav-tabs { - @include o-form-nosheet-inner-left-padding; - } - } + --notebook-margin-x: -#{$o-horizontal-padding}; + --notebook-padding-x: #{$o-horizontal-padding}; + > .tab-content > .tab-pane > :first-child { // These elements will appear attached to the tabs &.o_field_x2many.o_field_x2many_list { @@ -484,55 +481,12 @@ clear: both; // For the notebook not to have alongside floating elements margin-top: $o-form-spacing-unit * 2; - > .o_notebook_headers { - @include o-form-sheet-negative-margin; + --notebook-margin-x: -#{$o-horizontal-padding}; + --notebook-padding-x: #{$o-horizontal-padding}; - @include media-breakpoint-down(md) { - overflow-x: auto; - &::-webkit-scrollbar { - display: none; - } - .nav.nav-tabs { - flex-flow: row nowrap; - } - } - - > .nav.nav-tabs { - @include o-form-sheet-inner-left-padding; - border-bottom-color: $border-color; - - > .nav-item { - white-space: nowrap; - - > .nav-link { - color: $body-color; - border-color: $border-color; - background-color: white; - - &:hover, &:focus, &:active { - outline: none; - color: $link-color; - } - - &.active { - border-bottom-color: white; - - &, &:hover, &:focus, &:active { - color: $headings-color; - border-top-color: $o-brand-odoo; - } - } - - &.disabled { - color: $text-muted; - } - } - - + .nav-item { - margin-left: -1px; - } - } - } + @include media-breakpoint-up(lg, $o-extra-grid-breakpoints) { + --notebook-margin-x: -#{$o-horizontal-padding * 2}; + --notebook-padding-x: #{$o-horizontal-padding * 2}; } > .tab-content { diff --git a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss index 9e50f0de314..60bad7f31d5 100644 --- a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss +++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss @@ -1,45 +1,31 @@ // container ghost card in modal -.o_kanban_examples_dialog .modal-body { - display: flex; - padding: 0px; - background: map-get($theme-colors, 'light'); - - // sidebar - .o_notebook_headers { - flex: 0 0 auto; - border-right: 1px solid map-get($grays, '300'); - background: white; - - > ul > li { - margin: 0; - border-bottom: 1px solid map-get($grays, '300'); - - > a { - padding: 12px 15px; - border-left: 3px solid transparent; - &:not(.active) { - color: $o-main-text-color; - } - &:focus { - outline: none; - } - } - &.active > a { - color: $headings-color; - border-left-color: $o-brand-primary; - font-weight: bold; - } - } +.o_kanban_examples_dialog { + .modal-body { + padding: 0; + background: map-get($theme-colors, 'light'); } - // content - .o_notebook_content { - flex: 1 1 100%; - min-height: 300px; + .o_notebook { + --notebook-link-border-color: #{$border-color}; + --notebook-link-border-color-hover: #{$border-color}; + --notebook-link-border-color-active-accent: #{$o-brand-primary}; - .o_kanban_examples_description { - padding: 16px 16px 0; - text-align: justify; + // sidebar + .nav-link.active { + &, &:hover, &:focus, &:active { + border-right-color: var(--notebook-link-border-color-active); + } + } + + // content + .o_notebook_content { + flex: 1 1 100%; + min-height: 300px; + + .o_kanban_examples_description { + padding: 16px 16px 0; + text-align: justify; + } } } }