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

[IMP] web: make "notebook" component more consistent

Browse Source 
"Notebook" component had to be adapted to make the use of tabs
more consistent trough the app. The component now allows a use of
default tabs style in a vertical display

task-2950591

Part-of: odoo/odoo#98706
This commit is contained in:
Antoine (anso)
2022-09-15 12:40:55 +02:00
committed by Romain Derie
parent fff916da1b
commit 68f1c90a03
3 changed files with 68 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/notebook/notebook.scss
+60 -6
View File
@@ -1,18 +1,72 @@
.o_notebook {
&.horizontal {
flex-direction: column;
--notebook-margin-x: 0;
--notebook-padding-x: 0;
--notebook-link-border-color: transparent;
--notebook-link-border-color-active: #{$border-color};
--notebook-link-border-color-hover: #{$gray-200};
--notebook-link-border-color-active-accent: #{$border-color};
.nav.nav-tabs {
flex-flow: row nowrap;
.o_notebook_headers {
margin: 0 var(--notebook-margin-x, 0);
}
.nav {
padding: 0 var(--notebook-padding-x, 0);
background-color: $o-view-background-color;
}
.nav-item {
white-space: nowrap;
}
.nav-link {
border: 1px solid 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));
border-bottom-color: $o-view-background-color;
}
}
&:hover {
border-color: var(--notebook-link-border-color-hover);
}
}
&.vertical {
flex-direction: row;
.o_notebook_headers {
border-right: 1px solid $border-color;
}
.nav.nav-pills {
.nav {
width: max-content;
border-bottom: 1px solid var(--notebook-link-border-color);
}
.nav-item {
margin: 0 -1px -1px 0;
&:first-child .nav-link {
border-top-width: 0;
}
}
.nav-link {
border: 1px solid var(--notebook-link-border-color, transparent);
&.active {
border: 1px solid var(--notebook-link-border-color-active);
&, &:hover, &:focus, &:active {
border-left-color: var(--notebook-link-border-color-active-accent, var(--notebook-link-border-color-active));
border-right-color: $o-white;
}
}
}
}
}
addons/web/static/src/core/notebook/notebook.xml
+6 -6
View File
@@ -2,15 +2,15 @@
<templates xml:space="preserve">
<t t-name="web.Notebook" owl="1">
<div t-attf-class="o_notebook d-flex w-100 {{ props.orientation }} {{ props.className }}" t-if="state.currentPage">
<div class="o_notebook_headers">
<ul t-attf-class="nav {{ props.orientation === 'horizontal' ? 'nav-tabs' : 'nav-pills flex-column' }}">
<li t-foreach="navItems" t-as="navItem" t-key="navItem[0]" class="nav-item" t-if="navItem[1].isVisible">
<a class="nav-link" t-att-name="navItem[1].name" t-on-click.prevent="() => state.currentPage = navItem[0]" href="#" role="tab" tabindex="-1" t-att-class="{ active: navItem[0] === state.currentPage}" t-esc="navItem[1].title"/>
<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"/>
</li>
</ul>
</div>
<div class="o_notebook_content tab-content">
<div class="o_notebook_content bg-white pt-3 tab-content">
<div class="tab-pane active" t-ref="activePane">
<t t-if="page" t-component="page.Component" t-key="state.currentPage" t-props="page.props" />
<t t-else="" t-slot="{{ state.currentPage }}" />
addons/web/static/tests/core/notebook_tests.js
+2 -2
View File
@@ -49,7 +49,7 @@ QUnit.module("Components", (hooks) => {
);
assert.hasClass(
target.querySelector(".nav"),
"nav-tabs",
"flex-row",
"navigation container uses the right class to display as horizontal tabs"
);
assert.containsN(
@@ -184,7 +184,7 @@ QUnit.module("Components", (hooks) => {
);
assert.hasClass(
target.querySelector(".nav"),
"nav-pills",
"flex-column",
"navigation container uses the right class to display as vertical buttons"
);
});