Folder Hierarchy with icon, Hierarchy line

Hello,

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

Take a look here (at 2"30):

And here :

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.

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

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.

1 Like

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;
}
1 Like