[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 odoo/documentation#6512

X-original-commit: c62bf21987
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Mathieu (mano)
2023-06-06 15:14:32 +02:00
committed by Antoine Vandevenne (anv)
parent 671cca36a6
commit 07c50eae7a
10 changed files with 56 additions and 19 deletions

View File

@@ -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');
}
});
})();