Rename contact list theme to collab panel

Max Brunsfeld created 2 years ago

Change summary

crates/collab_ui/src/panel.rs                | 36 +++++++++++-----------
crates/collab_ui/src/panel/contact_finder.rs | 19 ++++-------
crates/theme/src/theme.rs                    |  6 +-
styles/src/style_tree/app.ts                 |  6 +-
styles/src/style_tree/collab_panel.ts        |  9 +++--
5 files changed, 36 insertions(+), 40 deletions(-)

Detailed changes

crates/collab_ui/src/panel.rs

@@ -126,7 +126,7 @@ impl CollabPanel {
             let filter_editor = cx.add_view(|cx| {
                 let mut editor = Editor::single_line(
                     Some(Arc::new(|theme| {
-                        theme.contact_list.user_query_editor.clone()
+                        theme.collab_panel.user_query_editor.clone()
                     })),
                     cx,
                 );
@@ -162,7 +162,7 @@ impl CollabPanel {
                             let is_collapsed = this.collapsed_sections.contains(section);
                             Self::render_header(
                                 *section,
-                                &theme.contact_list,
+                                &theme.collab_panel,
                                 is_selected,
                                 is_collapsed,
                                 cx,
@@ -173,7 +173,7 @@ impl CollabPanel {
                                 user,
                                 *is_pending,
                                 is_selected,
-                                &theme.contact_list,
+                                &theme.collab_panel,
                             )
                         }
                         ContactEntry::ParticipantProject {
@@ -188,7 +188,7 @@ impl CollabPanel {
                             Some(*project_id) == current_project_id,
                             *is_last,
                             is_selected,
-                            &theme.contact_list,
+                            &theme.collab_panel,
                             cx,
                         ),
                         ContactEntry::ParticipantScreen { peer_id, is_last } => {
@@ -196,14 +196,14 @@ impl CollabPanel {
                                 *peer_id,
                                 *is_last,
                                 is_selected,
-                                &theme.contact_list,
+                                &theme.collab_panel,
                                 cx,
                             )
                         }
                         ContactEntry::IncomingRequest(user) => Self::render_contact_request(
                             user.clone(),
                             this.user_store.clone(),
-                            &theme.contact_list,
+                            &theme.collab_panel,
                             true,
                             is_selected,
                             cx,
@@ -211,7 +211,7 @@ impl CollabPanel {
                         ContactEntry::OutgoingRequest(user) => Self::render_contact_request(
                             user.clone(),
                             this.user_store.clone(),
-                            &theme.contact_list,
+                            &theme.collab_panel,
                             false,
                             is_selected,
                             cx,
@@ -220,7 +220,7 @@ impl CollabPanel {
                             contact,
                             *calling,
                             &this.project,
-                            &theme.contact_list,
+                            &theme.collab_panel,
                             is_selected,
                             cx,
                         ),
@@ -617,7 +617,7 @@ impl CollabPanel {
         user: &User,
         is_pending: bool,
         is_selected: bool,
-        theme: &theme::ContactList,
+        theme: &theme::CollabPanel,
     ) -> AnyElement<Self> {
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
@@ -666,7 +666,7 @@ impl CollabPanel {
         is_current: bool,
         is_last: bool,
         is_selected: bool,
-        theme: &theme::ContactList,
+        theme: &theme::CollabPanel,
         cx: &mut ViewContext<Self>,
     ) -> AnyElement<Self> {
         enum JoinProject {}
@@ -765,7 +765,7 @@ impl CollabPanel {
         peer_id: PeerId,
         is_last: bool,
         is_selected: bool,
-        theme: &theme::ContactList,
+        theme: &theme::CollabPanel,
         cx: &mut ViewContext<Self>,
     ) -> AnyElement<Self> {
         enum OpenSharedScreen {}
@@ -865,7 +865,7 @@ impl CollabPanel {
 
     fn render_header(
         section: Section,
-        theme: &theme::ContactList,
+        theme: &theme::CollabPanel,
         is_selected: bool,
         is_collapsed: bool,
         cx: &mut ViewContext<Self>,
@@ -944,7 +944,7 @@ impl CollabPanel {
         contact: &Contact,
         calling: bool,
         project: &ModelHandle<Project>,
-        theme: &theme::ContactList,
+        theme: &theme::CollabPanel,
         is_selected: bool,
         cx: &mut ViewContext<Self>,
     ) -> AnyElement<Self> {
@@ -1046,7 +1046,7 @@ impl CollabPanel {
     fn render_contact_request(
         user: Arc<User>,
         user_store: ModelHandle<UserStore>,
-        theme: &theme::ContactList,
+        theme: &theme::CollabPanel,
         is_incoming: bool,
         is_selected: bool,
         cx: &mut ViewContext<Self>,
@@ -1351,13 +1351,13 @@ impl View for CollabPanel {
                             .with_child(
                                 ChildView::new(&self.filter_editor, cx)
                                     .contained()
-                                    .with_style(theme.contact_list.user_query_editor.container)
+                                    .with_style(theme.collab_panel.user_query_editor.container)
                                     .flex(1.0, true),
                             )
                             .with_child(
                                 MouseEventHandler::<AddContact, Self>::new(0, cx, |_, _| {
                                     render_icon_button(
-                                        &theme.contact_list.add_contact_button,
+                                        &theme.collab_panel.add_contact_button,
                                         "icons/user_plus_16.svg",
                                     )
                                 })
@@ -1373,8 +1373,8 @@ impl View for CollabPanel {
                                     cx,
                                 )
                                 .constrained()
-                                .with_height(theme.contact_list.user_query_editor_height)
-                                .with_width(theme.contact_list.user_query_editor_height),
+                                .with_height(theme.collab_panel.user_query_editor_height)
+                                .with_width(theme.collab_panel.user_query_editor_height),
                             )
                             .constrained()
                             .with_width(self.size(cx)),

crates/collab_ui/src/panel/contact_finder.rs

@@ -97,7 +97,7 @@ impl PickerDelegate for ContactFinderDelegate {
         selected: bool,
         cx: &gpui::AppContext,
     ) -> AnyElement<Picker<Self>> {
-        let theme = &theme::current(cx);
+        let theme = &theme::current(cx).contact_finder;
         let user = &self.potential_contacts[ix];
         let request_status = self.user_store.read(cx).contact_request_status(user);
 
@@ -109,27 +109,22 @@ impl PickerDelegate for ContactFinderDelegate {
             ContactRequestStatus::RequestAccepted => None,
         };
         let button_style = if self.user_store.read(cx).is_contact_request_pending(user) {
-            &theme.contact_finder.disabled_contact_button
+            &theme.disabled_contact_button
         } else {
-            &theme.contact_finder.contact_button
+            &theme.contact_button
         };
-        let style = theme
-            .contact_finder
-            .picker
-            .item
-            .in_state(selected)
-            .style_for(mouse_state);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
                 Image::from_data(avatar)
-                    .with_style(theme.contact_finder.contact_avatar)
+                    .with_style(theme.contact_avatar)
                     .aligned()
                     .left()
             }))
             .with_child(
                 Label::new(user.github_login.clone(), style.label.clone())
                     .contained()
-                    .with_style(theme.contact_finder.contact_username)
+                    .with_style(theme.contact_username)
                     .aligned()
                     .left(),
             )
@@ -150,7 +145,7 @@ impl PickerDelegate for ContactFinderDelegate {
             .contained()
             .with_style(style.container)
             .constrained()
-            .with_height(theme.contact_finder.row_height)
+            .with_height(theme.row_height)
             .into_any()
     }
 }

crates/theme/src/theme.rs

@@ -44,13 +44,13 @@ pub struct Theme {
     pub workspace: Workspace,
     pub context_menu: ContextMenu,
     pub contacts_popover: ContactsPopover,
-    pub contact_list: ContactList,
     pub toolbar_dropdown_menu: DropdownMenu,
     pub copilot: Copilot,
-    pub contact_finder: ContactFinder,
+    pub collab_panel: CollabPanel,
     pub project_panel: ProjectPanel,
     pub channels_panel: ChanelsPanelStyle,
     pub command_palette: CommandPalette,
+    pub contact_finder: ContactFinder,
     pub picker: Picker,
     pub editor: Editor,
     pub search: Search,
@@ -220,7 +220,7 @@ pub struct ContactsPopover {
 }
 
 #[derive(Deserialize, Default, JsonSchema)]
-pub struct ContactList {
+pub struct CollabPanel {
     pub user_query_editor: FieldEditor,
     pub user_query_editor_height: f32,
     pub add_contact_button: IconButton,

styles/src/style_tree/app.ts

@@ -1,4 +1,3 @@
-import contact_finder from "./contact_finder"
 import contacts_popover from "./contacts_popover"
 import command_palette from "./command_palette"
 import project_panel from "./project_panel"
@@ -14,7 +13,8 @@ import simple_message_notification from "./simple_message_notification"
 import project_shared_notification from "./project_shared_notification"
 import tooltip from "./tooltip"
 import terminal from "./terminal"
-import contact_list from "./contact_list"
+import contact_finder from "./contact_finder"
+import collab_panel from "./collab_panel"
 import toolbar_dropdown_menu from "./toolbar_dropdown_menu"
 import incoming_call_notification from "./incoming_call_notification"
 import welcome from "./welcome"
@@ -49,8 +49,8 @@ export default function app(): any {
         project_panel: project_panel(),
         channels_panel: channels_panel(),
         contacts_popover: contacts_popover(),
+        collab_panel: collab_panel(),
         contact_finder: contact_finder(),
-        contact_list: contact_list(),
         toolbar_dropdown_menu: toolbar_dropdown_menu(),
         search: search(),
         shared_screen: shared_screen(),

styles/src/style_tree/contact_list.ts → styles/src/style_tree/collab_panel.ts

@@ -7,6 +7,7 @@ import {
 } from "./components"
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../theme"
+
 export default function contacts_panel(): any {
     const theme = useTheme()
 
@@ -49,7 +50,7 @@ export default function contacts_panel(): any {
     }
 
     return {
-        background: background(layer),
+        // background: background(layer),
         padding: { top: 12 },
         user_query_editor: {
             background: background(layer, "on"),
@@ -88,7 +89,7 @@ export default function contacts_panel(): any {
                         left: side_padding,
                         right: side_padding,
                     },
-                    background: background(layer, "default"), // posiewic: breaking change
+                    // background: background(layer, "default"), // posiewic: breaking change
                 },
                 state: {
                     hovered: {
@@ -97,7 +98,7 @@ export default function contacts_panel(): any {
                     clicked: {
                         background: background(layer, "pressed"),
                     },
-                }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
+                },
             }),
             state: {
                 active: {
@@ -220,7 +221,7 @@ export default function contacts_panel(): any {
             base: interactive({
                 base: {
                     ...project_row,
-                    background: background(layer),
+                    // background: background(layer),
                     icon: {
                         margin: { left: name_margin },
                         color: foreground(layer, "variant"),