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

Increase border width used to indicate speaking (#4077)

Browse source 
This PR increases the width of the border that we use to indicate when a
call participant is speaking.

This should make it more apparent in the UI when someone is speaking.

Release Notes:

- Increased the width of the ring used to indicate when someone is
speaking in a call.
This commit is contained in:
Marshall Bowers 2024-01-16 17:09:28 -05:00 • committed by GitHub
parent c8a6b0d8aa
commit 4e8ad363f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 75 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -99,20 +99,27 @@ impl RenderOnce for Avatar {
self = self.shape(AvatarShape::Circle);
}
let size = self.size.unwrap_or_else(|| cx.rem_size());
let border_width = if self.border_color.is_some() {
px(2.)
} else {
px(0.)
};
let image_size = self.size.unwrap_or_else(|| cx.rem_size());
let container_size = image_size + border_width * 2.;
div()
.size(size + px(2.))
.size(container_size)
.map(|mut div| {
div.style().corner_radii = self.image.style().corner_radii.clone();
div
})
.when_some(self.border_color, |this, color| {
this.border().border_color(color)
this.border_width(border_width).border_color(color)
})
.child(
self.image
.size(size)
.size(image_size)
.bg(cx.theme().colors().ghost_element_background),
)
.children(

64
crates/ui/src/components/stories/avatar.rs
View file

@ -1,5 +1,5 @@
use gpui::Render;
use story::Story;
use story::{StoryContainer, StoryItem, StorySection};
use crate::{prelude::*, AudioStatus, Availability, AvatarAvailabilityIndicator};
use crate::{Avatar, AvatarAudioStatusIndicator};
@ -7,31 +7,57 @@ use crate::{Avatar, AvatarAudioStatusIndicator};
pub struct AvatarStory;
impl Render for AvatarStory {
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
Story::container()
.child(Story::title_for::<Avatar>())
.child(Story::label("Default"))
.child(Avatar::new(
"https://avatars.githubusercontent.com/u/1714999?v=4",
))
.child(Avatar::new(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
StoryContainer::new("Avatar", "crates/ui/src/components/stories/avatar.rs")
.child(
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAvailabilityIndicator::new(Availability::Free)),
StorySection::new()
.child(StoryItem::new(
"Default",
Avatar::new("https://avatars.githubusercontent.com/u/1714999?v=4"),
))
.child(StoryItem::new(
"Default",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4"),
)),
)
.child(
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAvailabilityIndicator::new(Availability::Busy)),
StorySection::new()
.child(StoryItem::new(
"With free availability indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAvailabilityIndicator::new(Availability::Free)),
))
.child(StoryItem::new(
"With busy availability indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAvailabilityIndicator::new(Availability::Busy)),
)),
)
.child(
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Muted)),
StorySection::new()
.child(StoryItem::new(
"With info border",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.border_color(cx.theme().status().info_border),
))
.child(StoryItem::new(
"With error border",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.border_color(cx.theme().status().error_border),
)),
)
.child(
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Deafened)),
StorySection::new()
.child(StoryItem::new(
"With muted audio indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Muted)),
))
.child(StoryItem::new(
"With deafened audio indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Deafened)),
)),
)
}
}