Mobile Re-styling

Development
1

Hi Joplin Community!

I’ve started playing around with updating some of the styling on the Joplin mobile app, my initial motivation was just to fix the OLED theme, but once I started I couldn’t stop.
I’m hoping to get some feedback and idea for how people would like the mobile app to look (color suggestions etc.). Mockups are of course welcome!

I started playing around with just the OLED theme, but I would like to apply the updates to all themes if people like the general direction. I do think the Light and Dark themes are deserving of more color than the OLED theme.

Screenshot_20200313-221516
Screenshot_20200313-221516720×1280 24.4 KB
Screenshot_20200313-221546
Screenshot_20200313-221546720×1280 21 KB
Screenshot_20200313-221942
Screenshot_20200313-221942720×1280 82.9 KB

1 Like
2

Update from some work today. Again please give any feedback that comes to mind.

Screenshot_20200315-014947
Screenshot_20200315-014947720×1280 28.1 KB
Screenshot_20200315-014951
Screenshot_20200315-014951720×1280 33.6 KB
Screenshot_20200315-015007
Screenshot_20200315-015007720×1280 27.7 KB
Screenshot_20200315-015011
Screenshot_20200315-015011720×1280 33.4 KB
Screenshot_20200315-015022
Screenshot_20200315-015022720×1280 25.6 KB
Screenshot_20200315-015026
Screenshot_20200315-015026720×1280 31.4 KB

3

Looking good!

  • I like that you have moved to more subtle grey lines throughout in the dark modes, looks nice.
  • I noticed you added the updated time to the list view, I think that might make the list much longer, and isn't something I would want to see too often. Maybe a setting?
  • I am forever clicking the edit inside a note instead of the plus icon on accident because it's not immediately obvious if I'm in a note when I open the app. I wonder if making that icon in the red circle a different color between the two screens might be better? Could also be fixed with a subtly different header color when you are inside a note? Might just be my prob :slight_smile:
  • Not sure if you have control over it, but at least on iOS, the dark modes are still using the light keyboard which is jarring.
4

There is a setting where you can select Updated/Created/Nothing :slight_smile:

Maybe there edit icon should be changed to something else? It's not exactly the most intuitive part of joplin.

Quick search says this is sadly not something we can control.

5

Ah, no problem. Thanks for checking!

It is also a gripe I have with Material design in general, since my thumb is usually hovering right over the icon. Good for quick tap, bad for seeing what's on it.

Started to play around with some mockups to see if I could solve the issue. Here's my take on the light mode. The giant toggle to switch modes might be a little overkill, but I figured I'd throw it out for feedback.

iOS-light
iOS-light2000×933 274 KB

NoteList
NoteList720×1280 36 KB
NoteHTML
NoteHTML720×1280 37.4 KB
NoteMarkdown-needs-saving
NoteMarkdown-needs-saving720×1280 95.7 KB
NoteMarkdown-saved
NoteMarkdown-saved720×1280 95.9 KB

2 Likes
6

I really like these mockups! Sorry for the delayed response, I’ve been trying to make time to work on this. At least from the noteviewer, since it’s such a large change I would want to do that as a separate change (probably add a new theme for it). Put I will definitely draw from your work here!

7

Awesome! Excited to see where you land.

8

Hi,
this looks really good!
Is there any chances for this to be implemented in a near future? I find the OLED theme quite ugly with the blue bar on the top and the notification bar in grey…