Merge pull request #2208 from zed-industries/new-collab-ui-3

Add same grayscale logic to followers which leaders have; new call UI [3/N]
This commit is contained in:
Julia 2023-02-23 16:05:42 -05:00 committed by GitHub
commit 1e3b4f0387
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 31 deletions

View file

@ -278,7 +278,7 @@ impl CollabTitlebarItem {
pub fn toggle_user_menu(&mut self, _: &ToggleUserMenu, cx: &mut ViewContext<Self>) {
let theme = cx.global::<Settings>().theme.clone();
let avatar_style = theme.workspace.titlebar.avatar.clone();
let avatar_style = theme.workspace.titlebar.leader_avatar.clone();
let item_style = theme.context_menu.item.disabled_style().clone();
self.user_menu.update(cx, |user_menu, cx| {
let items = if let Some(user) = self.user_store.read(cx).current_user() {
@ -653,20 +653,8 @@ impl CollabTitlebarItem {
})
.unwrap_or(false);
let avatar_style;
if let Some(location) = location {
if let ParticipantLocation::SharedProject { project_id } = location {
if Some(project_id) == workspace.read(cx).project().read(cx).remote_id() {
avatar_style = &theme.workspace.titlebar.avatar;
} else {
avatar_style = &theme.workspace.titlebar.inactive_avatar;
}
} else {
avatar_style = &theme.workspace.titlebar.inactive_avatar;
}
} else {
avatar_style = &theme.workspace.titlebar.avatar;
}
let leader_style = theme.workspace.titlebar.leader_avatar;
let follower_style = theme.workspace.titlebar.follower_avatar;
let mut background_color = theme
.workspace
@ -687,7 +675,7 @@ impl CollabTitlebarItem {
let face_pile = FacePile::new(theme.workspace.titlebar.follower_avatar_overlap)
.with_child(Self::render_face(
avatar.clone(),
avatar_style.clone(),
Self::location_style(workspace, location, leader_style, cx),
background_color,
))
.with_children(
@ -696,9 +684,11 @@ impl CollabTitlebarItem {
let followers = room.followers_for(peer_id);
Some(followers.into_iter().flat_map(|&follower| {
let avatar = room
.remote_participant_for_peer_id(follower)
.and_then(|participant| participant.user.avatar.clone())
let remote_participant =
room.remote_participant_for_peer_id(follower);
let avatar = remote_participant
.and_then(|p| p.user.avatar.clone())
.or_else(|| {
if follower == workspace.read(cx).client().peer_id()? {
workspace
@ -713,9 +703,11 @@ impl CollabTitlebarItem {
}
})?;
let location = remote_participant.map(|p| p.location);
Some(Self::render_face(
avatar.clone(),
theme.workspace.titlebar.follower_avatar.clone(),
Self::location_style(workspace, location, follower_style, cx),
background_color,
))
}))
@ -801,6 +793,25 @@ impl CollabTitlebarItem {
content
}
fn location_style(
workspace: &ViewHandle<Workspace>,
location: Option<ParticipantLocation>,
mut style: AvatarStyle,
cx: &RenderContext<Self>,
) -> AvatarStyle {
if let Some(location) = location {
if let ParticipantLocation::SharedProject { project_id } = location {
if Some(project_id) != workspace.read(cx).project().read(cx).remote_id() {
style.image.grayscale = true;
}
} else {
style.image.grayscale = true;
}
}
style
}
fn render_face(
avatar: Arc<ImageData>,
avatar_style: AvatarStyle,

View file

@ -80,9 +80,9 @@ pub struct Titlebar {
pub follower_avatar_overlap: f32,
pub leader_selection: ContainerStyle,
pub offline_icon: OfflineIcon,
pub avatar: AvatarStyle,
pub inactive_avatar: AvatarStyle,
pub leader_avatar: AvatarStyle,
pub follower_avatar: AvatarStyle,
pub inactive_avatar_grayscale: bool,
pub sign_in_prompt: Interactive<ContainedText>,
pub outdated_warning: ContainedText,
pub share_button: Interactive<ContainedText>,
@ -92,7 +92,7 @@ pub struct Titlebar {
pub toggle_contacts_badge: ContainerStyle,
}
#[derive(Clone, Deserialize, Default)]
#[derive(Copy, Clone, Deserialize, Default)]
pub struct AvatarStyle {
#[serde(flatten)]
pub image: ImageStyle,

View file

@ -97,25 +97,19 @@ export default function workspace(colorScheme: ColorScheme) {
title: text(layer, "sans", "variant"),
// Collaborators
avatar: {
leaderAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
},
inactiveAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
grayscale: true,
},
followerAvatar: {
width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2,
},
inactiveAvatarGrayscale: true,
followerAvatarOverlap: 8,
leaderSelection: {
margin: {