Slightly improve mobile support

[chiaravalle]

Hello there.
I like this App so much, and it works on my mobile so well.
The only drawback is that, when content overflows (eg. menu or window content), there's no ability to scroll down to see it.

Keep up the great work!

[viliusle]

I am not sure if i understand problem, but this should help:

[chiaravalle]

No, I'm talking about the UI

[viliusle]

I stilll do not understand your issue.

[Giwayume]

Do you mind if I do a UI overhaul & try to make it a little more intuitive or are you attached to the way it works right now?

[Giwayume]

In terms of this issue, when the application window is height-limited, many parts of the UI don't account for this. For example, the effects dropdown is very tall and can easily get cut off on small screens so you can't click on the bottom options in the dropdown.

[viliusle]

I looked again, tested and i see and understand these issues:

• Menu does not fit on screens with small height screens (for example effects)
• top tools (on right side after logo) does not fit on narrow screen
• mobile button is useless on mobile, because right side tools (except preview section) does not fit anyway
• Left side tools does not fit on small height screens - normal priority
• modal windows (for example save) can be improved on small screens, also can not be closed !!!
• center canvas if it is much smaller than screen.
• fix low contrast issues on all themes (can be tested using chrome Lighthouse plugin)
• mark selected pencil/borders layer?
• try to reduce rasterize warnings, auto-convert with message toast?

p.s. i will try to edit this list, so if anything is missed - please add it in comments.

[viliusle]

Do you mind if I do a UI overhaul & try to make it a little more intuitive or are you attached to the way it works right now?

I am really happy with desktop UI, i believe it works well, but mobile UI can be improved a lot. So please do (you are talking about mobile, right?).

[Giwayume]

I'm kind of talking a mixture of everything, though the mobile experience obviously needs the most work.

• First thing that stands out to me is it looks like a Windows 95 application, could definitely benefit from re-skinning, though I would consider that a low priority.
• The fact that you have to rasterize so many things just to work with them is a big problem that's counter intuitive to what I'd expect. For example, if I draw a line with a pencil, then switch to the eraser I'd expect it to erase the line instead of give me an error message saying I need to rasterize the line. The eraser should either modify the line as a vector and erase an entire stroke, or auto-convert the pencil to a raster layer when you start erasing. This is just one example, but the entire editing process is slow because so many things need to be rasterized in order to edit them with other tools. Photoshop has this big usability problem where it throws up a blocking alert box every time you do something slighly "wrong". At least you show a toast, but it's better to make an educated assumption for the user and let them undo it if they don't like the result than to throw so many warnings up.
• Would be good if the sidebar could scroll vertically, ability to reorganize, add/remove these sidebar tools. It took me a while to find the layer list at first because it was crammed in the bottom right. I wasn't sure whether or not there was one.
• I'd expect the canvas viewport to be centered in the screen when zooming out, as opposed to top left. On very large screens this is especially a problem because it can be uncomfortable to focus on a corner of the screen for a long period of time (moving your neck & eyes to a non-neutral position for extended periods)
• Could speed up some things by taking over the browser's right-click and assigning actions/context menus.
• When using the selection tool, any layer selected should show a bounding box around it, not just the shapes. Otherwise, the only way you can tell something is selected is to look at the layer list, and hopefully remember which layer name is associated with which shape you drew (this adds a lot of cognitive load).
• There are a lot of small things that could be improved with each individual tool, which is why I said overhaul. In reality, many of these things would just be tackling them one at a time and discussing how they can be improved.

In terms of the rasterization problem, you could store vector & other tool modification data on the same layer. For example, if I add text, then use the sharpen or blur tool to modify it, the application can store the mouse movements made with the blur or sharpen tool so the rasterized result can be re-created even if the text is changed after the fact.

[viliusle]

First thing that stands out to me is it looks like a Windows 95 application

Disagree, but I do my best to make it looks as good as possible and try to improve it when i find good ideas, but i am not designer.

In terms of the rasterization problem, you could store vector & other tool modification data on the same layer

It would take some time to implement it, i will skip this for now and focus on more important things.

[list]

moved to todo comment #167 (comment)

[Giwayume]

I work as a UI designer in my day job. I have ideas on how to improve it, but I don't want to go in and make sweeping changes to the look & feel if you won't accept them.

The worst part right now is with the default "dark" theme, the background and text color has too low contrast. There are many other things that can be improved, from how certain controls that are reused throughout the application look and work, to improving layouts.

[viliusle]

All contrast problems should be fixed (added to todo).

I don't want to go in and make sweeping changes to the look & feel if you won't accept them.

Please mention all issues that you see. If it will be not hard to fix it and it will be better for most people, i will agree and implement it. Of course i would like short discussion first to avoid work, that could not be accepted for some reasons.

p.s. i had busy day, will check and test your PR tomorrow.

[Giwayume]

Please mention all issues that you see.

I think I'm going to take the piecemeal approach and tackle sections of the app one at a time, since there's a ton of functionality in this thing. That's my intent behind #174, just starting somewhere.

If we end up replacing an existing pattern in one section of the app with a better one, maybe at that point in time consider applying that pattern across other features.

[Giwayume]

One thing specifically for mobile, most mobile browsers trick the website into thinking it has a lower resolution than it actually does, e.g. 1px on the webpage does not equal 1px on the phone screen. This causes noticable aliasing on the canvas, rendered much lower than the phone's screen resolution. Just need to take devicePixelRatio into account when rendering the canvas to fix this.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio