Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restructure collab panel, make contact finder into a normal modal

Browse source
This commit is contained in:
Max Brunsfeld 2023-07-25 17:29:09 -07:00 • committed by Mikayla Maki
parent 14fdcadcfc
commit fc49194535
No known key found for this signature in database
8 changed files with 325 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

16
crates/collab_ui/src/collab_titlebar_item.rs
View file

@ -1,7 +1,6 @@
use crate::{ use crate::{
contact_notification::ContactNotification, face_pile::FacePile, contact_notification::ContactNotification, face_pile::FacePile, toggle_deafen, toggle_mute,
toggle_deafen, toggle_mute, toggle_screen_sharing, LeaveCall, ToggleDeafen, ToggleMute, toggle_screen_sharing, LeaveCall, ToggleDeafen, ToggleMute, ToggleScreenSharing,
ToggleScreenSharing,
}; };
use call::{ActiveCall, ParticipantLocation, Room}; use call::{ActiveCall, ParticipantLocation, Room};
use client::{proto::PeerId, Client, ContactEventKind, SignIn, SignOut, User, UserStore}; use client::{proto::PeerId, Client, ContactEventKind, SignIn, SignOut, User, UserStore};
@ -355,6 +354,7 @@ impl CollabTitlebarItem {
user_menu.toggle(Default::default(), AnchorCorner::TopRight, items, cx); user_menu.toggle(Default::default(), AnchorCorner::TopRight, items, cx);
}); });
} }
fn render_branches_popover_host<'a>( fn render_branches_popover_host<'a>(
&'a self, &'a self,
_theme: &'a theme::Titlebar, _theme: &'a theme::Titlebar,
@ -368,8 +368,8 @@ impl CollabTitlebarItem {
.flex(1., true) .flex(1., true)
.contained() .contained()
.constrained() .constrained()
.with_width(theme.contacts_popover.width) .with_width(theme.titlebar.menu.width)
.with_height(theme.contacts_popover.height) .with_height(theme.titlebar.menu.height)
}) })
.on_click(MouseButton::Left, |_, _, _| {}) .on_click(MouseButton::Left, |_, _, _| {})
.on_down_out(MouseButton::Left, move |_, this, cx| { .on_down_out(MouseButton::Left, move |_, this, cx| {
@ -390,6 +390,7 @@ impl CollabTitlebarItem {
.into_any() .into_any()
}) })
} }
fn render_project_popover_host<'a>( fn render_project_popover_host<'a>(
&'a self, &'a self,
_theme: &'a theme::Titlebar, _theme: &'a theme::Titlebar,
@ -403,8 +404,8 @@ impl CollabTitlebarItem {
.flex(1., true) .flex(1., true)
.contained() .contained()
.constrained() .constrained()
.with_width(theme.contacts_popover.width) .with_width(theme.titlebar.menu.width)
.with_height(theme.contacts_popover.height) .with_height(theme.titlebar.menu.height)
}) })
.on_click(MouseButton::Left, |_, _, _| {}) .on_click(MouseButton::Left, |_, _, _| {})
.on_down_out(MouseButton::Left, move |_, this, cx| { .on_down_out(MouseButton::Left, move |_, this, cx| {
@ -424,6 +425,7 @@ impl CollabTitlebarItem {
.into_any() .into_any()
}) })
} }
pub fn toggle_vcs_menu(&mut self, _: &ToggleVcsMenu, cx: &mut ViewContext<Self>) { pub fn toggle_vcs_menu(&mut self, _: &ToggleVcsMenu, cx: &mut ViewContext<Self>) {
if self.branch_popover.take().is_none() { if self.branch_popover.take().is_none() {
if let Some(workspace) = self.workspace.upgrade(cx) { if let Some(workspace) = self.workspace.upgrade(cx) {

445
crates/collab_ui/src/panel.rs
View file

@ -4,7 +4,7 @@ mod panel_settings;
use anyhow::Result; use anyhow::Result;
use call::ActiveCall; use call::ActiveCall;
use client::{proto::PeerId, Client, Contact, User, UserStore}; use client::{proto::PeerId, Client, Contact, User, UserStore};
use contact_finder::{build_contact_finder, ContactFinder}; use contact_finder::build_contact_finder;
use context_menu::ContextMenu; use context_menu::ContextMenu;
use db::kvp::KEY_VALUE_STORE; use db::kvp::KEY_VALUE_STORE;
use editor::{Cancel, Editor}; use editor::{Cancel, Editor};
@ -54,9 +54,6 @@ pub struct CollabPanel {
has_focus: bool, has_focus: bool,
pending_serialization: Task<Option<()>>, pending_serialization: Task<Option<()>>,
context_menu: ViewHandle<ContextMenu>, context_menu: ViewHandle<ContextMenu>,
contact_finder: Option<ViewHandle<ContactFinder>>,
// from contacts list
filter_editor: ViewHandle<Editor>, filter_editor: ViewHandle<Editor>,
entries: Vec<ContactEntry>, entries: Vec<ContactEntry>,
selection: Option<usize>, selection: Option<usize>,
@ -84,14 +81,16 @@ pub enum Event {
#[derive(Clone, Copy, PartialEq, Eq, Debug, PartialOrd, Ord)] #[derive(Clone, Copy, PartialEq, Eq, Debug, PartialOrd, Ord)]
enum Section { enum Section {
ActiveCall, ActiveCall,
Channels,
Requests, Requests,
Contacts,
Online, Online,
Offline, Offline,
} }
#[derive(Clone)] #[derive(Clone)]
enum ContactEntry { enum ContactEntry {
Header(Section), Header(Section, usize),
CallParticipant { CallParticipant {
user: Arc<User>, user: Arc<User>,
is_pending: bool, is_pending: bool,
@ -130,7 +129,7 @@ impl CollabPanel {
})), })),
cx, cx,
); );
editor.set_placeholder_text("Filter contacts", cx); editor.set_placeholder_text("Filter channels, contacts", cx);
editor editor
}); });
@ -145,7 +144,7 @@ impl CollabPanel {
this.selection = this this.selection = this
.entries .entries
.iter() .iter()
.position(|entry| !matches!(entry, ContactEntry::Header(_))); .position(|entry| !matches!(entry, ContactEntry::Header(_, _)));
} }
} }
}) })
@ -158,11 +157,12 @@ impl CollabPanel {
let current_project_id = this.project.read(cx).remote_id(); let current_project_id = this.project.read(cx).remote_id();
match &this.entries[ix] { match &this.entries[ix] {
ContactEntry::Header(section) => { ContactEntry::Header(section, depth) => {
let is_collapsed = this.collapsed_sections.contains(section); let is_collapsed = this.collapsed_sections.contains(section);
Self::render_header( Self::render_header(
*section, *section,
&theme.collab_panel, &theme,
*depth,
is_selected, is_selected,
is_collapsed, is_collapsed,
cx, cx,
@ -234,7 +234,6 @@ impl CollabPanel {
pending_serialization: Task::ready(None), pending_serialization: Task::ready(None),
context_menu: cx.add_view(|cx| ContextMenu::new(view_id, cx)), context_menu: cx.add_view(|cx| ContextMenu::new(view_id, cx)),
filter_editor, filter_editor,
contact_finder: None,
entries: Vec::default(), entries: Vec::default(),
selection: None, selection: None,
user_store: workspace.user_store().clone(), user_store: workspace.user_store().clone(),
@ -431,128 +430,137 @@ impl CollabPanel {
})); }));
if !participant_entries.is_empty() { if !participant_entries.is_empty() {
self.entries.push(ContactEntry::Header(Section::ActiveCall)); self.entries
.push(ContactEntry::Header(Section::ActiveCall, 0));
if !self.collapsed_sections.contains(&Section::ActiveCall) { if !self.collapsed_sections.contains(&Section::ActiveCall) {
self.entries.extend(participant_entries); self.entries.extend(participant_entries);
} }
} }
} }
let mut request_entries = Vec::new(); self.entries
let incoming = user_store.incoming_contact_requests(); .push(ContactEntry::Header(Section::Channels, 0));
if !incoming.is_empty() {
self.match_candidates.clear();
self.match_candidates
.extend(
incoming
.iter()
.enumerate()
.map(|(ix, user)| StringMatchCandidate {
id: ix,
string: user.github_login.clone(),
char_bag: user.github_login.chars().collect(),
}),
);
let matches = executor.block(match_strings(
&self.match_candidates,
&query,
true,
usize::MAX,
&Default::default(),
executor.clone(),
));
request_entries.extend(
matches
.iter()
.map(|mat| ContactEntry::IncomingRequest(incoming[mat.candidate_id].clone())),
);
}
let outgoing = user_store.outgoing_contact_requests(); self.entries
if !outgoing.is_empty() { .push(ContactEntry::Header(Section::Contacts, 0));
self.match_candidates.clear();
self.match_candidates
.extend(
outgoing
.iter()
.enumerate()
.map(|(ix, user)| StringMatchCandidate {
id: ix,
string: user.github_login.clone(),
char_bag: user.github_login.chars().collect(),
}),
);
let matches = executor.block(match_strings(
&self.match_candidates,
&query,
true,
usize::MAX,
&Default::default(),
executor.clone(),
));
request_entries.extend(
matches
.iter()
.map(|mat| ContactEntry::OutgoingRequest(outgoing[mat.candidate_id].clone())),
);
}
if !request_entries.is_empty() { if !self.collapsed_sections.contains(&Section::Contacts) {
self.entries.push(ContactEntry::Header(Section::Requests)); let mut request_entries = Vec::new();
if !self.collapsed_sections.contains(&Section::Requests) { let incoming = user_store.incoming_contact_requests();
self.entries.append(&mut request_entries); if !incoming.is_empty() {
self.match_candidates.clear();
self.match_candidates
.extend(
incoming
.iter()
.enumerate()
.map(|(ix, user)| StringMatchCandidate {
id: ix,
string: user.github_login.clone(),
char_bag: user.github_login.chars().collect(),
}),
);
let matches = executor.block(match_strings(
&self.match_candidates,
&query,
true,
usize::MAX,
&Default::default(),
executor.clone(),
));
request_entries.extend(
matches.iter().map(|mat| {
ContactEntry::IncomingRequest(incoming[mat.candidate_id].clone())
}),
);
} }
}
let contacts = user_store.contacts(); let outgoing = user_store.outgoing_contact_requests();
if !contacts.is_empty() { if !outgoing.is_empty() {
self.match_candidates.clear(); self.match_candidates.clear();
self.match_candidates self.match_candidates
.extend( .extend(
contacts outgoing
.iter() .iter()
.enumerate() .enumerate()
.map(|(ix, contact)| StringMatchCandidate { .map(|(ix, user)| StringMatchCandidate {
id: ix,
string: user.github_login.clone(),
char_bag: user.github_login.chars().collect(),
}),
);
let matches = executor.block(match_strings(
&self.match_candidates,
&query,
true,
usize::MAX,
&Default::default(),
executor.clone(),
));
request_entries.extend(
matches.iter().map(|mat| {
ContactEntry::OutgoingRequest(outgoing[mat.candidate_id].clone())
}),
);
}
if !request_entries.is_empty() {
self.entries
.push(ContactEntry::Header(Section::Requests, 1));
if !self.collapsed_sections.contains(&Section::Requests) {
self.entries.append(&mut request_entries);
}
}
let contacts = user_store.contacts();
if !contacts.is_empty() {
self.match_candidates.clear();
self.match_candidates
.extend(contacts.iter().enumerate().map(|(ix, contact)| {
StringMatchCandidate {
id: ix, id: ix,
string: contact.user.github_login.clone(), string: contact.user.github_login.clone(),
char_bag: contact.user.github_login.chars().collect(), char_bag: contact.user.github_login.chars().collect(),
}), }
); }));
let matches = executor.block(match_strings( let matches = executor.block(match_strings(
&self.match_candidates, &self.match_candidates,
&query, &query,
true, true,
usize::MAX, usize::MAX,
&Default::default(), &Default::default(),
executor.clone(), executor.clone(),
)); ));
let (mut online_contacts, offline_contacts) = matches let (mut online_contacts, offline_contacts) = matches
.iter() .iter()
.partition::<Vec<_>, _>(|mat| contacts[mat.candidate_id].online); .partition::<Vec<_>, _>(|mat| contacts[mat.candidate_id].online);
if let Some(room) = ActiveCall::global(cx).read(cx).room() { if let Some(room) = ActiveCall::global(cx).read(cx).room() {
let room = room.read(cx); let room = room.read(cx);
online_contacts.retain(|contact| { online_contacts.retain(|contact| {
let contact = &contacts[contact.candidate_id]; let contact = &contacts[contact.candidate_id];
!room.contains_participant(contact.user.id) !room.contains_participant(contact.user.id)
}); });
} }
for (matches, section) in [ for (matches, section) in [
(online_contacts, Section::Online), (online_contacts, Section::Online),
(offline_contacts, Section::Offline), (offline_contacts, Section::Offline),
] { ] {
if !matches.is_empty() { if !matches.is_empty() {
self.entries.push(ContactEntry::Header(section)); self.entries.push(ContactEntry::Header(section, 1));
if !self.collapsed_sections.contains(&section) { if !self.collapsed_sections.contains(&section) {
let active_call = &ActiveCall::global(cx).read(cx); let active_call = &ActiveCall::global(cx).read(cx);
for mat in matches { for mat in matches {
let contact = &contacts[mat.candidate_id]; let contact = &contacts[mat.candidate_id];
self.entries.push(ContactEntry::Contact { self.entries.push(ContactEntry::Contact {
contact: contact.clone(), contact: contact.clone(),
calling: active_call.pending_invites().contains(&contact.user.id), calling: active_call
}); .pending_invites()
.contains(&contact.user.id),
});
}
} }
} }
} }
@ -865,7 +873,8 @@ impl CollabPanel {
fn render_header( fn render_header(
section: Section, section: Section,
theme: &theme::CollabPanel, theme: &theme::Theme,
depth: usize,
is_selected: bool, is_selected: bool,
is_collapsed: bool, is_collapsed: bool,
cx: &mut ViewContext<Self>, cx: &mut ViewContext<Self>,
@ -873,69 +882,112 @@ impl CollabPanel {
enum Header {} enum Header {}
enum LeaveCallContactList {} enum LeaveCallContactList {}
let header_style = theme let tooltip_style = &theme.tooltip;
.header_row
.in_state(is_selected)
.style_for(&mut Default::default());
let text = match section { let text = match section {
Section::ActiveCall => "Collaborators", Section::ActiveCall => "Current Call",
Section::Requests => "Contact Requests", Section::Requests => "Requests",
Section::Contacts => "Contacts",
Section::Channels => "Channels",
Section::Online => "Online", Section::Online => "Online",
Section::Offline => "Offline", Section::Offline => "Offline",
}; };
let leave_call = if section == Section::ActiveCall {
Some( enum AddContact {}
MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |state, _| { let button = match section {
let style = theme.leave_call.style_for(state); Section::ActiveCall => Some(
Label::new("Leave Call", style.text.clone()) MouseEventHandler::<AddContact, Self>::new(0, cx, |_, _| {
.contained() render_icon_button(
.with_style(style.container) &theme.collab_panel.leave_call_button,
"icons/radix/exit.svg",
)
}) })
.with_cursor_style(CursorStyle::PointingHand)
.on_click(MouseButton::Left, |_, _, cx| { .on_click(MouseButton::Left, |_, _, cx| {
ActiveCall::global(cx) ActiveCall::global(cx)
.update(cx, |call, cx| call.hang_up(cx)) .update(cx, |call, cx| call.hang_up(cx))
.detach_and_log_err(cx); .detach_and_log_err(cx);
}) })
.aligned(), .with_tooltip::<AddContact>(
) 0,
} else { "Leave call".into(),
None None,
tooltip_style.clone(),
cx,
),
),
Section::Contacts => Some(
MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |_, _| {
render_icon_button(
&theme.collab_panel.add_contact_button,
"icons/user_plus_16.svg",
)
})
.with_cursor_style(CursorStyle::PointingHand)
.on_click(MouseButton::Left, |_, this, cx| {
this.toggle_contact_finder(cx);
})
.with_tooltip::<LeaveCallContactList>(
0,
"Search for new contact".into(),
None,
tooltip_style.clone(),
cx,
),
),
_ => None,
}; };
let icon_size = theme.section_icon_size; let can_collapse = depth > 0;
MouseEventHandler::<Header, Self>::new(section as usize, cx, |_, _| { let icon_size = (&theme.collab_panel).section_icon_size;
MouseEventHandler::<Header, Self>::new(section as usize, cx, |state, _| {
let header_style = if depth > 0 {
&theme.collab_panel.subheader_row
} else {
&theme.collab_panel.header_row
}
.in_state(is_selected)
.style_for(state);
Flex::row() Flex::row()
.with_child( .with_children(if can_collapse {
Svg::new(if is_collapsed { Some(
"icons/chevron_right_8.svg" Svg::new(if is_collapsed {
} else { "icons/chevron_right_8.svg"
"icons/chevron_down_8.svg" } else {
}) "icons/chevron_down_8.svg"
.with_color(header_style.text.color) })
.constrained() .with_color(header_style.text.color)
.with_max_width(icon_size) .constrained()
.with_max_height(icon_size) .with_max_width(icon_size)
.aligned() .with_max_height(icon_size)
.constrained() .aligned()
.with_width(icon_size), .constrained()
) .with_width(icon_size)
.contained()
.with_margin_right(
theme.collab_panel.contact_username.container.margin.left,
),
)
} else {
None
})
.with_child( .with_child(
Label::new(text, header_style.text.clone()) Label::new(text, header_style.text.clone())
.aligned() .aligned()
.left() .left()
.contained()
.with_margin_left(theme.contact_username.container.margin.left)
.flex(1., true), .flex(1., true),
) )
.with_children(leave_call) .with_children(button.map(|button| button.aligned().right()))
.constrained() .constrained()
.with_height(theme.row_height) .with_height(theme.collab_panel.row_height)
.contained() .contained()
.with_style(header_style.container) .with_style(header_style.container)
}) })
.with_cursor_style(CursorStyle::PointingHand) .with_cursor_style(CursorStyle::PointingHand)
.on_click(MouseButton::Left, move |_, this, cx| { .on_click(MouseButton::Left, move |_, this, cx| {
this.toggle_expanded(section, cx); if can_collapse {
this.toggle_expanded(section, cx);
}
}) })
.into_any() .into_any()
} }
@ -954,7 +1006,7 @@ impl CollabPanel {
let github_login = contact.user.github_login.clone(); let github_login = contact.user.github_login.clone();
let initial_project = project.clone(); let initial_project = project.clone();
let mut event_handler = let mut event_handler =
MouseEventHandler::<Contact, Self>::new(contact.user.id as usize, cx, |_, cx| { MouseEventHandler::<Contact, Self>::new(contact.user.id as usize, cx, |state, cx| {
Flex::row() Flex::row()
.with_children(contact.user.avatar.clone().map(|avatar| { .with_children(contact.user.avatar.clone().map(|avatar| {
let status_badge = if contact.online { let status_badge = if contact.online {
@ -1023,12 +1075,7 @@ impl CollabPanel {
.constrained() .constrained()
.with_height(theme.row_height) .with_height(theme.row_height)
.contained() .contained()
.with_style( .with_style(*theme.contact_row.in_state(is_selected).style_for(state))
*theme
.contact_row
.in_state(is_selected)
.style_for(&mut Default::default()),
)
}) })
.on_click(MouseButton::Left, move |_, this, cx| { .on_click(MouseButton::Left, move |_, this, cx| {
if online && !busy { if online && !busy {
@ -1147,11 +1194,6 @@ impl CollabPanel {
} }
fn cancel(&mut self, _: &Cancel, cx: &mut ViewContext<Self>) { fn cancel(&mut self, _: &Cancel, cx: &mut ViewContext<Self>) {
if self.contact_finder.take().is_some() {
cx.notify();
return;
}
let did_clear = self.filter_editor.update(cx, |editor, cx| { let did_clear = self.filter_editor.update(cx, |editor, cx| {
if editor.buffer().read(cx).len(cx) > 0 { if editor.buffer().read(cx).len(cx) > 0 {
editor.set_text("", cx); editor.set_text("", cx);
@ -1206,7 +1248,7 @@ impl CollabPanel {
if let Some(selection) = self.selection { if let Some(selection) = self.selection {
if let Some(entry) = self.entries.get(selection) { if let Some(entry) = self.entries.get(selection) {
match entry { match entry {
ContactEntry::Header(section) => { ContactEntry::Header(section, _) => {
self.toggle_expanded(*section, cx); self.toggle_expanded(*section, cx);
} }
ContactEntry::Contact { contact, calling } => { ContactEntry::Contact { contact, calling } => {
@ -1253,19 +1295,17 @@ impl CollabPanel {
} }
fn toggle_contact_finder(&mut self, cx: &mut ViewContext<Self>) { fn toggle_contact_finder(&mut self, cx: &mut ViewContext<Self>) {
if self.contact_finder.take().is_none() { if let Some(workspace) = self.workspace.upgrade(cx) {
let child = cx.add_view(|cx| { workspace.update(cx, |workspace, cx| {
let finder = build_contact_finder(self.user_store.clone(), cx); workspace.toggle_modal(cx, |_, cx| {
finder.set_query(self.filter_editor.read(cx).text(cx), cx); cx.add_view(|cx| {
finder let finder = build_contact_finder(self.user_store.clone(), cx);
finder.set_query(self.filter_editor.read(cx).text(cx), cx);
finder
})
});
}); });
cx.focus(&child);
// self.subscription = Some(cx.subscribe(&child, |_, _, event, cx| match event {
// // PickerEvent::Dismiss => cx.emit(Event::Dismissed),
// }));
self.contact_finder = Some(child);
} }
cx.notify();
} }
fn remove_contact(&mut self, user_id: u64, github_login: &str, cx: &mut ViewContext<Self>) { fn remove_contact(&mut self, user_id: u64, github_login: &str, cx: &mut ViewContext<Self>) {
@ -1338,44 +1378,19 @@ impl View for CollabPanel {
} }
fn render(&mut self, cx: &mut gpui::ViewContext<'_, '_, Self>) -> gpui::AnyElement<Self> { fn render(&mut self, cx: &mut gpui::ViewContext<'_, '_, Self>) -> gpui::AnyElement<Self> {
enum AddContact {} let theme = &theme::current(cx).collab_panel;
let theme = theme::current(cx).clone();
Stack::new() Stack::new()
.with_child(if let Some(finder) = &self.contact_finder { .with_child(
ChildView::new(&finder, cx).into_any()
} else {
Flex::column() Flex::column()
.with_child( .with_child(
Flex::row() Flex::row()
.with_child( .with_child(
ChildView::new(&self.filter_editor, cx) ChildView::new(&self.filter_editor, cx)
.contained() .contained()
.with_style(theme.collab_panel.user_query_editor.container) .with_style(theme.user_query_editor.container)
.flex(1.0, true), .flex(1.0, true),
) )
.with_child(
MouseEventHandler::<AddContact, Self>::new(0, cx, |_, _| {
render_icon_button(
&theme.collab_panel.add_contact_button,
"icons/user_plus_16.svg",
)
})
.with_cursor_style(CursorStyle::PointingHand)
.on_click(MouseButton::Left, |_, this, cx| {
this.toggle_contact_finder(cx);
})
.with_tooltip::<AddContact>(
0,
"Search for new contact".into(),
None,
theme.tooltip.clone(),
cx,
)
.constrained()
.with_height(theme.collab_panel.user_query_editor_height)
.with_width(theme.collab_panel.user_query_editor_height),
)
.constrained() .constrained()
.with_width(self.size(cx)), .with_width(self.size(cx)),
) )
@ -1386,10 +1401,12 @@ impl View for CollabPanel {
.flex(1., true) .flex(1., true)
.into_any(), .into_any(),
) )
.contained()
.with_style(theme.container)
.constrained() .constrained()
.with_width(self.size(cx)) .with_width(self.size(cx))
.into_any() .into_any(),
}) )
.with_child(ChildView::new(&self.context_menu, cx)) .with_child(ChildView::new(&self.context_menu, cx))
.into_any_named("channels panel") .into_any_named("channels panel")
.into_any() .into_any()
@ -1457,9 +1474,9 @@ impl Panel for CollabPanel {
impl PartialEq for ContactEntry { impl PartialEq for ContactEntry {
fn eq(&self, other: &Self) -> bool { fn eq(&self, other: &Self) -> bool {
match self { match self {
ContactEntry::Header(section_1) => { ContactEntry::Header(section_1, depth_1) => {
if let ContactEntry::Header(section_2) = other { if let ContactEntry::Header(section_2, depth_2) = other {
return section_1 == section_2; return section_1 == section_2 && depth_1 == depth_2;
} }
} }
ContactEntry::CallParticipant { user: user_1, .. } => { ContactEntry::CallParticipant { user: user_1, .. } => {
@ -1520,9 +1537,9 @@ fn render_icon_button(style: &IconButton, svg_path: &'static str) -> impl Elemen
.constrained() .constrained()
.with_width(style.icon_width) .with_width(style.icon_width)
.aligned() .aligned()
.contained()
.with_style(style.container)
.constrained() .constrained()
.with_width(style.button_width) .with_width(style.button_width)
.with_height(style.button_width) .with_height(style.button_width)
.contained()
.with_style(style.container)
} }

2
crates/collab_ui/src/panel/contact_finder.rs
View file

@ -22,7 +22,7 @@ pub fn build_contact_finder(
}, },
cx, cx,
) )
.with_theme(|theme| theme.contact_finder.picker.clone()) .with_theme(|theme| theme.picker.clone())
} }
pub struct ContactFinderDelegate { pub struct ContactFinderDelegate {

18
crates/theme/src/theme.rs
View file

@ -43,7 +43,6 @@ pub struct Theme {
pub meta: ThemeMeta, pub meta: ThemeMeta,
pub workspace: Workspace, pub workspace: Workspace,
pub context_menu: ContextMenu, pub context_menu: ContextMenu,
pub contacts_popover: ContactsPopover,
pub toolbar_dropdown_menu: DropdownMenu, pub toolbar_dropdown_menu: DropdownMenu,
pub copilot: Copilot, pub copilot: Copilot,
pub collab_panel: CollabPanel, pub collab_panel: CollabPanel,
@ -118,6 +117,7 @@ pub struct Titlebar {
#[serde(flatten)] #[serde(flatten)]
pub container: ContainerStyle, pub container: ContainerStyle,
pub height: f32, pub height: f32,
pub menu: TitlebarMenu,
pub project_menu_button: Toggleable<Interactive<ContainedText>>, pub project_menu_button: Toggleable<Interactive<ContainedText>>,
pub project_name_divider: ContainedText, pub project_name_divider: ContainedText,
pub git_menu_button: Toggleable<Interactive<ContainedText>>, pub git_menu_button: Toggleable<Interactive<ContainedText>>,
@ -144,6 +144,12 @@ pub struct Titlebar {
pub user_menu: UserMenu, pub user_menu: UserMenu,
} }
#[derive(Clone, Deserialize, Default, JsonSchema)]
pub struct TitlebarMenu {
pub width: f32,
pub height: f32,
}
#[derive(Clone, Deserialize, Default, JsonSchema)] #[derive(Clone, Deserialize, Default, JsonSchema)]
pub struct UserMenu { pub struct UserMenu {
pub user_menu_button_online: UserMenuButton, pub user_menu_button_online: UserMenuButton,
@ -212,19 +218,15 @@ pub struct CopilotAuthAuthorized {
} }
#[derive(Deserialize, Default, JsonSchema)] #[derive(Deserialize, Default, JsonSchema)]
pub struct ContactsPopover { pub struct CollabPanel {
#[serde(flatten)] #[serde(flatten)]
pub container: ContainerStyle, pub container: ContainerStyle,
pub height: f32,
pub width: f32,
}
#[derive(Deserialize, Default, JsonSchema)]
pub struct CollabPanel {
pub user_query_editor: FieldEditor, pub user_query_editor: FieldEditor,
pub user_query_editor_height: f32, pub user_query_editor_height: f32,
pub leave_call_button: IconButton,
pub add_contact_button: IconButton, pub add_contact_button: IconButton,
pub header_row: Toggleable<Interactive<ContainedText>>, pub header_row: Toggleable<Interactive<ContainedText>>,
pub subheader_row: Toggleable<Interactive<ContainedText>>,
pub leave_call: Interactive<ContainedText>, pub leave_call: Interactive<ContainedText>,
pub contact_row: Toggleable<Interactive<ContainerStyle>>, pub contact_row: Toggleable<Interactive<ContainerStyle>>,
pub row_height: f32, pub row_height: f32,

2
styles/src/style_tree/app.ts
View file

@ -1,4 +1,3 @@
import contacts_popover from "./contacts_popover"
import command_palette from "./command_palette" import command_palette from "./command_palette"
import project_panel from "./project_panel" import project_panel from "./project_panel"
import search from "./search" import search from "./search"
@ -48,7 +47,6 @@ export default function app(): any {
project_diagnostics: project_diagnostics(), project_diagnostics: project_diagnostics(),
project_panel: project_panel(), project_panel: project_panel(),
channels_panel: channels_panel(), channels_panel: channels_panel(),
contacts_popover: contacts_popover(),
collab_panel: collab_panel(), collab_panel: collab_panel(),
contact_finder: contact_finder(), contact_finder: contact_finder(),
toolbar_dropdown_menu: toolbar_dropdown_menu(), toolbar_dropdown_menu: toolbar_dropdown_menu(),

87
styles/src/style_tree/collab_panel.ts
View file

@ -50,8 +50,10 @@ export default function contacts_panel(): any {
} }
return { return {
// background: background(layer), background: background(layer),
padding: { top: 12 }, padding: {
top: 12,
},
user_query_editor: { user_query_editor: {
background: background(layer, "on"), background: background(layer, "on"),
corner_radius: 6, corner_radius: 6,
@ -68,12 +70,17 @@ export default function contacts_panel(): any {
top: 4, top: 4,
}, },
margin: { margin: {
left: 6, left: side_padding,
right: side_padding,
}, },
}, },
user_query_editor_height: 33, user_query_editor_height: 33,
add_contact_button: { add_contact_button: {
margin: { left: 6, right: 12 }, color: foreground(layer, "on"),
button_width: 28,
icon_width: 16,
},
leave_call_button: {
color: foreground(layer, "on"), color: foreground(layer, "on"),
button_width: 28, button_width: 28,
icon_width: 16, icon_width: 16,
@ -83,13 +90,46 @@ export default function contacts_panel(): any {
header_row: toggleable({ header_row: toggleable({
base: interactive({ base: interactive({
base: { base: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm", weight: "bold" }),
margin: { top: 14 }, margin: { top: 14 },
padding: { padding: {
left: side_padding, left: side_padding,
right: side_padding, right: side_padding,
}, },
// background: background(layer, "default"), // posiewic: breaking change },
state: {
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
},
},
}),
state: {
active: {
default: {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
},
},
},
}),
subheader_row: toggleable({
base: interactive({
base: {
...text(layer, "mono", { size: "sm" }),
// margin: { top: 14 },
padding: {
left: side_padding,
right: side_padding,
},
}, },
state: { state: {
hovered: { hovered: {
@ -139,25 +179,38 @@ export default function contacts_panel(): any {
}, },
}, },
}), }),
contact_row: { contact_row: toggleable({
inactive: { base: interactive({
default: { base: {
padding: { padding: {
left: side_padding, left: side_padding,
right: side_padding, right: side_padding,
}, },
}, },
}, state: {
active: { hovered: {
default: { background: background(layer, "hovered"),
background: background(layer, "active"), },
padding: { clicked: {
left: side_padding, background: background(layer, "pressed"),
right: side_padding, },
},
}),
state: {
active: {
default: {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
}, },
}, },
}, },
}, }),
contact_avatar: { contact_avatar: {
corner_radius: 10, corner_radius: 10,
width: 18, width: 18,

9
styles/src/style_tree/contacts_popover.ts
View file

@ -4,13 +4,4 @@ import { background, border } from "./components"
export default function contacts_popover(): any { export default function contacts_popover(): any {
const theme = useTheme() const theme = useTheme()
return {
// background: background(theme.middle),
// corner_radius: 6,
padding: { top: 6, bottom: 6 },
// shadow: theme.popover_shadow,
border: border(theme.middle),
width: 300,
height: 400,
}
} }

4
styles/src/style_tree/titlebar.ts
View file

@ -178,6 +178,10 @@ export function titlebar(): any {
left: 80, left: 80,
right: 0, right: 0,
}, },
menu: {
width: 300,
height: 400,
},
// Project // Project
project_name_divider: text(theme.lowest, "sans", "variant"), project_name_divider: text(theme.lowest, "sans", "variant"),