feat: UI Refactor
Changes the UI to be cleaner and more consistent with all of the elements within it. Also adds various misc UI features that make sense to go along with this refactor.
Closes #241 (closed) Closes #240 (closed) Closes #239 (closed) Closes #215 (closed) Closes #211 (closed) Closes #207 (closed) Closes #197 (closed) Closes #196 (closed) Closes #192 (closed) Closes #188 (closed) Closes #185 (closed) Closes #177 (closed) Closes #144 (closed) Closes #136 (closed) Closes #51 (closed)
Adds a favicon for #183 (closed) but I want to do more work on favicons in another pr to make it react to pixel amounts Can theoretically complete #129 but I want to add maybe some auto detection to auto compact it on smaller screens for a future pr
New Shortcuts
- U - enable/disable the ui interface
- O - show/hide settings sidebar
- I - show/hide info sidebar
- X - swap primary and secondary selected colors
- C - enter color pick mode
Secondary Color
You can right click a color in the palette to have that as your secondary color. Right clicking the canvas instead of left clicking paints with that color.
Color pick mode
Theres now a button in the palette bar and the C hotkey to enter color pick mode which lets you select a pixel to copy the color of it. This is an alternative to middle clicking to pick color. When in color pick mode it shows oyu a preview of the color youre going to pick.
Mobile Handling
Added better handling for mobile so that its actually usable. Things shrink properly and move around so that mobile users can interact with the site without the ui looking broken.
Palette Bar
Added the capability for the palette bar to go to two lines which can be set to do in settings or by default it will do it when a sidebar is open so you can still use the entire palette. Also added better styling for numbers, added symbols for the different colors as an option and made those two auto enable or disable based on what you have the template set to (but you can also manually override it in the settings).
Added a setting to show counts of how many pixels need to be colored in for each color in the palette to complete the template. Also one for hiding any colors that arent needed in the template to complete it.
Buttons following sidebars
When you open a sidebar buttons that would be cut off now follow the sidebar by default so that you can still interact with them while the sidebar is open. This can be turned off in settings.
New Settings
Added settings to disable the camera flash, keybindings, and other things related to things that were added such as hiding hte overlay card, and enabling palette symbols. Also added a setting for making the buttons in the ui icon only.
Overlay UI
Added a new card that lets you toggle on and off different overlays without needing to go into the settings. You can expand it and then just click on the buttons for certain ones.
Misc changes
- When you open the welcome modal from settings it now closes settings
- Theres text that appears when you place a pixel or pick a color
- Prevented settings and whois from being open simultaneously because they are both right sidebars
- Added icons to various buttons
- Improved whois timestamps and table alignment
- Added a logo and favicon
- Added favicons to the left of the community links in the info sidebar
- Replaced font awesome icons with lucide icons
- On smaller screens some buttons at the top go into a more dropdown
- Removed the black backdrop from sidebars
- Made the sidebar headers sticky so that the title and close button always show
- Changed the share button icon
- Added the ability to long left click on a pixel to whois it
- Made middle clicking on blank space select white and the void deselect the color
- Adds WASD and Arrow key movement