dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tile: Add to support setup tiles background color, tile_shadow, tile_grid_size. (#631)

Browse source
This commit is contained in:
Jason Lee 2025-02-17 10:49:26 +08:00 committed by GitHub
parent e4c31f1ce4
commit d446c0e7b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 38 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
crates/ui/src/dock/tiles.rs
View file

@ -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<Pixels> = 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<Pixels>) -> Point<Pixels> {
Point::new(round_to_nearest_ten(point.x), round_to_nearest_ten(point.y))
fn round_point_to_nearest_ten(point: Point<Pixels>, cx: &App) -> Point<Pixels> {
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")

11
crates/ui/src/theme.rs
View file

@ -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<ThemeColor> for Theme {
radius: px(4.),
shadow: true,
scrollbar_show: ScrollbarShow::default(),
tile_grid_size: px(4.),
tile_shadow: true,
colors,
}
}