From 68f1c90a031a7c2f751d9c8eca7ff525e9f7e206 Mon Sep 17 00:00:00 2001
From: "Antoine (anso)" <anso@odoo.com>
Date: Tue, 23 Aug 2022 13:30:22 +0000
Subject: [PATCH] [IMP] web: make "notebook" component more consistent

"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
---
 .../static/src/core/notebook/notebook.scss    | 66 +++++++++++++++++--
 .../web/static/src/core/notebook/notebook.xml | 12 ++--
 .../web/static/tests/core/notebook_tests.js   |  4 +-
 3 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/addons/web/static/src/core/notebook/notebook.scss b/addons/web/static/src/core/notebook/notebook.scss
index ca1b5e38c51..ad31f4fa375 100644
--- a/addons/web/static/src/core/notebook/notebook.scss
+++ b/addons/web/static/src/core/notebook/notebook.scss
@@ -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;
+                }
+            }
         }
     }
 }
diff --git a/addons/web/static/src/core/notebook/notebook.xml b/addons/web/static/src/core/notebook/notebook.xml
index 2604f6a501a..d819b3818df 100644
--- a/addons/web/static/src/core/notebook/notebook.xml
+++ b/addons/web/static/src/core/notebook/notebook.xml
@@ -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 }}" />
diff --git a/addons/web/static/tests/core/notebook_tests.js b/addons/web/static/tests/core/notebook_tests.js
index ab3043f8f78..186231d2de4 100644
--- a/addons/web/static/tests/core/notebook_tests.js
+++ b/addons/web/static/tests/core/notebook_tests.js
@@ -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"
         );
     });