diff --git a/crates/story/src/table_story.rs b/crates/story/src/table_story.rs index 1aee2046..fe8cd78a 100644 --- a/crates/story/src/table_story.rs +++ b/crates/story/src/table_story.rs @@ -2,10 +2,11 @@ use std::time::{self, Duration}; use fake::{Fake, Faker}; use gpui::{ - div, AnyElement, IntoElement, ParentElement, Pixels, Render, SharedString, Styled, Timer, View, - ViewContext, VisualContext as _, WindowContext, + div, AnyElement, ClickEvent, IntoElement, ParentElement, Pixels, Render, SharedString, Styled, + Timer, View, ViewContext, VisualContext as _, WindowContext, }; use ui::{ + button::{Button, ButtonStyled}, checkbox::Checkbox, h_flex, indicator::Indicator, @@ -13,7 +14,7 @@ use ui::{ label::Label, prelude::FluentBuilder as _, table::{ColSort, Table, TableDelegate, TableEvent}, - v_flex, Selectable, + v_flex, Selectable, Sizable, Size, }; #[derive(Clone, Debug, Default)] @@ -447,6 +448,7 @@ pub struct TableStory { num_stocks_input: View, stripe: bool, refresh_data: bool, + size: Size, } impl super::Story for TableStory { @@ -529,6 +531,7 @@ impl TableStory { num_stocks_input, stripe: false, refresh_data: false, + size: Size::default(), } } @@ -604,6 +607,20 @@ impl TableStory { }); } + fn toggle_size(&mut self, _: &ClickEvent, cx: &mut ViewContext) { + self.size = match self.size { + Size::XSmall => Size::Small, + Size::Small => Size::Medium, + Size::Medium => Size::Large, + Size::Large => Size::XSmall, + _ => Size::default(), + }; + + self.table.update(cx, |table, cx| { + table.set_size(self.size, cx); + }); + } + fn toggle_refresh_data(&mut self, checked: &bool, cx: &mut ViewContext) { self.refresh_data = *checked; cx.notify(); @@ -672,6 +689,14 @@ impl Render for TableStory { .selected(self.stripe) .on_click(cx.listener(Self::toggle_stripe)), ) + .child( + Button::new("size") + .small() + .compact() + .outline() + .label(format!("size: {:?}", self.size)) + .on_click(cx.listener(Self::toggle_size)), + ) .child( Checkbox::new("refresh-data") .label("Refresh Data") diff --git a/crates/ui/src/table.rs b/crates/ui/src/table.rs index 8bf5cf11..ce94ca21 100644 --- a/crates/ui/src/table.rs +++ b/crates/ui/src/table.rs @@ -4,7 +4,7 @@ use crate::{ h_flex, scroll::{ScrollableAxis, ScrollableMask, Scrollbar, ScrollbarState}, theme::ActiveTheme, - v_flex, Icon, IconName, StyledExt, + v_flex, Icon, IconName, Sizable, Size, StyledExt, }; use gpui::{ actions, canvas, div, prelude::FluentBuilder, px, uniform_list, AppContext, Bounds, Div, @@ -119,6 +119,8 @@ pub struct Table { stripe: bool, /// Set to use border style of the table. border: bool, + /// The cell size of the table. + size: Size, } #[allow(unused)] @@ -248,6 +250,7 @@ where head_content_bounds: Bounds::default(), stripe: false, border: true, + size: Size::default(), }; this.prepare_col_groups(cx); @@ -279,6 +282,12 @@ where self } + /// Set the size to the table. + pub fn set_size(&mut self, size: Size, cx: &mut ViewContext) { + self.size = size; + cx.notify(); + } + fn prepare_col_groups(&mut self, cx: &mut ViewContext) { self.col_groups = (0..self.delegate.cols_count()) .map(|col_ix| ColGroup { @@ -392,10 +401,15 @@ where div() .when_some(col_width, |this, width| this.w(width)) + .flex_shrink_0() .overflow_hidden() .whitespace_nowrap() - .py_1() - .px_2() + .map(|this| match self.size { + Size::XSmall => this.text_sm().py_0().px_1(), + Size::Small => this.text_sm().py_0p5().px_1p5(), + Size::Large => this.py_1p5().px_3(), + _ => this.py_1().px_2(), + }) } /// Show Column selection style, when the column is selected and the selection state is Column. @@ -744,6 +758,15 @@ where } } +impl Sizable for Table +where + D: TableDelegate, +{ + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} impl FocusableView for Table where D: TableDelegate, @@ -909,7 +932,8 @@ where }) .children((0..cols_count).map(|col_ix| { table - // Make the row scroll sync with the horizontal_scroll_handle to support horizontal scrolling. + // Make the row scroll sync with the + // horizontal_scroll_handle to support horizontal scrolling. .col_wrap(col_ix, cx) .left( horizontal_scroll_handle @@ -919,7 +943,6 @@ where .child( table .render_cell(col_ix, cx) - .flex_shrink_0() .child( table .delegate @@ -975,10 +998,7 @@ where .x, ) .child( - table - .render_cell(col_ix, cx) - .flex_shrink_0() - .child(div().size_full()), + table.render_cell(col_ix, cx), ) })) .child(last_empty_col(cx))