From 1549c2274f3160a99199efb53b47faafa4182625 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Wed, 26 Jul 2023 11:11:48 -0700 Subject: [PATCH] Create channel adding modal --- crates/collab_ui/src/panel.rs | 101 ++++++++++++++++-------- crates/theme/src/theme.rs | 13 +-- styles/src/style_tree/app.ts | 2 - styles/src/style_tree/channels_panel.ts | 12 --- styles/src/style_tree/collab_panel.ts | 5 ++ 5 files changed, 76 insertions(+), 57 deletions(-) delete mode 100644 styles/src/style_tree/channels_panel.ts diff --git a/crates/collab_ui/src/panel.rs b/crates/collab_ui/src/panel.rs index bf0397ec765ee2a52143313f7e67dc8cf05aac97..bc79694d53eb04b86be14f3ae737e1a8bc6ef6ff 100644 --- a/crates/collab_ui/src/panel.rs +++ b/crates/collab_ui/src/panel.rs @@ -1,3 +1,4 @@ +mod channel_modal; mod contact_finder; mod panel_settings; @@ -16,7 +17,10 @@ use gpui::{ Canvas, ChildView, Empty, Flex, Image, Label, List, ListOffset, ListState, MouseEventHandler, Orientation, Padding, ParentElement, Stack, Svg, }, - geometry::{rect::RectF, vector::vec2f}, + geometry::{ + rect::RectF, + vector::vec2f, + }, platform::{CursorStyle, MouseButton, PromptLevel}, serde_json, AnyElement, AppContext, AsyncAppContext, Element, Entity, ModelHandle, Subscription, Task, View, ViewContext, ViewHandle, WeakViewHandle, @@ -34,6 +38,8 @@ use workspace::{ Workspace, }; +use self::channel_modal::ChannelModal; + actions!(collab_panel, [ToggleFocus]); const CHANNELS_PANEL_KEY: &'static str = "ChannelsPanel"; @@ -41,6 +47,7 @@ const CHANNELS_PANEL_KEY: &'static str = "ChannelsPanel"; pub fn init(_client: Arc, cx: &mut AppContext) { settings::register::(cx); contact_finder::init(cx); + channel_modal::init(cx); cx.add_action(CollabPanel::cancel); cx.add_action(CollabPanel::select_next); @@ -880,6 +887,7 @@ impl CollabPanel { ) -> AnyElement { enum Header {} enum LeaveCallContactList {} + enum AddChannel {} let tooltip_style = &theme.tooltip; let text = match section { @@ -933,6 +941,22 @@ impl CollabPanel { cx, ), ), + Section::Channels => Some( + MouseEventHandler::::new(0, cx, |_, _| { + render_icon_button(&theme.collab_panel.add_contact_button, "icons/plus_16.svg") + }) + .with_cursor_style(CursorStyle::PointingHand) + .on_click(MouseButton::Left, |_, this, cx| { + this.toggle_channel_finder(cx); + }) + .with_tooltip::( + 0, + "Add or join a channel".into(), + None, + tooltip_style.clone(), + cx, + ), + ), _ => None, }; @@ -1316,6 +1340,14 @@ impl CollabPanel { } } + fn toggle_channel_finder(&mut self, cx: &mut ViewContext) { + if let Some(workspace) = self.workspace.upgrade(cx) { + workspace.update(cx, |workspace, cx| { + workspace.toggle_modal(cx, |_, cx| cx.add_view(|cx| ChannelModal::new(cx))); + }); + } + } + fn remove_contact(&mut self, user_id: u64, github_login: &str, cx: &mut ViewContext) { let user_store = self.user_store.clone(); let prompt_message = format!( @@ -1388,36 +1420,43 @@ impl View for CollabPanel { fn render(&mut self, cx: &mut gpui::ViewContext<'_, '_, Self>) -> gpui::AnyElement { let theme = &theme::current(cx).collab_panel; - Stack::new() - .with_child( - Flex::column() - .with_child( - Flex::row() - .with_child( - ChildView::new(&self.filter_editor, cx) - .contained() - .with_style(theme.user_query_editor.container) - .flex(1.0, true), - ) - .constrained() - .with_width(self.size(cx)), - ) - .with_child( - List::new(self.list_state.clone()) - .constrained() - .with_width(self.size(cx)) - .flex(1., true) - .into_any(), - ) - .contained() - .with_style(theme.container) - .constrained() - .with_width(self.size(cx)) - .into_any(), - ) - .with_child(ChildView::new(&self.context_menu, cx)) - .into_any_named("channels panel") - .into_any() + enum PanelFocus {} + MouseEventHandler::::new(0, cx, |_, cx| { + Stack::new() + .with_child( + Flex::column() + .with_child( + Flex::row() + .with_child( + ChildView::new(&self.filter_editor, cx) + .contained() + .with_style(theme.user_query_editor.container) + .flex(1.0, true), + ) + .constrained() + .with_width(self.size(cx)), + ) + .with_child( + List::new(self.list_state.clone()) + .constrained() + .with_width(self.size(cx)) + .flex(1., true) + .into_any(), + ) + .contained() + .with_style(theme.container) + .constrained() + .with_width(self.size(cx)) + .into_any(), + ) + .with_child(ChildView::new(&self.context_menu, cx)) + .into_any() + }) + .on_click(MouseButton::Left, |_, v, cx| { + cx.focus_self() + }) + .into_any_named("channels panel") + } } diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index e13c8daafcc87cbc7bd3437d98d64d3bcebad489..3de878118e6e0be365ecbeec034fa78445ad9758 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -47,7 +47,6 @@ pub struct Theme { pub copilot: Copilot, pub collab_panel: CollabPanel, pub project_panel: ProjectPanel, - pub channels_panel: ChanelsPanelStyle, pub command_palette: CommandPalette, pub contact_finder: ContactFinder, pub picker: Picker, @@ -225,6 +224,7 @@ pub struct CollabPanel { pub user_query_editor_height: f32, pub leave_call_button: IconButton, pub add_contact_button: IconButton, + pub add_channel_button: IconButton, pub header_row: ContainedText, pub subheader_row: Toggleable>, pub leave_call: Interactive, @@ -1064,17 +1064,6 @@ pub struct Contained { contained: T, } -#[derive(Clone, Deserialize, Default, JsonSchema)] -pub struct FlexStyle { - // Between item spacing - item_spacing: f32, -} - -#[derive(Clone, Deserialize, Default, JsonSchema)] -pub struct ChanelsPanelStyle { - pub contacts_header: TextStyle, -} - #[derive(Clone, Deserialize, Default, JsonSchema)] pub struct SavedConversation { pub container: Interactive, diff --git a/styles/src/style_tree/app.ts b/styles/src/style_tree/app.ts index d017ce90cad387463b8b8f736881bcf451ad30c8..fab751d0d1ae29a9ea4b3d4ec3c13049caea1e09 100644 --- a/styles/src/style_tree/app.ts +++ b/styles/src/style_tree/app.ts @@ -23,7 +23,6 @@ import { titlebar } from "./titlebar" import editor from "./editor" import feedback from "./feedback" import { useTheme } from "../common" -import channels_panel from "./channels_panel" export default function app(): any { const theme = useTheme() @@ -46,7 +45,6 @@ export default function app(): any { editor: editor(), project_diagnostics: project_diagnostics(), project_panel: project_panel(), - channels_panel: channels_panel(), collab_panel: collab_panel(), contact_finder: contact_finder(), toolbar_dropdown_menu: toolbar_dropdown_menu(), diff --git a/styles/src/style_tree/channels_panel.ts b/styles/src/style_tree/channels_panel.ts deleted file mode 100644 index 126bbbe18cad17f3783c403748c55c852528548a..0000000000000000000000000000000000000000 --- a/styles/src/style_tree/channels_panel.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { - text, -} from "./components" -import { useTheme } from "../theme" -export default function channels_panel(): any { - const theme = useTheme() - - - return { - contacts_header: text(theme.middle, "sans", "variant", { size: "lg" }), - } -} diff --git a/styles/src/style_tree/collab_panel.ts b/styles/src/style_tree/collab_panel.ts index 4f847081abbf7a769eb8f106956e5059798f4ce1..8e817add3ffa39f0df0761726f9dfc7a0bd9baaf 100644 --- a/styles/src/style_tree/collab_panel.ts +++ b/styles/src/style_tree/collab_panel.ts @@ -80,6 +80,11 @@ export default function contacts_panel(): any { button_width: 28, icon_width: 16, }, + add_channel_button: { + color: foreground(layer, "on"), + button_width: 28, + icon_width: 16, + }, leave_call_button: { color: foreground(layer, "on"), button_width: 28,