UI RFE: highlight a note's notebook ancestry trail, regardless if the notebooks are collapsed or not

[t0dd]

3.7.16
See screenshots.

If your active note is several notebooks deep in a hierarchy, and that hierarchy gets collapsed, you lose all context to what notebook the note resides.

Also, I would love to see each tier highlighted in some way so I retain contextual understanding of the hierarchy in which I am working.

In this example, I am working in 'Notebook level 3-02'. Ideally 'Notebook level 1' would have some contextual indication as would 'Notebook level2' so that as those notebooks are collapsed, I can have a quick means to grok where I am in my gazillion notebooks.

---

[mrjo118]

Note that this feature which will be in Joplin 3.8, and it expands the notebooks containing the relevant notebook if necessary, then scroll it into view

[t0dd]

@mrjo118

this feature which will be in Joplin 3.8, expands the notebooks containing the relevant notebook if necessary, then scroll it into view

That too is a useful feature. Both your idea and what I am proposing here would help keep note organization in context in our brains.

[t0dd]

I figured out a partial solution via userchrome.css for the ancestry trail portion of my RFE. This is just an example, I would nuance the styling, of course. This will wrap a yellow border around each ancestor notebook in a tree of notebooks.

The CSS to a depth of 6 (this is very … brute force because the DOM hierarchy is flat):

/* Depth 1 */
.list-item-container.list-item-depth-1 {
    &:has(~ .selected:not(.list-item-depth-1)):not(:has(~ .list-item-depth-1 ~ .selected)) {
        border: 1px solid yellow;
    }
}

/* Depth 2 */
.list-item-container.list-item-depth-2 {
    &:has(~ .selected:not(:is(.list-item-depth-1, .list-item-depth-2))):not(:has(~ :is(.list-item-depth-1, .list-item-depth-2) ~ .selected)) {
        border: 1px solid yellow;
    }
}

/* Depth 3 */
.list-item-container.list-item-depth-3 {
    &:has(~ .selected:not(:is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3))):not(:has(~ :is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3) ~ .selected)) {
        border: 1px solid yellow;
    }
}

/* Depth 4 */
.list-item-container.list-item-depth-4 {
    &:has(~ .selected:not(:is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3, .list-item-depth-4))):not(:has(~ :is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3, .list-item-depth-4) ~ .selected)) {
        border: 1px solid yellow;
    }
}

/* Depth 5 */
.list-item-container.list-item-depth-5 {
    &:has(~ .selected:not(:is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3, .list-item-depth-4, .list-item-depth-5))):not(:has(~ :is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3, .list-item-depth-4, .list-item-depth-5) ~ .selected)) {
        border: 1px solid yellow;
    }
}

/* Depth 6 */
.list-item-container.list-item-depth-6 {
    &:has(~ .selected:not(:is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3, .list-item-depth-4, .list-item-depth-5, .list-item-depth-6))):not(:has(~ :is(.list-item-depth-1, .list-item-depth-2, .list-item-depth-3, .list-item-depth-4, .list-item-depth-5, .list-item-depth-6) ~ .selected)) {
        border: 1px solid yellow;
    }
}

Here's a screenshot.

Yay! That's super helpful!
… BUT …
If I roll up part of the tree, suddenly we lose all positional context of where we are in the tree of notebooks. Because no notebook is "selected" any more. This is very frustrating. All of they yellow bordered notebooks in the previous image should be still with borders in this image, but they are not. All context is lost because we collapsed the "2 Act" notebook:

Laurent and friends. Is there a way we could style the notebooks so that we always have a spacial understanding where we are in the tree?

[t0dd]

Replace …
border: 1px solid yellow;
… with …
* { color: var(--joplin-color-warn2); }
… in each stanza and it will be more useable / pretty and theme friendly.

[t0dd]

I implemented a solution (more refined than the one above) to one of the two problems outlined in this discourse thread:

Share your CSS

userchrome.css snippet: notebooks panel, highlight ancestry trail of selected notebook This snippet solves 1 of the 2 issues I raise in this post: UI RFE: show a note's notebook ancestry trail, regardless if the notebooks are collapsed or not Issue 1 is that I want to highlight the notebook ancestry trail in the notebooks panel when expanded. Issue 2 is to highlight that ancestry trail, even if part of, or all of the tree is collapsed. This CSS does not solve the second case. Highlighting when …

[pmslava]

This is not exactly the same UI as what you're proposing, but you might find the Whereabouts plugin useful, if you haven't come across it already.

I made it specifically to keep the current note's location visible even when the notebook tree doesn't provide enough context. It can show the full notebook path next to the note title, e.g. Level 1 / Level 2 / Level 3, regardless of whether those notebooks are collapsed in the sidebar.

[t0dd]

@pmslava

This is not exactly the same UI as what you're proposing, but you might find the Whereabouts plugin useful, if you haven't come across it already.

Whereabouts is SUPER helpful. Should be built into the UI, IMHO. Thanks for this.

But yeah, I also want to see that represented in the folders (notebooks) themselves.