[IMP] odoo_theme: toctrees-l1,l2 design improvement

Issue 1:
========
The toctrees in the documentation are visually inconsistent because of
the content. Sometimes we have titles that are also links and visually
collides with the rest of the toc making it hard to read. This applies
to toctree-l1 and toctree-l2.

Fix 1:
========
When we have a link and title toctree-l2 in a list containing other
nested toc, we apply another styling displaying it with the same color
as a title, but with an icon and hover behavior indicating that it is a
link. (This commit also changes the direction of the i-link icon to make
it standard).

Issue 2:
========
When we have only have toctree-l1 links without nested toc the toctree
is uselessly taking a lot of space.

Fix: 2
========

In these scenario we add a class to the toctree wrapper to replace the
toctree-l1 style with a toctree-l2.

task-3138525
task-3138563

part of

task-3059178

closes #4674

Signed-off-by: Antoine Vandevenne (anv) <[email protected]>

Author: mano-odoo

extensions/odoo_theme/static/fonts/icomoon.eot

@@ -34,7 +34,25 @@
         // Make all external links open in a new tab by default.
         content.querySelectorAll('a.external').forEach(externalLink => {
             externalLink.setAttribute('target', '_blank');
-        })
+        });
+
+        let canAccessAllL1Toctrees = true; // Whether all direct children have a ref.
+        const toctreeWrapper = document.querySelector('.toctree-wrapper');
+        toctreeWrapper?.querySelectorAll('.toctree-l1').forEach(l1Toctree => {
+            // Flag L2 toctrees that have L3 children.
+            if (l1Toctree.querySelector('.toctree-l3')) {
+                l1Toctree.querySelectorAll('.toctree-l2').forEach (l2Toctree => {
+                    l2Toctree.classList.add('o_toc_contains_l3');
+                });
+            }
+            if (l1Toctree.querySelector('a').getAttribute('href') === '#') {
+                canAccessAllL1Toctrees = false;
+            }
+        });
+        if (canAccessAllL1Toctrees) {
+            // Use the style of L2 toctrees on L1 toctrees.
+            toctreeWrapper?.classList.add('o_toc_l1_to_l2');
+        }
     });
 
 })();

extensions/odoo_theme/static/fonts/icomoon.svg

@@ -39,5 +39,5 @@ b, strong{
 }
 
 a {
-    font-weight: $font-weight-bold;
+    font-weight: var(--o-link-fontweight, #{$font-weight-bold});
 }

extensions/odoo_theme/static/fonts/icomoon.ttf

@@ -49,6 +49,7 @@ $h6-font-size:                              $font-size-base !default;
 $font-weight-lighter:         200;
 $font-weight-light:           300;
 $font-weight-normal:          400;
+$font-weight-medium:          500;
 $font-weight-bold:            600;
 $font-weight-bolder:          700;
 

extensions/odoo_theme/static/fonts/icomoon.woff

@@ -259,11 +259,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: $link-color;
+  color: var(--o-link-color, #{$link-color});
   text-decoration: $link-decoration;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--o-link-hover-color, #{$link-hover-color});
     text-decoration: $link-hover-decoration;
   }
 }

extensions/odoo_theme/static/fonts/icomoon.woff2

@@ -585,28 +585,42 @@ main.container-fluid {
 }
 
 .toctree-wrapper {
+    %toctree-custom-link {
+        > a:not([href="#"]){
+            --o-link-color: #{$o-gray-color};
+            --o-link-hover-color: #{$primary};
+
+            &:after {
+                content: ' #{$i-link}';
+                @include o-inline-icon(auto, baseline, 0.7em, $font-weight-bold);
+                color: $primary;
+            }
+        }
+    }
+
     > ul, .toctree-l1 > ul {
         padding-left: 0;
         list-style: none;
     }
 
-    .toctree-l1 > a {
-        display: block;
-        margin-top: $o-padding-m;
-        margin-bottom: $o-margin-s;
-        padding-bottom: $o-padding-xs;
-        border-bottom: 1px solid $o-gray-border;
-        @include font-size($h2-font-size);
-        font-weight: 600;
-    }
-
-    .toctree-l1 {
+    &:not(.o_toc_l1_to_l2) .toctree-l1 {
+        @extend %toctree-custom-link;
         margin-bottom: 2rem;
+
+        > a {
+            display: block;
+            margin-top: $o-padding-m;
+            margin-bottom: $o-margin-s;
+            padding-bottom: $o-padding-xs;
+            border-bottom: 1px solid $o-gray-border;
+            @include font-size($h2-font-size);
+            font-weight: $font-weight-bolder;
+        }
     }
 
-    .toctree-l2 > a[href="#"] {
-        margin-top: 0.7rem;
-        display: inline-block;
+    .toctree-l2.o_toc_contains_l3 {
+        margin-top: map-get($spacers, 3);
+        @extend %toctree-custom-link;
     }
 
     a[href="#"] {
@@ -615,6 +629,10 @@ main.container-fluid {
         pointer-events: none;
         cursor: default;
     }
+
+    .toctree-l3 > a {
+        --o-link-fontweight: #{$font-weight-medium};
+    }
 }
 
 article.doc-body {