Home / GitHub Page

Design suggestion: have you seen Notable?

I love the small changes to the app, especially on mobile (like I have written before), but I’m curios if you have seen Notable?

I personally believe the apps looks a bit better than the current version of Joplin. While I like a lot of it, I just feel like it has a bit too many borders. Not sure if there is ever a plan to be able to add custom themes? Otherwise if anyone have time, I would love to see a dark theme more like the one I posted if possible. :slight_smile:

Just a small suggestion, I love the app, so I see no reason to switch away from it, but a bit cleaner design would be nice. :slight_smile:

Joplin being open source means that not only themes, but everything is customizable! And the nice thing is that of you make a change you can push it back and everyone else will benefit.

Something like this is a great way for you to get involved in an open source project, first you just change a theme, but soon you get more familiar for the project and you can start adding larger and larger features!

From the screenshot there are 2 things I like:

  • the number of notes per notebook/folder
  • no lines between notes

We had a PR once that added the number of notes, but it was abandoned, thus never merged.
It would be great to add a setting to hide the lines between notes, so people can choose the appearance that works. Unfortunately I don’t know how to remove those lines, otherwise adding a new setting in the section Appearance would be trivial.

Yeah. I agree. I just think everything looks a bit cleaner in Notable than in Joplin. However, I love Joplin for all the features and such, so I wouldn’t want to switch. :smiley:

If someone can explain to me how to remove those lines, I could add a new setting.
That is if Laurent accepts such a PR.

I hope that someone reads this and either replies or creates a PR…

@tessus Line 43 of ElectronClient/app/gui/NoteList.jsx is the bit of css (react css) that creates the bottom border. It actually looks pretty good with that removed, you might want to consider adding it without a Setting.

I think if we make design changes, we should create a mockup first to know what we’re going to get. I can’t say if I’ll merge or not as I don’t know how it will look.

1 Like

And indeed I agree it should not be an option. If we make the change it will be for everybody.

I really don’t get it. Why is it necessary to force UI changes onto the user? We could hide such things behind an expert flag, or use “hidden” settings.
I’m sure that appearance is a major point for users. Some prefer one option, some the other. Why is it bad to give users a choice?
(off-topic: I’m still rather annoyed that I cannot set the page size for PDF export)

Anyway, here’s the mockup:

1 Like

Sometimes it’s hard to get a good impression if it’s just a clipping. Thus here the full window look:


I like that it matches the left bar which also doesn’t have borders. Additionally, it might be worth making the note list a bit denser since it will still read correctly without the lines.


Is there any way of keeping the lines if the title of a note is longer then the allocated space and wraps onto the next row?

The note titles are never wrapped in the list.

Yep, changing the itemHeight from 34 to 30 looks a lot better.

About the numbers, I don’t like the idea of having them, as I love to have the main sidebar as tight as possible, allowing me to have the layouts wider. I also don’t see the improvement to have a numbered list of notes on each notebook.

I like the note list without the lines. Thanks for taking the time to supply the mock-up.

The mock-ups looks really nice! :slight_smile: Personally I just feel like using a lot of border (rather than whitespace), feels like an older design language. Though that is what I just wrote, a personal feeling. :slight_smile: That was the reason I suggested it. I just like clean simple design, with whitespace rather than a ton of borders. I feel a bit the same about how the “notename” has a full border around it. I would probably rather see something where it just have a bottom border, and it goes all the way to include the date on the side. Once again though, just my personal opinon. :slight_smile:

I agree with you @AtBios. Too many boxes and lines can be very distracting. I also like the idea wrt the title styling. Maybe there’s something that can be done there as well. I just don’t know how to work with the dev console to figure out wher this element is defined. I’m very bad with HTML/CSS UI stuff.

@tessus most of the styling is defined through javascript. Unfortunately that means it can sometimes take a bit of searching to find a smaller component such as the title.

Interesting. I would have thought that the other UI elements are also handled by CSS, like the lines you pointed out earlier.