Hello,
As title, could you pls show me how to do these things with current Joplin Windows/Android?
Sample Picture for your ref:
Hello,
As title, could you pls show me how to do these things with current Joplin Windows/Android?
Sample Picture for your ref:
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.
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;
}