Small screen mode for palettes

[blurymind]

This PR introduces a new small screen mode for the GUI to make it easier to use on smartphones

• Chickenpaint works just as before on normal sized screens

When on small screen:

• the palette close button disappears, as it is too easy to tap by mistake and bringing a palette back from the menu is a pain in the neck on a smartphone
• a new behaviour is added to the palette headers. Tapping on it makes it toggle the visibility of its body on/off. This allows us to easily and quickly toggle it when we need it
• On some controls - such as for example when selecting a tool - the palette is smart enough to automatically toggle itself off as it correctly assumes that the user has performed the action (similar to how artrage and other mobile painting apps work). We can do the same for when the user selects another layer, swatch or brush mode.
• You can still move palettes around by dragging them by the header as before.

I also added palette toggle buttons that will show up in place of that giant Chickenpaint text when on small screens:

they do the same thing the palettes menu in the dropdown does but in a single click instead of three clicks. It would be nice if they get icons of course, for now they are using the mnemonic single letter.

(Tested on a Galaxy note 10 smartphone, does improve the drawing experience a lot as it makes the widgets get out of the way of the canvas as well as making them easier to quickly access and dismiss/close)

closes https://github.com/thenickdude/chickenpaint/issues/32

[thenickdude]

Thanks! I'm currently working on merging this with new global full-screen and small-screen handling

[blurymind]

thanks, no worries :) thank you for looking into this.

Btw I can simplify the pr so it doesnt do the palette collapse feature if you want to. To me being able to have those quick access header buttons for easy access makes a huge difference already

[thenickdude]

I've merged and published this now! Thanks for the PR!

I made a bunch of improvements to palette layout that should make it a lot nicer to use on small screens.

I've updated the example page so you can try it out there, it goes fullscreen automatically on small screens due to the fullScreenMode: "auto" setting provided:

https://thenickdude.github.io/chickenpaint-example/

[blurymind]

thank you for working on this :) It would be nice if some (like the tool selector) can be automatically dismissed when used, but this is already a huge upgrade for mobile screens