WIP BROKEN

Nate Butler created 2 years ago

Change summary

crates/collab_ui/src/collab_panel.rs  | 21 +++++++++++++++------
crates/theme/src/theme.rs             |  6 +++---
styles/src/style_tree/collab_panel.ts | 15 ++-------------
3 files changed, 20 insertions(+), 22 deletions(-)

Detailed changes

crates/collab_ui/src/collab_panel.rs

@@ -1103,9 +1103,12 @@ impl CollabPanel {
         enum AddContact {}
         let button = match section {
             Section::ActiveCall => Some(
-                MouseEventHandler::<AddContact, Self>::new(0, cx, |_, _| {
+                MouseEventHandler::<AddContact, Self>::new(0, cx, |state, _| {
                     render_icon_button(
-                        theme.collab_panel.leave_call_button.in_state(is_selected),
+                        theme
+                            .collab_panel
+                            .leave_call_button
+                            .style_for(is_selected, state),
                         "icons/radix/exit.svg",
                     )
                 })
@@ -1122,9 +1125,12 @@ impl CollabPanel {
                 ),
             ),
             Section::Contacts => Some(
-                MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |_, _| {
+                MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |state, _| {
                     render_icon_button(
-                        theme.collab_panel.add_contact_button.in_state(is_selected),
+                        theme
+                            .collab_panel
+                            .add_contact_button
+                            .style_for(is_selected, state),
                         "icons/plus_16.svg",
                     )
                 })
@@ -1141,9 +1147,12 @@ impl CollabPanel {
                 ),
             ),
             Section::Channels => Some(
-                MouseEventHandler::<AddChannel, Self>::new(0, cx, |_, _| {
+                MouseEventHandler::<AddChannel, Self>::new(0, cx, |state, _| {
                     render_icon_button(
-                        theme.collab_panel.add_contact_button.in_state(is_selected),
+                        theme
+                            .collab_panel
+                            .add_contact_button
+                            .style_for(is_selected, state),
                         "icons/plus_16.svg",
                     )
                 })

crates/theme/src/theme.rs

@@ -226,9 +226,9 @@ pub struct CollabPanel {
     pub channel_modal: ChannelModal,
     pub user_query_editor: FieldEditor,
     pub user_query_editor_height: f32,
-    pub leave_call_button: Toggleable<IconButton>,
-    pub add_contact_button: Toggleable<IconButton>,
-    pub add_channel_button: Toggleable<IconButton>,
+    pub leave_call_button: Toggleable<Interactive<IconButton>>,
+    pub add_contact_button: Toggleable<Interactive<IconButton>>,
+    pub add_channel_button: Toggleable<Interactive<IconButton>>,
     pub header_row: ContainedText,
     pub subheader_row: Toggleable<Interactive<ContainedText>>,
     pub leave_call: Interactive<ContainedText>,

styles/src/style_tree/collab_panel.ts

@@ -8,6 +8,7 @@ import {
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../theme"
 import channel_modal from "./channel_modal"
+import { icon_button, toggleable_icon_button } from "../component/icon_button"
 
 
 export default function contacts_panel(): any {
@@ -51,19 +52,7 @@ export default function contacts_panel(): any {
         },
     }
 
-    const headerButton = toggleable({
-        base: {
-            color: foreground(layer, "on"),
-            button_width: 28,
-            icon_width: 16,
-        },
-        state: {
-            active: {
-                background: background(layer, "active"),
-                corner_radius: 8,
-            }
-        }
-    })
+    const headerButton = toggleable_icon_button(theme, {})
 
     return {
         channel_modal: channel_modal(),