Make follower avatars smaller (#6724)
Marshall Bowers
and
Conrad
created 2 years ago
This PR makes the avatars of followers in a facepile smaller than the
leader's avatar.
<img width="227" alt="Screenshot 2024-01-25 at 1 42 14 PM"
src="https://github.com/zed-industries/zed/assets/1486634/defc22b4-4ae1-4d63-a0d8-53e3ca8cce04">
Release Notes:
- Adjusted the size of follower avatars to be smaller than the leader.
Co-authored-by: Conrad <conrad@zed.dev>
Change summary
crates/collab_ui/src/chat_panel.rs | 8 +++++---
crates/collab_ui/src/collab_titlebar_item.rs | 4 +++-
crates/ui/src/components/avatar/avatar.rs | 10 +++++-----
3 files changed, 13 insertions(+), 9 deletions(-)
Detailed changes
@@ -343,9 +343,11 @@ impl ChatPanel {
this.pt_3().child(
h_flex()
.text_ui_sm()
- .child(div().absolute().child(
- Avatar::new(message.sender.avatar_uri.clone()).size(cx.rem_size()),
- ))
+ .child(
+ div().absolute().child(
+ Avatar::new(message.sender.avatar_uri.clone()).size(rems(1.)),
+ ),
+ )
.child(
div()
.pl(cx.rem_size() + px(6.0))
@@ -542,7 +542,9 @@ impl CollabTitlebarItem {
})?
.clone();
- Some(Avatar::new(follower.avatar_uri.clone()))
+ Some(div().mt(-px(4.)).child(
+ Avatar::new(follower.avatar_uri.clone()).size(rems(0.75)),
+ ))
},
))
.children(if extra_count > 0 {
@@ -27,7 +27,7 @@ pub enum AvatarShape {
#[derive(IntoElement)]
pub struct Avatar {
image: Img,
- size: Option<Pixels>,
+ size: Option<AbsoluteLength>,
border_color: Option<Hsla>,
indicator: Option<AnyElement>,
}
@@ -82,8 +82,8 @@ impl Avatar {
}
/// Size overrides the avatar size. By default they are 1rem.
- pub fn size(mut self, size: impl Into<Option<Pixels>>) -> Self {
- self.size = size.into();
+ pub fn size<L: Into<AbsoluteLength>>(mut self, size: impl Into<Option<L>>) -> Self {
+ self.size = size.into().map(Into::into);
self
}
@@ -105,8 +105,8 @@ impl RenderOnce for Avatar {
px(0.)
};
- let image_size = self.size.unwrap_or_else(|| cx.rem_size());
- let container_size = image_size + border_width * 2.;
+ let image_size = self.size.unwrap_or_else(|| rems(1.).into());
+ let container_size = image_size.to_pixels(cx.rem_size()) + border_width * 2.;
div()
.size(container_size)