onlook
onlook copied to clipboard
onlook-dev
[feat] Padding / Margin / Radius indicator icons
Describe the feature
These are for the icons in the topbar
- Implement the duel-color .svg Icons (attached).
.
The icon names are from the Top, going clockwise.
So, padding-TRB would be "Padding – Top, Right, Bottom" and for Radius names, radius-TRBR would be "Radius – Top Right, Bottom Right".
Margin.zip Padding.zip Radius.zip
-
Assign them to be visible for the appropriate status
-
Change the input value to be "Mixed" if the values are different, or show the value if they're the same. So for padding that has a top and bottom padding of 8, show "8" and the padding-TB icon.
-
If there is a value assigned, make the default background of the full button a bg color and the text an "active" white so it's a bit more noticeble for people to see that the element is assigned padding.
Hey @Rish-it , I had actually already completed most of the work on this and was just about to push a PR. Since it's nearly done, I'll go ahead and submit it. Hope that’s okay.
Hey @Rish-it , just a quick heads-up — I’ve fixed this issue and will push the PR once I’m back (I’m out right now). You can leave it for now to avoid any duplicate work or conflicts 😊 So just trying to keep things coordinated. Feel free to suggest any changes or improvements once the PR is up!
Hey @drfarrell @Rish-it , I’ve just pushed the fix for #2157 — implementing the dual-color icons for padding, margin, and radius in the topbar.
Feel free to review when you get a chance! Let me know if you have any feedback or suggestions for improvement. 🙌
@PradyumnChauhan and @Rish-it usually it's good to drop a comment on an issue asking to take it on so you can be assigned it and people know that other people are workin' on it, but appreciate you guys being enthusiastic about making contributions!
@PradyumnChauhan we'll take a look at it. Excited for this!
@drfarrell and @Kitenite just wanted to clarify, I initially dropped the comment here to inform that I was taking this up, since it wasn’t assigned to me or anyone else at the time. Later, I noticed that most of the work was already done by someone else, so I decided to step back to avoid any duplication of effort. All good on my side! And @Kitenite thanks for the constant support and kind words, much appreciated ◡̈ But I do need inputs from both of you on this https://github.com/onlook-dev/onlook/issues/1894#issuecomment-2965239632