diff --git a/crates/ui/src/dock/tiles.rs b/crates/ui/src/dock/tiles.rs index 60734a37..055f430b 100644 --- a/crates/ui/src/dock/tiles.rs +++ b/crates/ui/src/dock/tiles.rs @@ -14,19 +14,18 @@ use crate::{ use super::{DockArea, Panel, PanelEvent, PanelInfo, PanelState, PanelView, TabPanel, TileMeta}; use gpui::{ - actions, canvas, div, point, px, size, AnyElement, App, AppContext, Bounds, Context, - DismissEvent, DragMoveEvent, Empty, EntityId, EventEmitter, FocusHandle, Focusable, Half, - InteractiveElement, IntoElement, MouseButton, MouseDownEvent, MouseUpEvent, ParentElement, - Pixels, Point, Render, ScrollHandle, Size, StatefulInteractiveElement, Styled, WeakEntity, - Window, + actions, canvas, div, point, prelude::FluentBuilder as _, px, size, AnyElement, App, + AppContext, Bounds, Context, DismissEvent, DragMoveEvent, Empty, EntityId, EventEmitter, + FocusHandle, Focusable, Half, InteractiveElement, IntoElement, MouseButton, MouseDownEvent, + MouseUpEvent, ParentElement, Pixels, Point, Render, ScrollHandle, Size, + StatefulInteractiveElement, Styled, WeakEntity, Window, }; actions!(tiles, [Undo, Redo,]); const MINIMUM_SIZE: Size = size(px(100.), px(100.)); const DRAG_BAR_HEIGHT: Pixels = px(30.); -const HANDLE_SIZE: Pixels = px(20.0); -const GRID_ALIGNMENT: Pixels = px(10.0); +const HANDLE_SIZE: Pixels = px(12.0); #[derive(Clone, PartialEq, Debug)] struct TileChange { @@ -241,7 +240,7 @@ impl Tiles { new_origin.y = px(0.); } - let final_origin = round_point_to_nearest_ten(new_origin); + let final_origin = round_point_to_nearest_ten(new_origin, cx); // Only push to history if bounds have changed if final_origin != previous_bounds.origin { item.bounds.origin = final_origin; @@ -279,7 +278,7 @@ impl Tiles { if let Some(index) = self.resizing_index { if let Some(item) = self.panels.get_mut(index) { let previous_bounds = item.bounds; - let final_width = round_to_nearest_ten(new_width); + let final_width = round_to_nearest_ten(new_width, cx); // Only push to history if width has changed if final_width != item.bounds.size.width { @@ -307,7 +306,7 @@ impl Tiles { if let Some(index) = self.resizing_index { if let Some(item) = self.panels.get_mut(index) { let previous_bounds = item.bounds; - let final_height = round_to_nearest_ten(new_height); + let final_height = round_to_nearest_ten(new_height, cx); // Only push to history if height has changed if final_height != item.bounds.size.height { @@ -607,15 +606,15 @@ impl Tiles { .id("corner-resize-handle") .cursor_nwse_resize() .absolute() - .right(-HANDLE_SIZE.half()) - .bottom(-HANDLE_SIZE.half()) - .w(HANDLE_SIZE) - .h(HANDLE_SIZE) + .right(px(3.)) + .bottom(px(3.)) + .size_3() .child( Icon::new(IconName::ResizeCorner) - .size(HANDLE_SIZE.half()) - .text_color(cx.theme().foreground.opacity(0.3)), + .size_3() + .text_color(cx.theme().muted_foreground.opacity(0.5)), ) + .rounded(cx.theme().radius) .on_mouse_down( MouseButton::Left, cx.listener({ @@ -759,13 +758,10 @@ impl Tiles { .top(item.bounds.origin.y - px(1.)) .w(item.bounds.size.width + px(1.)) .h(item.bounds.size.height + px(1.)) - .child( - h_flex() - .w_full() - .h_full() - .overflow_hidden() - .child(panel_view), - ) + .overflow_hidden() + .rounded(cx.theme().radius) + .when(cx.theme().tile_shadow, |this| this.shadow_md()) + .child(h_flex().size_full().child(panel_view)) .children(self.render_resize_handles(window, cx, entity_id, &item, &is_occluded)) .child(self.render_drag_bar(window, cx, entity_id, &item, &is_occluded)) } @@ -832,13 +828,16 @@ impl Tiles { } #[inline] -fn round_to_nearest_ten(value: Pixels) -> Pixels { - (value / GRID_ALIGNMENT).round() * GRID_ALIGNMENT +fn round_to_nearest_ten(value: Pixels, cx: &App) -> Pixels { + (value / cx.theme().tile_grid_size).round() * cx.theme().tile_grid_size } #[inline] -fn round_point_to_nearest_ten(point: Point) -> Point { - Point::new(round_to_nearest_ten(point.x), round_to_nearest_ten(point.y)) +fn round_point_to_nearest_ten(point: Point, cx: &App) -> Point { + Point::new( + round_to_nearest_ten(point.x, cx), + round_to_nearest_ten(point.y, cx), + ) } impl Focusable for Tiles { @@ -870,7 +869,7 @@ impl Render for Tiles { div() .relative() - .bg(cx.theme().background) + .bg(cx.theme().tiles) .child( div() .id("tiles") diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index a8984349..6bcdfbec 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -197,6 +197,8 @@ pub struct ThemeColor { pub title_bar: Hsla, /// TitleBar border color. pub title_bar_border: Hsla, + /// Background color for Tiles. + pub tiles: Hsla, /// Window border color. /// /// # Platform specific: @@ -278,6 +280,7 @@ impl ThemeColor { table_row_border: hsl(240.0, 7.7, 94.5), title_bar: hsl(0.0, 0.0, 100.), title_bar_border: hsl(240.0, 5.9, 90.0), + tiles: hsl(0.0, 0.0, 95.), window_border: hsl(240.0, 5.9, 78.0), } } @@ -354,6 +357,7 @@ impl ThemeColor { table_row_border: hsl(240.0, 3.7, 16.9).opacity(0.5), title_bar: hsl(0., 0., 9.7), title_bar_border: hsl(240.0, 3.7, 15.9), + tiles: hsl(0.0, 0.0, 5.0), window_border: hsl(240.0, 3.7, 28.0), } } @@ -371,6 +375,10 @@ pub struct Theme { pub transparent: Hsla, /// Show the scrollbar mode, default: Scrolling pub scrollbar_show: ScrollbarShow, + /// Tile grid size, default is 4px. + pub tile_grid_size: Pixels, + /// The shadow of the tile panel. + pub tile_shadow: bool, } impl Deref for Theme { @@ -474,6 +482,7 @@ impl Theme { self.sidebar_foreground = self.sidebar_foreground.apply(mask_color); self.sidebar_primary = self.sidebar_primary.apply(mask_color); self.sidebar_primary_foreground = self.sidebar_primary_foreground.apply(mask_color); + self.tiles = self.tiles.apply(mask_color); } /// Sync the theme with the system appearance @@ -535,6 +544,8 @@ impl From for Theme { radius: px(4.), shadow: true, scrollbar_show: ScrollbarShow::default(), + tile_grid_size: px(4.), + tile_shadow: true, colors, } }