Make empty state interactive

Mikayla created 2 years ago

Change summary

crates/collab_ui/src/collab_panel.rs  | 27 ++++++++++++++------
crates/theme/src/theme.rs             |  2 
styles/src/style_tree/collab_panel.ts | 38 ++++++++++++++++++++++------
3 files changed, 50 insertions(+), 17 deletions(-)

Detailed changes

crates/collab_ui/src/collab_panel.rs

@@ -370,7 +370,7 @@ impl CollabPanel {
                             this.render_channel_editor(&theme, *depth, cx)
                         }
                         ListEntry::ContactPlaceholder => {
-                            this.render_contact_placeholder(&theme.collab_panel)
+                            this.render_contact_placeholder(&theme.collab_panel, is_selected, cx)
                         }
                     }
                 });
@@ -1402,13 +1402,23 @@ impl CollabPanel {
         event_handler.into_any()
     }
 
-    fn render_contact_placeholder(&self, theme: &theme::CollabPanel) -> AnyElement<Self> {
-        Label::new(
-            "Add contacts to begin collaborating",
-            theme.placeholder.text.clone(),
-        )
-        .contained()
-        .with_style(theme.placeholder.container)
+    fn render_contact_placeholder(
+        &self,
+        theme: &theme::CollabPanel,
+        is_selected: bool,
+        cx: &mut ViewContext<Self>,
+    ) -> AnyElement<Self> {
+        enum AddContacts {}
+        MouseEventHandler::<AddContacts, Self>::new(0, cx, |state, _| {
+            let style = theme.list_empty_state.style_for(is_selected, state);
+            Label::new("Add contacts to begin collaborating", style.text.clone())
+                .contained()
+                .with_style(style.container)
+                .into_any()
+        })
+        .on_click(MouseButton::Left, |_, this, cx| {
+            this.toggle_contact_finder(cx);
+        })
         .into_any()
     }
 
@@ -1861,6 +1871,7 @@ impl CollabPanel {
                     ListEntry::Channel(channel) => {
                         self.join_channel(channel.id, cx);
                     }
+                    ListEntry::ContactPlaceholder => self.toggle_contact_finder(cx),
                     _ => {}
                 }
             }

crates/theme/src/theme.rs

@@ -220,7 +220,7 @@ pub struct CopilotAuthAuthorized {
 pub struct CollabPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
-    pub placeholder: ContainedText,
+    pub list_empty_state: Toggleable<Interactive<ContainedText>>,
     pub log_in_button: Interactive<ContainedText>,
     pub channel_editor: ContainerStyle,
     pub channel_hash: Icon,

styles/src/style_tree/collab_panel.ts

@@ -110,10 +110,6 @@ export default function contacts_panel(): any {
 
     return {
         channel_modal: channel_modal(),
-        placeholder: {
-            ...text(theme.middle, "sans", "default", { size: "sm" }),
-            padding: 5,
-        },
         log_in_button: interactive({
             base: {
                 background: background(theme.middle),
@@ -273,10 +269,36 @@ export default function contacts_panel(): any {
                 },
             },
         }),
-        list_empty_state: {
-            ...text(layer, "ui_sans", "variant", { size: "sm" }),
-            padding: side_padding
-        },
+        list_empty_state: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "ui_sans", "variant", { size: "sm" }),
+                    padding: side_padding
+
+                },
+                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"),
+                    },
+                },
+            },
+        }),
         contact_avatar: {
             corner_radius: 10,
             width: 18,