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

Julia created 2 years ago

Add same grayscale logic to followers which leaders have; new call UI [3/N]

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 51 +++++++++++++--------
crates/theme/src/theme.rs                    |  6 +-
styles/src/styleTree/workspace.ts            | 10 ---
3 files changed, 36 insertions(+), 31 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -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,

crates/theme/src/theme.rs

@@ -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,

styles/src/styleTree/workspace.ts

@@ -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: {