Add style leader selection container

Julia and Max Brunsfeld created 2 years ago

Co-Authored-By: Max Brunsfeld <[e-mail]>

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 12 ++++++++----
crates/theme/src/theme.rs                    |  1 +
styles/src/styleTree/workspace.ts            | 13 +++++++++++++
3 files changed, 22 insertions(+), 4 deletions(-)

Detailed changes

crates/collab_ui/src/collab_titlebar_item.rs

@@ -644,8 +644,8 @@ impl CollabTitlebarItem {
             .unwrap_or_default();
         if let Some(replica_id) = replica_id {
             if followed_by_self {
-                let selection = dbg!(theme.editor.replica_selection_style(replica_id).selection);
-                background_color = dbg!(Color::blend(selection, background_color));
+                let selection = theme.editor.replica_selection_style(replica_id).selection;
+                background_color = Color::blend(selection, background_color);
                 background_color.a = 255;
             }
         }
@@ -692,14 +692,18 @@ impl CollabTitlebarItem {
                         .flatten(),
                     );
 
+                let mut container = face_pile
+                    .contained()
+                    .with_style(theme.workspace.titlebar.leader_selection);
+
                 if let Some(replica_id) = replica_id {
                     if followed_by_self {
                         let color = theme.editor.replica_selection_style(replica_id).selection;
-                        return face_pile.contained().with_background_color(color).boxed();
+                        container = container.with_background_color(color);
                     }
                 }
 
-                face_pile.boxed()
+                container.boxed()
             }))
             .with_children((|| {
                 let replica_id = replica_id?;

crates/theme/src/theme.rs

@@ -77,6 +77,7 @@ pub struct Titlebar {
     pub avatar_margin: f32,
     pub avatar_ribbon: AvatarRibbon,
     pub follower_avatar_overlap: f32,
+    pub leader_selection: ContainerStyle,
     pub offline_icon: OfflineIcon,
     pub avatar: AvatarStyle,
     pub inactive_avatar: AvatarStyle,

styles/src/styleTree/workspace.ts

@@ -116,6 +116,19 @@ export default function workspace(colorScheme: ColorScheme) {
         outerCornerRadius: followerAvatarOuterWidth / 2,
       },
       followerAvatarOverlap: 8,
+      leaderSelection: {
+        margin: {
+          top: 4,
+          bottom: 4,
+        },
+        padding: {
+          left: 2,
+          right: 2,
+          top: 4,
+          bottom: 4,
+        },
+        cornerRadius: 6,
+      },
       avatarRibbon: {
         height: 3,
         width: 12,