table: Add size to Table to support Large, Medium(default), Small, XSmall. (#283)
Closes #219
This commit is contained in:
Jason Lee
GitHub
parent
c5b4505560
commit
69e94cce1c
2 changed files with 57 additions and 12 deletions
|
|
@ -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<TextInput>,
|
||||
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>) {
|
||||
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>) {
|
||||
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")
|
||||
|
|
|
|||
|
|
@ -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<D: TableDelegate> {
|
|||
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>) {
|
||||
self.size = size;
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
fn prepare_col_groups(&mut self, cx: &mut ViewContext<Self>) {
|
||||
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<D> Sizable for Table<D>
|
||||
where
|
||||
D: TableDelegate,
|
||||
{
|
||||
fn with_size(mut self, size: impl Into<Size>) -> Self {
|
||||
self.size = size.into();
|
||||
self
|
||||
}
|
||||
}
|
||||
impl<D> FocusableView for Table<D>
|
||||
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))
|
||||
|
|
|
|||
Loading…
Reference in a new issue