Folder Hierarchy with icon, Hierarchy line

[F5LV]

Hello,

As title, could you pls show me how to do these things with current Joplin Windows/Android?
Sample Picture for your ref:

[anon55947162]

Take a look here (at 2"30):

SCOM1089 - Joplin - Preview

And here :

Joplin 2.7 is available!

This new release is largely focused on bug fixing and optimising various parts of the apps. There's about 26 improvements and 25 bugs and security fixes included - as always many of these apply to both the mobile and desktop app (see the desktop changelog and mobile changelog). Many thanks to all the contributors who helped create this release! Below are some of the more noticeable changes: Notebook custom icons Since version 2.6 it was possible to assign an emoji icon to a notebook, and wit…

[Daeraxa]

I think they are also after the heirachy lines in the note view that link up folders like an OS tree command, I had a very quick go at doing it via CSS but wasn't overly successful.

[F5LV]

If Joplin has Many Folders/Sub-Folders then Hierachy icons/Lines is very necessary.
Hope DEV will make it soon ...

[whitewall]

I agree it would be nice. This is what I have done to help me see the hierarchy better:

div.list-item-depth-1 {
	padding-left:10px;}

div.list-item-depth-1 .list-item::before{
	content:"∙";}

div.list-item-depth-2 {
	padding-left:20px;}

div.list-item-depth-2 .list-item::before{
	content:"-";}

div.list-item-depth-3 {
	padding-left:30px;}

div.list-item-depth-3 .list-item::before{
	content:"–";}

div.list-item-depth-4 {
	padding-left:40px;}

So that's a dot, a hyphen, and an en dash. I could have added an em dash but I haven't so far.

[t0dd]

@whitewall

This is what I have done to help me see the hierarchy better:

I kinda took this and spent far too much time playing. But it is helpful. This is the CSS that I added to my userchrome.css:

/* folder list with depth symbols in front of them */
div.list-item-depth-0:not(.all-notes) { padding-left: 0px; }
div.list-item-depth-0:not(.all-notes) .list-item::before {
    /* other symbols: | _ ⁓ ‖ ⁑ ≡ ︴ ⌇ ⟫ ❱❱ ❱ ⚝ ⓪ ⓿ ⦿ ◈ ✻ 🏵 ▦ 〣 ⊶ ⏸ */
    content: "⛬";
    margin-right: 2px;
}
div.list-item-depth-1 { padding-left: 15px; }
div.list-item-depth-1 .list-item::before {
    /* other symbol: ∙ */
    content: "․";
    margin-right: 2px;
}
div.list-item-depth-2 { padding-left: 30px; }
div.list-item-depth-2 .list-item::before {
    /* other symbol: : */
    content: "⁚";
    margin-right: 2px;
}
div.list-item-depth-3 { padding-left: 45px; }
div.list-item-depth-3 .list-item::before {
    content: "⋮";
    margin-right: 2px;
}
div.list-item-depth-4 { padding-left: 60px; }
div.list-item-depth-4 .list-item::before {
    /* other symbol: ⁞ */
    content: "․⋮";
    margin-right: 2px;
}
div.list-item-depth-5 { padding-left: 65px; }
div.list-item-depth-5 .list-item::before {
    content: "⁚⋮";
    margin-right: 2px;
}
div.list-item-depth-6 { padding-left: 70px; }
div.list-item-depth-6 .list-item::before {
    content: "⋮⋮";
    margin-right: 2px;
}