chore: refine some ui components (#38)

Reviewed-on: #38

crates/ui/src/avatar.rs

@@ -1,8 +1,8 @@
 use gpui::prelude::FluentBuilder;
 use gpui::{
     AbsoluteLength, App, Div, Hsla, ImageSource, Img, InteractiveElement, Interactivity,
-    IntoElement, ParentElement, RenderOnce, StyleRefinement, Styled, StyledImage, Window, div, img,
-    px,
+    IntoElement, ObjectFit, ParentElement, RenderOnce, StyleRefinement, Styled, StyledImage,
+    Window, div, img, px,
 };
 use theme::ActiveTheme;
 
@@ -26,9 +26,7 @@ pub(super) fn avatar_size(size: Size) -> AbsoluteLength {
 /// ```
 /// use ui::{Avatar};
 ///
-/// Avatar::new("path/to/image.png")
-///     .grayscale(true)
-///     .border_color(gpui::red());
+/// Avatar::new("path/to/image.png").grayscale(true).border_color(gpui::red());
 /// ```
 #[derive(IntoElement)]
 pub struct Avatar {
@@ -130,7 +128,7 @@ impl RenderOnce for Avatar {
                 self.image
                     .size(image_size)
                     .rounded_full()
-                    .object_fit(gpui::ObjectFit::Fill)
+                    .object_fit(ObjectFit::Cover)
                     .bg(cx.theme().ghost_element_background)
                     .with_fallback(move || {
                         img("brand/avatar.png")

crates/ui/src/dock/tab_panel.rs

@@ -51,7 +51,7 @@ impl Render for DragPanel {
             .overflow_hidden()
             .whitespace_nowrap()
             .rounded(cx.theme().radius)
-            .text_xs()
+            .text_sm()
             .text_color(cx.theme().text)
             .text_ellipsis()
             .when(cx.theme().shadow, |this| this.shadow_xs())
@@ -312,6 +312,7 @@ impl TabPanel {
 
         cx.emit(PanelEvent::ZoomOut);
         cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
     }
 
     fn detach_panel(
@@ -321,10 +322,22 @@ impl TabPanel {
         cx: &mut Context<Self>,
     ) {
         let panel_view = panel.view();
+        let removed_ix = self.panels.iter().position(|p| p.view() == panel_view);
         self.panels.retain(|p| p.view() != panel_view);
 
         if self.active_ix >= self.panels.len() {
             self.set_active_ix(self.panels.len().saturating_sub(1), window, cx)
+        } else if let Some(removed_ix) = removed_ix {
+            if removed_ix < self.active_ix {
+                self.active_ix = self.active_ix.saturating_sub(1);
+            } else if removed_ix == self.active_ix {
+                // The active panel was removed and another panel shifted into
+                // its position. Activate the new panel at the same index.
+                if let Some(new_active) = self.panels.get(self.active_ix) {
+                    new_active.set_active(true, cx);
+                }
+                self.focus_active_panel(window, cx);
+            }
         }
     }
 
@@ -613,7 +626,7 @@ impl TabPanel {
                             div()
                                 .w_full()
                                 .text_ellipsis()
-                                .text_xs()
+                                .text_sm()
                                 .child(panel.title(cx)),
                         )
                         .when(state.draggable, |this| {
@@ -687,8 +700,8 @@ impl TabPanel {
                                 .on_click(cx.listener({
                                     let panel = panel.clone();
                                     move |view, _ev, window, cx| {
+                                        cx.stop_propagation();
                                         view.remove_panel(&panel, window, cx);
-                                        view.set_active_ix(ix, window, cx);
                                     }
                                 })),
                         )

crates/ui/src/modal.rs

@@ -1,5 +1,4 @@
 use std::rc::Rc;
-use instant::Duration;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
@@ -7,6 +6,7 @@ use gpui::{
     InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point,
     RenderOnce, SharedString, StyleRefinement, Styled, Window, anchored, div, hsla, point, px,
 };
+use instant::Duration;
 use theme::ActiveTheme;
 
 use crate::actions::{Cancel, Confirm};
@@ -359,8 +359,8 @@ impl RenderOnce for Modal {
         let y = self.margin_top.unwrap_or(view_size.height / 10.) + offset_top;
         let x = bounds.center().x - self.width / 2.;
 
-        let mut padding_right = px(8.);
-        let mut padding_left = px(8.);
+        let mut padding_right = px(16.);
+        let mut padding_left = px(16.);
 
         if let Some(pl) = self.style.padding.left {
             padding_left = pl.to_pixels(self.width.into(), window.rem_size());
@@ -452,8 +452,8 @@ impl RenderOnce for Modal {
                             .when_some(self.max_width, |this, w| this.max_w(w))
                             .child(
                                 div()
-                                    .px_2()
-                                    .h_4()
+                                    .px_4()
+                                    .h_8()
                                     .w_full()
                                     .flex()
                                     .items_center()

crates/ui/src/tab/mod.rs

@@ -183,12 +183,10 @@ impl RenderOnce for Tab {
             .items_center()
             .flex_shrink_0()
             .h(TABBAR_HEIGHT)
+            .relative()
             .overflow_hidden()
             .text_color(fg)
             .text_sm()
-            .when(!self.selected && !self.disabled, |this| {
-                this.hover(|this| this.text_color(cx.theme().secondary_foreground))
-            })
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(
                 h_flex()
@@ -222,5 +220,21 @@ impl RenderOnce for Tab {
                     this.on_click(move |event, window, cx| on_click(event, window, cx))
                 })
             })
+            .child(
+                div()
+                    .absolute()
+                    .bottom_0()
+                    .left_0()
+                    .right_0()
+                    .h_0p5()
+                    .when(self.selected && !self.disabled, |this| {
+                        this.bg(cx.theme().element_active)
+                    })
+                    .when(!self.selected && !self.disabled, |this| {
+                        this.invisible().group_hover("", |this| {
+                            this.visible().bg(cx.theme().secondary_background)
+                        })
+                    }),
+            )
     }
 }