seperate out channel styles in theme

Mikayla created 2 years ago

Change summary

crates/collab_ui/src/collab_panel.rs  | 12 ++++----
crates/theme/src/theme.rs             |  3 ++
styles/src/style_tree/collab_panel.ts | 43 +++++++++++++++++++++++++++++
3 files changed, 52 insertions(+), 6 deletions(-)

Detailed changes

crates/collab_ui/src/collab_panel.rs

@@ -1550,7 +1550,7 @@ impl CollabPanel {
         })
         .unwrap_or(false);
 
-        const FACEPILE_LIMIT: usize = 4;
+        const FACEPILE_LIMIT: usize = 3;
 
         MouseEventHandler::new::<Channel, _>(channel.id as usize, cx, |state, cx| {
             Flex::row()
@@ -1563,9 +1563,9 @@ impl CollabPanel {
                         .left(),
                 )
                 .with_child(
-                    Label::new(channel.name.clone(), theme.contact_username.text.clone())
+                    Label::new(channel.name.clone(), theme.channel_name.text.clone())
                         .contained()
-                        .with_style(theme.contact_username.container)
+                        .with_style(theme.channel_name.container)
                         .aligned()
                         .left()
                         .flex(1., true),
@@ -1583,7 +1583,7 @@ impl CollabPanel {
                                         .filter_map(|user| {
                                             Some(
                                                 Image::from_data(user.avatar.clone()?)
-                                                    .with_style(theme.contact_avatar),
+                                                    .with_style(theme.channel_avatar),
                                             )
                                         })
                                         .take(FACEPILE_LIMIT),
@@ -1605,9 +1605,9 @@ impl CollabPanel {
                 .constrained()
                 .with_height(theme.row_height)
                 .contained()
-                .with_style(*theme.contact_row.style_for(is_selected || is_active, state))
+                .with_style(*theme.channel_row.style_for(is_selected || is_active, state))
                 .with_padding_left(
-                    theme.contact_row.default_style().padding.left
+                    theme.channel_row.default_style().padding.left
                         + theme.channel_indent * depth as f32,
                 )
         })

crates/theme/src/theme.rs

@@ -237,10 +237,13 @@ pub struct CollabPanel {
     pub subheader_row: Toggleable<Interactive<ContainedText>>,
     pub leave_call: Interactive<ContainedText>,
     pub contact_row: Toggleable<Interactive<ContainerStyle>>,
+    pub channel_row: Toggleable<Interactive<ContainerStyle>>,
+    pub channel_name: ContainedText,
     pub row_height: f32,
     pub project_row: Toggleable<Interactive<ProjectRow>>,
     pub tree_branch: Toggleable<Interactive<TreeBranch>>,
     pub contact_avatar: ImageStyle,
+    pub channel_avatar: ImageStyle,
     pub extra_participant_label: ContainedText,
     pub contact_status_free: ContainerStyle,
     pub contact_status_busy: ContainerStyle,

styles/src/style_tree/collab_panel.ts

@@ -118,6 +118,38 @@ export default function contacts_panel(): any {
         },
     }
 
+    const item_row = toggleable({
+        base: interactive({
+            base: {
+                padding: {
+                    left: SPACING,
+                    right: SPACING,
+                },
+            },
+            state: {
+                clicked: {
+                    background: background(layer, "pressed"),
+                },
+            },
+        }),
+        state: {
+            inactive: {
+                hovered: {
+                    background: background(layer, "hovered"),
+                },
+            },
+            active: {
+                default: {
+                    ...text(layer, "ui_sans", "active", { size: "sm" }),
+                    background: background(layer, "active"),
+                },
+                clicked: {
+                    background: background(layer, "pressed"),
+                },
+            },
+        },
+    })
+
     return {
         ...collab_modals(),
         log_in_button: text_button(),
@@ -198,6 +230,13 @@ export default function contacts_panel(): any {
                 },
             },
         }),
+        channel_row: item_row,
+        channel_name: {
+            ...text(layer, "ui_sans", { size: "sm" }),
+            margin: {
+                left: NAME_MARGIN,
+            },
+        },
         list_empty_label_container: {
             margin: {
                 left: NAME_MARGIN,
@@ -245,6 +284,10 @@ export default function contacts_panel(): any {
             corner_radius: 10,
             width: 20,
         },
+        channel_avatar: {
+            corner_radius: 10,
+            width: 20,
+        },
         extra_participant_label: {
             corner_radius: 10,
             padding: {