Fix modal click throughs and adjust height for channel modal

Mikayla created 2 years ago

Change summary

crates/collab_ui/src/collab_panel/channel_modal.rs |  2 
crates/workspace/src/workspace.rs                  | 19 +++++++++++----
styles/src/style_tree/channel_modal.ts             |  3 +
3 files changed, 17 insertions(+), 7 deletions(-)

Detailed changes

crates/collab_ui/src/collab_panel/channel_modal.rs

@@ -205,7 +205,7 @@ impl View for ChannelModal {
             ]))
             .with_child(ChildView::new(&self.picker, cx))
             .constrained()
-            .with_height(theme.height)
+            .with_max_height(theme.height)
             .contained()
             .with_style(theme.container)
             .into_any()

crates/workspace/src/workspace.rs

@@ -3755,11 +3755,20 @@ impl View for Workspace {
                                         )
                                     }))
                                     .with_children(self.modal.as_ref().map(|modal| {
-                                        ChildView::new(modal.view.as_any(), cx)
-                                            .contained()
-                                            .with_style(theme.workspace.modal)
-                                            .aligned()
-                                            .top()
+                                        enum ModalBackground {}
+                                        MouseEventHandler::<ModalBackground, _>::new(
+                                            0,
+                                            cx,
+                                            |_, cx| {
+                                                ChildView::new(modal.view.as_any(), cx)
+                                                    .contained()
+                                                    .with_style(theme.workspace.modal)
+                                                    .aligned()
+                                                    .top()
+                                            },
+                                        )
+                                        .on_click(MouseButton::Left, |_, _, _| {})
+                                        // Consume click events to stop focus dropping through
                                     }))
                                     .with_children(self.render_notifications(&theme.workspace, cx)),
                             ))

styles/src/style_tree/channel_modal.ts

@@ -29,7 +29,7 @@ export default function channel_modal(): any {
         selection: theme.players[0],
         border: border(theme.middle),
         padding: {
-            bottom: 4,
+            bottom: 8,
             left: 8,
             right: 8,
             top: 4,
@@ -37,6 +37,7 @@ export default function channel_modal(): any {
         margin: {
             left: side_margin,
             right: side_margin,
+            bottom: 8,
         },
     }