Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine component preview & add serialization (#28545)

Browse source 
https://github.com/user-attachments/assets/0be12a9a-f6ce-4eca-90de-6ef01eb41ff9

- Allows the active ComponentPreview page to be restored via
serialization
- Allows filtering components using a filter input
- Updates component example rendering
- Updates some components

Release Notes:

- N/A

---------

Co-authored-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
This commit is contained in:
Nate Butler 2025-04-11 09:43:57 -06:00 • committed by GitHub
parent a03fb3791e
commit 2f5c662c42
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 468 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

72
crates/ui/src/components/avatar.rs
View file

@ -236,53 +236,30 @@ impl Component for Avatar {
v_flex()
.gap_6()
.children(vec![
example_group(vec![
single_example("Default", Avatar::new(example_avatar).into_any_element()),
single_example(
"Grayscale",
Avatar::new(example_avatar)
.grayscale(true)
.into_any_element(),
),
single_example(
"Border",
Avatar::new(example_avatar)
.border_color(cx.theme().colors().border)
.into_any_element(),
).description("Can be used to create visual space by setting the border color to match the background, which creates the appearance of a gap around the avatar."),
]),
example_group_with_title(
"Sizes",
vec![
single_example(
"Default",
Avatar::new(example_avatar).into_any_element(),
),
single_example(
"Small",
Avatar::new(example_avatar).size(px(24.)).into_any_element(),
),
single_example(
"Large",
Avatar::new(example_avatar).size(px(48.)).into_any_element(),
),
],
),
example_group_with_title(
"Styles",
vec![
single_example(
"Default",
Avatar::new(example_avatar).into_any_element(),
),
single_example(
"Grayscale",
Avatar::new(example_avatar)
.grayscale(true)
.into_any_element(),
),
single_example(
"With Border",
Avatar::new(example_avatar)
.border_color(cx.theme().colors().border)
.into_any_element(),
),
],
),
example_group_with_title(
"Audio Status",
"Indicator Styles",
vec![
single_example(
"Muted",
Avatar::new(example_avatar)
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Muted))
.into_any_element(),
),
).description("Indicates the collaborator's mic is muted."),
single_example(
"Deafened",
Avatar::new(example_avatar)
@ -290,28 +267,23 @@ impl Component for Avatar {
AudioStatus::Deafened,
))
.into_any_element(),
),
],
),
example_group_with_title(
"Availability",
vec![
).description("Indicates that both the collaborator's mic and audio are muted."),
single_example(
"Free",
"Availability: Free",
Avatar::new(example_avatar)
.indicator(AvatarAvailabilityIndicator::new(
CollaboratorAvailability::Free,
))
.into_any_element(),
),
).description("Indicates that the person is free, usually meaning they are not in a call."),
single_example(
"Busy",
"Availability: Busy",
Avatar::new(example_avatar)
.indicator(AvatarAvailabilityIndicator::new(
CollaboratorAvailability::Busy,
))
.into_any_element(),
),
).description("Indicates that the person is busy, usually meaning they are in a channel or direct call."),
],
),
])