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

[IMP] web: cleanup notebook's styling in Form & Kanban examples

Browse Source 
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) <adr@odoo.com>
This commit is contained in:
Pierre Paridans
2022-10-03 12:00:41 +02:00
parent dc0ffd2015
commit 16ddf96e0f
4 changed files with 57 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/notebook/notebook.scss
+23 -14
View File
@@ -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;
}
}
}
addons/web/static/src/core/notebook/notebook.xml
+2 -2
View File
@@ -2,11 +2,11 @@
<templates xml:space="preserve">
<t t-name="web.Notebook" owl="1">
<div t-attf-class="o_notebook d-flex w-100 {{ props.orientation == 'horizontal' ? 'horizontal flex-column' : 'vertical flex-row' }} {{ props.className }}" t-if="state.currentPage">
<div t-attf-class="o_notebook d-flex w-100 {{ props.orientation === 'horizontal' ? 'horizontal flex-column' : 'vertical flex-row' }} {{ props.className }}" t-if="state.currentPage">
<div class="o_notebook_headers" t-att-class="{ 'm-0': props.orientation === 'vertical' }">
<ul t-attf-class="nav nav-tabs {{ props.orientation === 'horizontal' ? 'flex-row flex-nowrap' : 'flex-column p-0' }}">
<li t-foreach="navItems" t-as="navItem" t-key="navItem[0]" class="nav-item flex-nowrap cursor-pointer" t-if="navItem[1].isVisible">
<a class="nav-link" t-att-class="{ active: navItem[0] === state.currentPage, 'p-3': props.orientation === 'vertical'}" t-att-name="navItem[1].name" t-on-click.prevent="() => state.currentPage = navItem[0]" href="#" role="tab" tabindex="-1" t-esc="navItem[1].title"/>
<a class="nav-link" t-attf-class="{{ navItem[0] === state.currentPage ? 'active' : '' }} {{ props.orientation === 'vertical' ? 'p-3 rounded-0' : '' }}" t-att-name="navItem[1].name" t-on-click.prevent="() => state.currentPage = navItem[0]" href="#" role="tab" tabindex="-1" t-esc="navItem[1].title"/>
</li>
</ul>
</div>
addons/web/static/src/views/form/form_controller.scss
+8 -54
View File
@@ -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 {
addons/web/static/src/views/kanban/kanban_examples_dialog.scss
+24 -38
View File
@@ -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;
}
}
}
}