feat: Make zoom controls and trash can native SVG #9128
Conversation
Change-Id: Ied0a26ebfff7a02183a00ddd7d2ed08c4346f65b
Change-Id: Iae2ee10ebf7ecb5b99414661271c51c818d69915
rachel-fenichel
requested review from
gonfunko
and removed request for
rachel-fenichel
|
Thanks for sending this over! In general this looks good, but I'm concerned that there's not a route for developers to fully replace (not just style) the SVGs. Could the SVGs perhaps be stored in the media directory where the PNGs were and loaded from the injected media path? Then we'd have the best of both worlds such that they'd be styleable to address contrast concerns, but also still entirely replaceable to allow for deeper customization. |
|
@gonfunko We could make the functions protected and allow developers to override them with their own implementations (which could be SVG or PNG). |
|
The issue there is that there's not a supported way to replace the |
|
@gonfunko If that's a potentially acceptable solution I could go ahead and take a stab at it. |
Yes, that is. |
Change-Id: Ied0a26ebfff7a02183a00ddd7d2ed08c4346f65b
The basics
The details
Resolves
Fixes #4821
Proposed Changes
This change inlines the SVG from sprites.svg into the trashcan and zoom control classes, allowing for them to be styled with CSS.
Reason for Changes
Currently, the controls are rendered as PNGs, which makes creating high contrast versions in both regular theme and dark mode both
Test Coverage
Documentation
It may be worth noting in the documentation that product builds on Blockly can override the colors using the
.blocklyZoomand.blocklyTrashclasses.Additional Information
Note that to make the controls interactive in Firefox I had to create a non-zero fill opacity, otherwise the mouse events are only captured by the control outlines. We may also want to consider building the SVG based on the other constants rather than the hard coded values taken from sprites.svg.