From b57639761043f410a6eb8ddcc9ea985e97532e8b Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Tue, 21 Sep 2021 15:09:31 -0700 Subject: [PATCH] Vertically align avatars with labels in people panel Co-Authored-By: Nathan Sobo --- gpui/src/elements/align.rs | 5 +++ gpui/src/elements/image.rs | 8 ++-- zed/src/people_panel.rs | 88 ++++++++++++++++++++++++-------------- 3 files changed, 66 insertions(+), 35 deletions(-) diff --git a/gpui/src/elements/align.rs b/gpui/src/elements/align.rs index 652a014ddad275faa7e509be73f6bfe98099e096..7f065e2b5357856a96d515224679d1d9f4c46525 100644 --- a/gpui/src/elements/align.rs +++ b/gpui/src/elements/align.rs @@ -25,6 +25,11 @@ impl Align { self } + pub fn left(mut self) -> Self { + self.alignment.set_x(-1.0); + self + } + pub fn right(mut self) -> Self { self.alignment.set_x(1.0); self diff --git a/gpui/src/elements/image.rs b/gpui/src/elements/image.rs index 57644986dc005d9f9fa848b409055472961d6b71..5d36828d0cd57c1605dd6c7db9246268bb868078 100644 --- a/gpui/src/elements/image.rs +++ b/gpui/src/elements/image.rs @@ -19,13 +19,13 @@ pub struct Image { #[derive(Copy, Clone, Default, Deserialize)] pub struct ImageStyle { #[serde(default)] - border: Border, + pub border: Border, #[serde(default)] - corner_radius: f32, + pub corner_radius: f32, #[serde(default)] - height: Option, + pub height: Option, #[serde(default)] - width: Option, + pub width: Option, } impl Image { diff --git a/zed/src/people_panel.rs b/zed/src/people_panel.rs index 74a6d2b614b1b4a578fb112e621c70b1dc0683e7..acdae8331f91c05f37ea29ce6fb2abd7a37aecb3 100644 --- a/zed/src/people_panel.rs +++ b/zed/src/people_panel.rs @@ -74,6 +74,16 @@ impl PeoplePanel { let cap_height = theme.unshared_worktree.text.cap_height(font_cache); let baseline_offset = theme.unshared_worktree.text.baseline_offset(font_cache); let tree_branch = theme.tree_branch; + let host_avatar_height = theme + .host_avatar + .width + .or(theme.host_avatar.height) + .unwrap_or(0.); + let guest_avatar_height = theme + .guest_avatar + .width + .or(theme.guest_avatar.height) + .unwrap_or(0.); Flex::column() .with_child( @@ -86,15 +96,23 @@ impl PeoplePanel { .map(|avatar| Image::new(avatar).with_style(theme.host_avatar).boxed()), ) .with_child( - Container::new( - Label::new( - collaborator.user.github_login.clone(), - theme.host_username.text.clone(), + ConstrainedBox::new( + Align::new( + Container::new( + Label::new( + collaborator.user.github_login.clone(), + theme.host_username.text.clone(), + ) + .boxed(), + ) + .with_style(theme.host_username.container) + .boxed() ) - .boxed(), + .left() + .boxed() ) - .with_style(theme.host_username.container) - .boxed(), + .with_height(host_avatar_height) + .boxed() ) .boxed(), ) @@ -171,33 +189,41 @@ impl PeoplePanel { &theme.unshared_worktree }; - Flex::row() - .with_child( - Container::new( - Label::new( - worktree.root_name.clone(), - style.text.clone(), - ) - .boxed(), - ) - .with_style(style.container) - .boxed(), - ) - .with_children(worktree.guests.iter().filter_map( - |participant| { - participant.avatar.clone().map(|avatar| { - Container::new( - Image::new(avatar) - .with_style(theme.guest_avatar) + Container::new( + Flex::row() + .with_child( + ConstrainedBox::new( + Align::new( + Label::new( + worktree.root_name.clone(), + style.text.clone(), + ) .boxed(), + ) + .left() + .boxed() ) - .with_margin_left( - theme.guest_avatar_spacing, - ) + .with_height(guest_avatar_height) .boxed() - }) - }, - )) + ) + .with_children(worktree.guests.iter().filter_map( + |participant| { + participant.avatar.clone().map(|avatar| { + Container::new( + Image::new(avatar) + .with_style(theme.guest_avatar) + .boxed(), + ) + .with_margin_left( + theme.guest_avatar_spacing, + ) + .boxed() + }) + }, + )) + .boxed() + ) + .with_style(style.container) .boxed() }, );