Add background to user avatar

Piotr Osiewicz created 2 years ago

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 27 ++++++++++++---------
crates/zed/src/zed.rs                        |  5 +--
styles/src/styleTree/workspace.ts            |  4 +++
3 files changed, 21 insertions(+), 15 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -495,27 +495,30 @@ impl CollabTitlebarItem {
         cx: &mut ViewContext<Self>,
     ) -> AnyElement<Self> {
         let titlebar = &theme.workspace.titlebar;
-        let avatar_style = &theme.workspace.titlebar.leader_avatar;
+        let avatar_style = &theme.workspace.titlebar.follower_avatar;
+        let active = self.user_menu.read(cx).visible();
         Stack::new()
             .with_child(
                 MouseEventHandler::<ToggleUserMenu, Self>::new(0, cx, |state, _| {
-                    let style = titlebar.call_control.style_for(state, false);
+                    let style = titlebar.call_control.style_for(state, active);
 
-                    if let Some(avatar_img) = avatar {
+                    let img = if let Some(avatar_img) = avatar {
                         Self::render_face(avatar_img, *avatar_style, Color::transparent_black())
                     } else {
                         Svg::new("icons/ellipsis_14.svg")
                             .with_color(style.color)
-                            .constrained()
-                            .with_width(style.icon_width)
-                            .aligned()
-                            .constrained()
-                            .with_width(style.button_width)
-                            .with_height(style.button_width)
-                            .contained()
-                            .with_style(style.container)
                             .into_any()
-                    }
+                    };
+
+                    img.constrained()
+                        .with_width(style.icon_width)
+                        .aligned()
+                        .constrained()
+                        .with_width(style.button_width)
+                        .with_height(style.button_width)
+                        .contained()
+                        .with_style(style.container)
+                        .into_any()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .on_click(MouseButton::Left, move |_, this, cx| {

crates/zed/src/zed.rs

@@ -20,7 +20,6 @@ use feedback::{
 };
 use futures::{channel::mpsc, StreamExt};
 use gpui::{
-    actions,
     anyhow::{self, Result},
     geometry::vector::vec2f,
     impl_actions,
@@ -715,8 +714,8 @@ mod tests {
     use editor::{scroll::autoscroll::Autoscroll, DisplayPoint, Editor};
     use fs::{FakeFs, Fs};
     use gpui::{
-        elements::Empty, executor::Deterministic, Action, AnyElement, AppContext, AssetSource,
-        Element, Entity, TestAppContext, View, ViewHandle,
+        actions, elements::Empty, executor::Deterministic, Action, AnyElement, AppContext,
+        AssetSource, Element, Entity, TestAppContext, View, ViewHandle,
     };
     use language::LanguageRegistry;
     use node_runtime::NodeRuntime;

styles/src/styleTree/workspace.ts

@@ -270,6 +270,10 @@ export default function workspace(colorScheme: ColorScheme) {
                     background: background(layer, "variant", "hovered"),
                     color: foreground(layer, "variant", "hovered"),
                 },
+                active: {
+                    background: background(layer, "variant", "active"),
+                    color: foreground(layer, "variant", "active"),
+                },
             },
             toggleContactsButton: {
                 margin: { left: itemSpacing },