Some design ideas

[Esshahn]

I quickly sketched around a bit to get some ideas out of my head... consider everything as being an idea collection and mostly out of scope. But I thought maybe there's something inside this quick sketch which you may like and find inspirational.

One premise was to find a way to differentiate from what's already there, not for the sake of just being different, but more to open the mind to alternative ways of handling the UI.

General:

• got rid of the name and empty space on top

The menu:

• made it fill the entire left side so that it doesn't look cut off anymore. For my OCD, it adds a bit of clarity
• replaced the trash bin with the folder icon, but that's not the right one either yet
• combined import and workspace save/load into two floppy icons (and we might want to switch for 5 1/4 floppies before releasing...)
• moved the BG and Border color icons to a different spot
• overall this should make quite some room for additional functionality

Thumbnails:

• Moved the thumbnails vertically and made them much bigger (it's almost like preview on MacOS now)
• thumbnails are draggable (jquery.draggable() )
• thumbnails can have a name (which exports as comment in the assembly source)
• per default, the names would be incremental (001, 002, 003...), double click to rename
• hovering over a thumbnail would show a close (X) on it's top right corner
• I forgot the "+" icon, which could fill a thumbnail sized space on the top of the thumbnail list
• Being a simple DIV, the thumbnail list is scrollable and shows a scrollbar when needed)

Colors:

• made the pickers bigger (I'm a lazy clicker...)
• border and background colors now close to the drawing colors
• same dropdown functionality like before for border and background colors

Character Selection:

• Probably the most controversial idea
• would pop up in place where the mouse pointer is to greatly speed up working with mouse
• right click or space or CMD
• very common UI pattern e.g. for 3D modelers, but something to learn for others, therefore could be optional

[nurpax]

Excellent stuff, thanks for the inspiration!

Just a quick note: I have a patch pending which removes top text and adds an app icon to top left corner. That’s already a lot more polished than current state.

As for icons. I use fontawesome for icons so the easiest (for me) way to suggest icons would be to suggest an icon from https://origin.fontawesome.com/icons?d=gallery.

[nurpax]

I'll put this on the milestone 0.2 list. There's some good ideas here.

Supporting two types of different layouts might be pretty easy with CSS grid. But I majorly suck at layout so it'll take me several evenings to code, I'm sure.

[nurpax]

@Esshahn btw now that I added that real application menu, how about we drop save/load/import/export altogether from the left toolbar and keep it to painting related items only?

[Esshahn]

Yes I think that's a good idea!

[nurpax]

Moved import/export/save/load into the application menu in 64129e48635f57c63e4852c1f395d6bf8a524caa.

IMO the UI is sooo much cleaner now.

[Esshahn]

closing. mostly outdated and/or implemented.