Skip to content

Improve the box_shadow example #19240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ickshonpe opened this issue May 16, 2025 · 0 comments · Fixed by #19345
Closed

Improve the box_shadow example #19240

ickshonpe opened this issue May 16, 2025 · 0 comments · Fixed by #19345
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Examples An addition or correction to our examples D-Straightforward Simple bug fixes and API improvements, docs, test and examples S-Ready-For-Implementation This issue is ready for an implementation PR. Go for it!

Comments

@ickshonpe
Copy link
Contributor

ickshonpe commented May 16, 2025

What problem does this solve or what need does it fill?

The box_shadow example is very ugly:

Image

What solution would you like?

Nicer layout and colors. Maybe some labels identifying the different example cases.
Could be changed to a single node with some buttons or sliders that let you adjust the shadow settings.

@ickshonpe ickshonpe added C-Examples An addition or correction to our examples A-UI Graphical user interfaces, styles, layouts, and widgets S-Ready-For-Implementation This issue is ready for an implementation PR. Go for it! D-Straightforward Simple bug fixes and API improvements, docs, test and examples labels May 16, 2025
@ickshonpe ickshonpe changed the title The box_shadow example is very ugly Improve the box_shadow example May 16, 2025
@ickshonpe ickshonpe changed the title Improve the box_shadow example Improved box_shadow example May 16, 2025
@ickshonpe ickshonpe changed the title Improved box_shadow example Improve the box_shadow example May 16, 2025
github-merge-queue bot pushed a commit that referenced this issue May 27, 2025
# Objective

- Addresses the previous example's lack of visual appeal and clarity. It
was missing labels for clear distinction of the shadow settings used on
each of the shapes. The suggestion in the linked issue was to either
just visually update and add labels or to collapse example to a single
node with adjustable settings.
- Fixes #19240

## Solution

- Replace the previous static example with a single, central node with
adjustable settings as per issue suggestion.
- Implement button-based setting adjustments. Unfortunately slider
widgets don't seem available yet and I didn't want to further bloat the
example.
- Improve overall aesthetics of the example -- although color pallette
could still be improved. flat gray tones are probably not the best
choice as a contrast to the shadow, but the white border does help in
that aspect.
- Dynamically recolor shadows for visual clarity when increasing shadow
count.
- Add Adjustable Settings:
    - Shape selection
    - Shadow X/Y offset, blur, spread, and count
- Add Reset button to restore default settings

The disadvantage of this solution is that the old example code would
have probably been easier to digest as the new example is quite bloated
in comparison. Alternatively I could also just implement labels and fix
aesthetics of the old example without adding functionality for
adjustable settings, _but_ I personally feel like interactive examples
are more engaging to users.

## Testing

- Did you test these changes? If so, how? `cargo run --example
box_shadow` and functionality of all features of the example.
- Are there any parts that need more testing? Not that I am aware of. 
- How can other people (reviewers) test your changes? Is there anything
specific they need to know? Not really, it should be pretty
straightforward just running the new example and testing the feats.

---

## Showcase

![box-shadow-example-1](https://github.com/user-attachments/assets/57586b30-c290-4e3f-9355-5c3f6e9a6406)


![box-shadow-example-2](https://github.com/user-attachments/assets/51a51d2f-dd30-465b-b802-ddb8077adff5)

---------

Co-authored-by: ickshonpe <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Examples An addition or correction to our examples D-Straightforward Simple bug fixes and API improvements, docs, test and examples S-Ready-For-Implementation This issue is ready for an implementation PR. Go for it!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant