diff --git a/crates/app/src/views/chat/message.rs b/crates/app/src/views/chat/message.rs index d48de6d..f20ca9d 100644 --- a/crates/app/src/views/chat/message.rs +++ b/crates/app/src/views/chat/message.rs @@ -1,6 +1,6 @@ use crate::states::chat::room::Member; use gpui::{ - div, img, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, Styled, + div, img, px, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, Styled, WindowContext, }; use ui::{ @@ -38,16 +38,25 @@ impl Message { impl RenderOnce for Message { fn render(self, cx: &mut WindowContext) -> impl IntoElement { div() + .group(&self.ago) + .relative() .flex() .gap_3() .w_full() .p_2() - .border_l_2() - .border_color(cx.theme().background) - .hover(|this| { - this.bg(cx.theme().accent.step(cx, ColorScaleStep::ONE)) - .border_color(cx.theme().accent.step(cx, ColorScaleStep::NINE)) - }) + .hover(|this| this.bg(cx.theme().accent.step(cx, ColorScaleStep::ONE))) + .child( + div() + .absolute() + .left_0() + .top_0() + .w(px(2.)) + .h_full() + .bg(cx.theme().transparent) + .group_hover(&self.ago, |this| { + this.bg(cx.theme().accent.step(cx, ColorScaleStep::NINE)) + }), + ) .child( img(self.member.avatar()) .size_8() diff --git a/crates/ui/src/divider.rs b/crates/ui/src/divider.rs index 2f82849..3eefedd 100644 --- a/crates/ui/src/divider.rs +++ b/crates/ui/src/divider.rs @@ -59,9 +59,10 @@ impl RenderOnce for Divider { .child( div() .absolute() + .rounded_full() .map(|this| match self.axis { - Axis::Vertical => this.w(px(1.)).h_full(), - Axis::Horizontal => this.h(px(1.)).w_full(), + Axis::Vertical => this.w(px(2.)).h_full(), + Axis::Horizontal => this.h(px(2.)).w_full(), }) .bg(self .color diff --git a/crates/ui/src/dock_area/dock.rs b/crates/ui/src/dock_area/dock.rs index f46ff84..35fef4b 100644 --- a/crates/ui/src/dock_area/dock.rs +++ b/crates/ui/src/dock_area/dock.rs @@ -254,15 +254,15 @@ impl Dock { .right(px(1.)) .h_full() .w(HANDLE_SIZE) - .pl(HANDLE_PADDING) + .py_10() }) .when(self.placement.is_right(), |this| { this.cursor_col_resize() .top_0() - .left(neg_offset) + .left(px(1.)) .h_full() .w(HANDLE_SIZE) - .px(HANDLE_PADDING) + .py_10() }) .when(self.placement.is_bottom(), |this| { this.cursor_row_resize() @@ -274,6 +274,7 @@ impl Dock { }) .child( div() + .rounded_full() .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::SIX))) .when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE)) .when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE)), diff --git a/crates/ui/src/dock_area/mod.rs b/crates/ui/src/dock_area/mod.rs index 6e60355..f436f3f 100644 --- a/crates/ui/src/dock_area/mod.rs +++ b/crates/ui/src/dock_area/mod.rs @@ -111,6 +111,7 @@ impl DockItem { cx: &mut WindowContext, ) -> Self { let mut items = items; + let stack_panel = cx.new_view(|cx| { let mut stack_panel = StackPanel::new(axis, cx); for (i, item) in items.iter_mut().enumerate() { @@ -623,7 +624,6 @@ impl DockArea { } /// Subscribe event on the panels - #[allow(clippy::only_used_in_recursion)] fn subscribe_item(&mut self, item: &DockItem, cx: &mut ViewContext) { match item { DockItem::Split { items, view, .. } => { @@ -744,7 +744,9 @@ impl DockArea { .map(|view| view.entity_id()); } } + impl EventEmitter for DockArea {} + impl Render for DockArea { fn render(&mut self, cx: &mut ViewContext) -> impl IntoElement { let view = cx.view().clone(); diff --git a/crates/ui/src/dock_area/tab_panel.rs b/crates/ui/src/dock_area/tab_panel.rs index 1cb0cb4..4fef5cd 100644 --- a/crates/ui/src/dock_area/tab_panel.rs +++ b/crates/ui/src/dock_area/tab_panel.rs @@ -59,9 +59,9 @@ impl Render for DragPanel { .whitespace_nowrap() .rounded(px(cx.theme().radius)) .text_xs() - .border_1() - .border_color(cx.theme().base.step(cx, ColorScaleStep::SIX)) - .bg(cx.theme().base.step(cx, ColorScaleStep::TWO)) + .shadow_lg() + .bg(cx.theme().background) + .text_color(cx.theme().accent.step(cx, ColorScaleStep::TWELVE)) .child(self.panel.title(cx)) } } @@ -471,7 +471,6 @@ impl TabPanel { }; let panel_style = dock_area.read(cx).panel_style; - let left_dock_button = self.render_dock_toggle_button(DockPlacement::Left, cx); let bottom_dock_button = self.render_dock_toggle_button(DockPlacement::Bottom, cx); let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, cx); @@ -681,11 +680,7 @@ impl TabPanel { .size_full() .rounded_lg() .shadow_sm() - .border_1() - .border_color(cx.theme().background) - .when(cx.theme().appearance.is_dark(), |this| { - this.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)) - }) + .when(cx.theme().appearance.is_dark(), |this| this.shadow_lg()) .bg(cx.theme().background) .overflow_hidden() .child(panel.view()), @@ -696,7 +691,20 @@ impl TabPanel { div() .invisible() .absolute() - .bg(cx.theme().base.step(cx, ColorScaleStep::THREE)) + .p_1() + .child( + div() + .rounded_lg() + .border_1() + .border_color( + cx.theme().accent.step(cx, ColorScaleStep::FOUR), + ) + .bg(cx + .theme() + .accent + .step_alpha(cx, ColorScaleStep::THREE)) + .size_full(), + ) .map(|this| match self.will_split_placement { Some(placement) => { let size = DefiniteLength::Fraction(0.35); diff --git a/crates/ui/src/resizable/resize_handle.rs b/crates/ui/src/resizable/resize_handle.rs index a28450e..56ff00b 100644 --- a/crates/ui/src/resizable/resize_handle.rs +++ b/crates/ui/src/resizable/resize_handle.rs @@ -8,8 +8,8 @@ use gpui::{ WindowContext, }; -pub(crate) const HANDLE_PADDING: Pixels = px(4.); -pub(crate) const HANDLE_SIZE: Pixels = px(1.); +pub(crate) const HANDLE_PADDING: Pixels = px(8.); +pub(crate) const HANDLE_SIZE: Pixels = px(2.); #[derive(IntoElement)] pub(crate) struct ResizeHandle { @@ -41,8 +41,6 @@ impl StatefulInteractiveElement for ResizeHandle {} impl RenderOnce for ResizeHandle { fn render(self, cx: &mut WindowContext) -> impl IntoElement { - let neg_offset = -HANDLE_PADDING; - self.base .occlude() .absolute() @@ -50,22 +48,23 @@ impl RenderOnce for ResizeHandle { .when(self.axis.is_horizontal(), |this| { this.cursor_col_resize() .top_0() - .left(neg_offset) - .h_full() + .left(px(-1.)) .w(HANDLE_SIZE) - .px(HANDLE_PADDING) + .h_full() + .py_10() }) .when(self.axis.is_vertical(), |this| { this.cursor_row_resize() - .top(neg_offset) + .top(px(-1.)) .left_0() .w_full() .h(HANDLE_SIZE) - .py(HANDLE_PADDING) + .px_10() }) .child( div() - .bg(cx.theme().base.step(cx, ColorScaleStep::FIVE)) + .rounded_full() + .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::SIX))) .when(self.axis.is_horizontal(), |this| { this.h_full().w(HANDLE_SIZE) }) diff --git a/crates/ui/src/tab/mod.rs b/crates/ui/src/tab/mod.rs index 71e5616..1f966c5 100644 --- a/crates/ui/src/tab/mod.rs +++ b/crates/ui/src/tab/mod.rs @@ -86,25 +86,25 @@ impl RenderOnce for Tab { fn render(self, cx: &mut WindowContext) -> impl IntoElement { let (text_color, bg_color, hover_bg_color) = match (self.selected, self.disabled) { (true, false) => ( - cx.theme().accent.step(cx, ColorScaleStep::TWELVE), - cx.theme().accent.step(cx, ColorScaleStep::THREE), - cx.theme().accent.step(cx, ColorScaleStep::FOUR), + cx.theme().base.step(cx, ColorScaleStep::TWELVE), + cx.theme().base.step(cx, ColorScaleStep::THREE), + cx.theme().base.step(cx, ColorScaleStep::FOUR), ), (false, false) => ( cx.theme().base.step(cx, ColorScaleStep::ELEVEN), cx.theme().base.step(cx, ColorScaleStep::ONE), - cx.theme().base.step(cx, ColorScaleStep::TWO), + cx.theme().base.step(cx, ColorScaleStep::FOUR), ), // disabled (true, true) => ( cx.theme().base.step(cx, ColorScaleStep::ELEVEN), cx.theme().base.step(cx, ColorScaleStep::ONE), - cx.theme().base.step(cx, ColorScaleStep::TWO), + cx.theme().base.step(cx, ColorScaleStep::FOUR), ), (false, true) => ( cx.theme().base.step(cx, ColorScaleStep::ELEVEN), cx.theme().base.step(cx, ColorScaleStep::ONE), - cx.theme().base.step(cx, ColorScaleStep::TWO), + cx.theme().base.step(cx, ColorScaleStep::FOUR), ), };