Cleaner design of the sidebar?

For people to recreate the existing look with userstyle.css we will need both a .selected class and a .notebook-level-[x] class added. Right now you cannot tell what level a notebook is with CSS only since it is only being applied visually with inline styles.

Regardless, I vote no background, except for a selected state, with > v symbols on the left. (aka option M + a selected state). With this option, I think it will also look better to move the symbols for “tags” and “notebooks” the left as well.

Here’s a quick mockup:

1 Like

I would prefer the icons of “Notebooks” and “Tags” in @uxamanda’s design to have the same brightness as the text (#5F5F5F), for two reasons:

  • To visually unindent them
  • These icons are not controls (in fact, the entire line is currently a control, but that could be changed)

And wouldn’t it be more logical to indent “All notes” including its icon and to make that icon brighter as well, so that it aligns “Notebooks” and “Tags” and their icons?

That all makes sense to me. Sadly I mocked it up by editing in the dev tools so it is hard to recreate and show with your fixes, but I agree with all of your edits.

Yes that would be a good compromise, and not too hard to implement.

1 Like

I get the feeling that option M is the best. Should we go with this one?

4 Likes

Yep, I like M, but it’s not much different to the current design. It’s basically just removing the background color and replacing the icons.

Ok, version M has been implemented in this commit: https://github.com/laurent22/joplin/commit/f51873d87705d9305c6e93f8248dc12a45f9814c

For those who still want the colour gradient, there’s a class list-item-depth-$DEPTH on each sidebar item, which can be used to style the item depending on the depth.

10 Likes

Thanks @memophen for researching the issue!

I enjoy the new layout via @uxamanda 's user stylesheets, thanks for bringing this up, I actually thought it would be in your category !Onvindbaar but glad we found it.

Lourens

Been enjoying this update, thank you. I really wish there was a class to target the selected Notebook. It’s one of the only colors I have in my theme, so it would be great if it was targetable.

Ideally something as simple as a selected or active:

class="list-item-container selected"

We could reuse the same class in both the notebook and notes lists since it’s easy to distinguish between those in CSS.

Maybe you could add that to