Restore the colored background for collaborators that you're following

This commit is contained in:
Max Brunsfeld 2024-01-18 13:47:43 -08:00
parent 2443ee6faf
commit 4b92a15ab3
3 changed files with 84 additions and 65 deletions

View file

@ -17,9 +17,8 @@ use gpui::{
actions, canvas, div, fill, list, overlay, point, prelude::*, px, AnyElement, AppContext, actions, canvas, div, fill, list, overlay, point, prelude::*, px, AnyElement, AppContext,
AsyncWindowContext, Bounds, ClipboardItem, DismissEvent, Div, EventEmitter, FocusHandle, AsyncWindowContext, Bounds, ClipboardItem, DismissEvent, Div, EventEmitter, FocusHandle,
FocusableView, FontStyle, FontWeight, InteractiveElement, IntoElement, ListOffset, ListState, FocusableView, FontStyle, FontWeight, InteractiveElement, IntoElement, ListOffset, ListState,
Model, MouseDownEvent, ParentElement, Pixels, Point, PromptLevel, Render, RenderOnce, Model, MouseDownEvent, ParentElement, Pixels, Point, PromptLevel, Render, SharedString, Styled,
SharedString, Styled, Subscription, Task, TextStyle, View, ViewContext, VisualContext, Subscription, Task, TextStyle, View, ViewContext, VisualContext, WeakView, WhiteSpace,
WeakView, WhiteSpace,
}; };
use menu::{Cancel, Confirm, SelectNext, SelectPrev}; use menu::{Cancel, Confirm, SelectNext, SelectPrev};
use project::{Fs, Project}; use project::{Fs, Project};
@ -2296,7 +2295,7 @@ impl CollabPanel {
h_flex() h_flex()
.id(channel_id as usize) .id(channel_id as usize)
.child(Label::new(channel.name.clone())) .child(Label::new(channel.name.clone()))
.children(face_pile.map(|face_pile| face_pile.render(cx))), .children(face_pile.map(|face_pile| face_pile.render().p_1())),
), ),
) )
.child( .child(

View file

@ -57,6 +57,7 @@ impl Render for CollabTitlebarItem {
let current_user = self.user_store.read(cx).current_user(); let current_user = self.user_store.read(cx).current_user();
let client = self.client.clone(); let client = self.client.clone();
let project_id = self.project.read(cx).remote_id(); let project_id = self.project.read(cx).remote_id();
let workspace = self.workspace.upgrade();
h_flex() h_flex()
.id("titlebar") .id("titlebar")
@ -100,6 +101,7 @@ impl Render for CollabTitlebarItem {
true, true,
room.is_speaking(), room.is_speaking(),
room.is_muted(), room.is_muted(),
None,
&room, &room,
project_id, project_id,
&current_user, &current_user,
@ -113,6 +115,12 @@ impl Render for CollabTitlebarItem {
})) }))
.children( .children(
remote_participants.iter().filter_map(|collaborator| { remote_participants.iter().filter_map(|collaborator| {
let player_color = player_colors
.color_for_participant(collaborator.participant_index.0);
let is_following = workspace
.as_ref()?
.read(cx)
.is_being_followed(collaborator.peer_id);
let is_present = project_id.map_or(false, |project_id| { let is_present = project_id.map_or(false, |project_id| {
collaborator.location collaborator.location
== ParticipantLocation::SharedProject { project_id } == ParticipantLocation::SharedProject { project_id }
@ -124,6 +132,7 @@ impl Render for CollabTitlebarItem {
is_present, is_present,
collaborator.speaking, collaborator.speaking,
collaborator.muted, collaborator.muted,
is_following.then_some(player_color.selection),
&room, &room,
project_id, project_id,
&current_user, &current_user,
@ -134,13 +143,7 @@ impl Render for CollabTitlebarItem {
v_flex() v_flex()
.id(("collaborator", collaborator.user.id)) .id(("collaborator", collaborator.user.id))
.child(face_pile) .child(face_pile)
.child(render_color_ribbon( .child(render_color_ribbon(player_color.cursor))
player_colors
.color_for_participant(
collaborator.participant_index.0,
)
.cursor,
))
.cursor_pointer() .cursor_pointer()
.on_click({ .on_click({
let peer_id = collaborator.peer_id; let peer_id = collaborator.peer_id;
@ -468,11 +471,12 @@ impl CollabTitlebarItem {
is_present: bool, is_present: bool,
is_speaking: bool, is_speaking: bool,
is_muted: bool, is_muted: bool,
leader_selection_color: Option<Hsla>,
room: &Room, room: &Room,
project_id: Option<u64>, project_id: Option<u64>,
current_user: &Arc<User>, current_user: &Arc<User>,
cx: &ViewContext<Self>, cx: &ViewContext<Self>,
) -> Option<FacePile> { ) -> Option<Div> {
if room.role_for_user(user.id) == Some(proto::ChannelRole::Guest) { if room.role_for_user(user.id) == Some(proto::ChannelRole::Guest) {
return None; return None;
} }
@ -481,56 +485,72 @@ impl CollabTitlebarItem {
let followers = project_id.map_or(&[] as &[_], |id| room.followers_for(peer_id, id)); let followers = project_id.map_or(&[] as &[_], |id| room.followers_for(peer_id, id));
let extra_count = followers.len().saturating_sub(FACEPILE_LIMIT); let extra_count = followers.len().saturating_sub(FACEPILE_LIMIT);
let pile = FacePile::default() Some(
.child( div()
Avatar::new(user.avatar_uri.clone()) .m_0p5()
.grayscale(!is_present) .p_0p5()
.border_color(if is_speaking { // When the collaborator is not followed, still draw this wrapper div, but leave
cx.theme().status().info // it transparent, so that it does not shift the layout when following.
} else { .when_some(leader_selection_color, |div, color| {
// We draw the border in a transparent color rather to avoid div.rounded_md().bg(color)
// the layout shift that would come with adding/removing the border. })
gpui::transparent_black() .child(
}) FacePile::default()
.when(is_muted, |avatar| { .child(
avatar.indicator( Avatar::new(user.avatar_uri.clone())
AvatarAudioStatusIndicator::new(ui::AudioStatus::Muted).tooltip({ .grayscale(!is_present)
let github_login = user.github_login.clone(); .border_color(if is_speaking {
move |cx| Tooltip::text(format!("{} is muted", github_login), cx) cx.theme().status().info
}), } else {
// We draw the border in a transparent color rather to avoid
// the layout shift that would come with adding/removing the border.
gpui::transparent_black()
})
.when(is_muted, |avatar| {
avatar.indicator(
AvatarAudioStatusIndicator::new(ui::AudioStatus::Muted)
.tooltip({
let github_login = user.github_login.clone();
move |cx| {
Tooltip::text(
format!("{} is muted", github_login),
cx,
)
}
}),
)
}),
) )
}), .children(followers.iter().take(FACEPILE_LIMIT).filter_map(
) |follower_peer_id| {
.children( let follower = room
followers .remote_participants()
.iter() .values()
.take(FACEPILE_LIMIT) .find_map(|p| {
.filter_map(|follower_peer_id| { (p.peer_id == *follower_peer_id).then_some(&p.user)
let follower = room })
.remote_participants() .or_else(|| {
.values() (self.client.peer_id() == Some(*follower_peer_id))
.find_map(|p| (p.peer_id == *follower_peer_id).then_some(&p.user)) .then_some(current_user)
.or_else(|| { })?
(self.client.peer_id() == Some(*follower_peer_id)) .clone();
.then_some(current_user)
})?
.clone();
Some(Avatar::new(follower.avatar_uri.clone())) Some(Avatar::new(follower.avatar_uri.clone()))
}), },
) ))
.children(if extra_count > 0 { .children(if extra_count > 0 {
Some( Some(
div() div()
.ml_1() .ml_1()
.child(Label::new(format!("+{extra_count}"))) .child(Label::new(format!("+{extra_count}")))
.into_any_element(), .into_any_element(),
) )
} else { } else {
None None
}); })
.render(),
Some(pile) ),
)
} }
fn window_activation_changed(&mut self, cx: &mut ViewContext<Self>) { fn window_activation_changed(&mut self, cx: &mut ViewContext<Self>) {

View file

@ -1,13 +1,13 @@
use gpui::{div, AnyElement, IntoElement, ParentElement, RenderOnce, Styled, WindowContext}; use gpui::{div, AnyElement, Div, IntoElement, ParentElement, Styled};
use smallvec::SmallVec; use smallvec::SmallVec;
#[derive(Default, IntoElement)] #[derive(Default)]
pub struct FacePile { pub struct FacePile {
pub faces: SmallVec<[AnyElement; 2]>, pub faces: SmallVec<[AnyElement; 2]>,
} }
impl RenderOnce for FacePile { impl FacePile {
fn render(self, _: &mut WindowContext) -> impl IntoElement { pub fn render(self) -> Div {
let player_count = self.faces.len(); let player_count = self.faces.len();
let player_list = self.faces.into_iter().enumerate().map(|(ix, player)| { let player_list = self.faces.into_iter().enumerate().map(|(ix, player)| {
let isnt_last = ix < player_count - 1; let isnt_last = ix < player_count - 1;
@ -17,7 +17,7 @@ impl RenderOnce for FacePile {
.when(isnt_last, |div| div.neg_mr_1()) .when(isnt_last, |div| div.neg_mr_1())
.child(player) .child(player)
}); });
div().p_1().flex().items_center().children(player_list) div().flex().items_center().children(player_list)
} }
} }