diff --git a/crates/story/src/date_picker_story.rs b/crates/story/src/date_picker_story.rs index 63a02770..80a95467 100644 --- a/crates/story/src/date_picker_story.rs +++ b/crates/story/src/date_picker_story.rs @@ -19,7 +19,6 @@ pub struct DatePickerStory { date_picker_value: Option, date_range_picker: Entity, default_range_mode_picker: Entity, - _subscriptions: Vec, } @@ -175,33 +174,29 @@ impl Render for DatePickerStory { v_flex() .gap_3() .child( - section("Normal").max_w_md().child( + section("Normal").max_w_128().child( DatePicker::new(&self.date_picker) .cleanable() .presets(presets), ), ) .child( - section("Small with 180px width").max_w_md().child( - DatePicker::new(&self.date_picker_small) - .small() - .width(px(180.)), - ), + section("Small with 180px width") + .max_w_128() + .child(DatePicker::new(&self.date_picker_small).small().w(px(180.))), ) .child( - section("Large").max_w_md().child( - DatePicker::new(&self.date_picker_large) - .large() - .width(px(300.)), - ), + section("Large") + .max_w_128() + .child(DatePicker::new(&self.date_picker_large).large().w(px(300.))), ) .child( section("Custom (First 5 days of each month disabled)") - .max_w_md() + .max_w_128() .child(DatePicker::new(&self.data_picker_custom)), ) .child( - section("Date Range").max_w_md().child( + section("Date Range").max_w_128().child( DatePicker::new(&self.date_range_picker) .number_of_months(2) .cleanable() @@ -209,7 +204,7 @@ impl Render for DatePickerStory { ), ) .child( - section("Default Range Mode").max_w_md().child( + section("Default Range Mode").max_w_128().child( DatePicker::new(&self.default_range_mode_picker) .placeholder("Range mode picker") .cleanable() @@ -217,7 +212,7 @@ impl Render for DatePickerStory { ), ) .child( - section("Date Picker Value").max_w_md().child( + section("Date Picker Value").max_w_128().child( format!("Date picker value: {:?}", self.date_picker_value).into_element(), ), ) diff --git a/crates/story/src/dropdown_story.rs b/crates/story/src/dropdown_story.rs index 91781b55..f4d5aa54 100644 --- a/crates/story/src/dropdown_story.rs +++ b/crates/story/src/dropdown_story.rs @@ -236,7 +236,7 @@ impl Render for DropdownStory { Dropdown::new(&self.fruit_dropdown) .disabled(self.disabled) .icon(IconName::Search) - .width(px(320.)) + .w(px(320.)) .menu_width(px(400.)), ), ) diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs index ec368cf4..45bd997f 100644 --- a/crates/ui/src/dropdown.rs +++ b/crates/ui/src/dropdown.rs @@ -2,8 +2,8 @@ use gpui::{ anchored, canvas, deferred, div, prelude::FluentBuilder, px, rems, AnyElement, App, AppContext, Bounds, ClickEvent, Context, DismissEvent, ElementId, Empty, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement, KeyBinding, Length, ParentElement, Pixels, Render, - RenderOnce, SharedString, StatefulInteractiveElement, Styled, Subscription, Task, WeakEntity, - Window, + RenderOnce, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Subscription, + Task, WeakEntity, Window, }; use rust_i18n::t; @@ -254,6 +254,7 @@ pub struct DropdownState { #[derive(IntoElement)] pub struct Dropdown { id: ElementId, + style: StyleRefinement, state: Entity>, size: Size, icon: Option, @@ -261,7 +262,6 @@ pub struct Dropdown { placeholder: Option, title_prefix: Option, empty: Option, - width: Length, menu_width: Length, disabled: bool, } @@ -523,6 +523,7 @@ where pub fn new(state: &Entity>) -> Self { Self { id: ("dropdown", state.entity_id()).into(), + style: StyleRefinement::default(), state: state.clone(), placeholder: None, size: Size::Medium, @@ -530,18 +531,11 @@ where cleanable: false, title_prefix: None, empty: None, - width: Length::Auto, menu_width: Length::Auto, disabled: false, } } - /// Set the width of the dropdown input, default: Length::Auto - pub fn width(mut self, width: impl Into) -> Self { - self.width = width.into(); - self - } - /// Set the width of the dropdown menu, default: Length::Auto pub fn menu_width(mut self, width: impl Into) -> Self { self.menu_width = width.into(); @@ -668,6 +662,15 @@ where } } +impl Styled for Dropdown +where + D: DropdownDelegate, +{ + fn style(&mut self) -> &mut StyleRefinement { + &mut self.style + } +} + impl RenderOnce for Dropdown where D: DropdownDelegate + 'static, @@ -704,7 +707,6 @@ where .on_action(window.listener_for(&self.state, DropdownState::escape)) .size_full() .relative() - .input_text_size(self.size) .child( div() .id(ElementId::Name(format!("{}-input", self.id).into())) @@ -720,23 +722,24 @@ where .map(|this| if self.disabled { this } else { this }) .overflow_hidden() .input_text_size(self.size) - .map(|this| match self.width { - Length::Definite(l) => this.flex_none().w(l), - Length::Auto => this.w_full(), - }) + .flex_none() + .w_full() .when(outline_visible, |this| this.focused_border(cx)) .input_size(self.size) + .refine_style(&self.style) .when(allow_open, |this| { this.on_click(window.listener_for(&self.state, DropdownState::toggle_menu)) }) .child( h_flex() + .id("inner") .w_full() .items_center() .justify_between() .gap_1() .child( div() + .id("title") .w_full() .overflow_hidden() .whitespace_nowrap() diff --git a/crates/ui/src/time/calendar.rs b/crates/ui/src/time/calendar.rs index 57255720..72101d94 100644 --- a/crates/ui/src/time/calendar.rs +++ b/crates/ui/src/time/calendar.rs @@ -4,13 +4,14 @@ use chrono::{Datelike, Local, NaiveDate}; use gpui::{ prelude::FluentBuilder as _, px, relative, App, ClickEvent, Context, ElementId, Empty, Entity, EventEmitter, FocusHandle, InteractiveElement, IntoElement, ParentElement, Render, RenderOnce, - SharedString, StatefulInteractiveElement, Styled, Window, + SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Window, }; use rust_i18n::t; use crate::{ button::{Button, ButtonVariants as _}, h_flex, v_flex, ActiveTheme, Disableable as _, IconName, Selectable, Sizable, Size, + StyledExt as _, }; use super::utils::days_in_month; @@ -245,6 +246,15 @@ impl Matcher { } } +#[derive(IntoElement)] +pub struct Calendar { + size: Size, + state: Entity, + style: StyleRefinement, + /// Number of the months view to show. + number_of_months: usize, +} + /// Use to store the state of the calendar. pub struct CalendarState { focus_handle: FocusHandle, @@ -260,15 +270,6 @@ pub struct CalendarState { disabled: Option, } -#[derive(IntoElement)] -pub struct Calendar { - size: Size, - state: Entity, - bordered: bool, - /// Number of the months view to show. - number_of_months: usize, -} - impl CalendarState { pub fn new(_: &mut Window, cx: &mut Context) -> Self { let today = Local::now().naive_local().date(); @@ -498,7 +499,7 @@ impl Calendar { Self { size: Size::default(), state: state.clone(), - bordered: true, + style: StyleRefinement::default(), number_of_months: 1, } } @@ -509,12 +510,6 @@ impl Calendar { self } - /// Set bordered, default: `true`. - pub fn bordered(mut self, bordered: bool) -> Self { - self.bordered = bordered; - self - } - fn render_day( &self, d: &NaiveDate, @@ -907,6 +902,13 @@ impl Sizable for Calendar { self } } + +impl Styled for Calendar { + fn style(&mut self) -> &mut StyleRefinement { + &mut self.style + } +} + impl EventEmitter for CalendarState {} impl RenderOnce for Calendar { fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement { @@ -917,10 +919,12 @@ impl RenderOnce for Calendar { v_flex() .track_focus(&self.state.read(cx).focus_handle) - .when(self.bordered, |this| { - this.border_1().border_color(cx.theme().border).p_3() - }) + .border_1() + .border_color(cx.theme().border) + .rounded(cx.theme().radius_lg) + .p_3() .gap_0p5() + .refine_style(&self.style) .child(self.render_header(window, cx)) .child( v_flex() diff --git a/crates/ui/src/time/date_picker.rs b/crates/ui/src/time/date_picker.rs index c39ca96b..d11a20c5 100644 --- a/crates/ui/src/time/date_picker.rs +++ b/crates/ui/src/time/date_picker.rs @@ -2,8 +2,8 @@ use chrono::NaiveDate; use gpui::{ anchored, deferred, div, prelude::FluentBuilder as _, px, App, AppContext, Context, ElementId, Empty, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement as _, IntoElement, - KeyBinding, Length, MouseButton, ParentElement as _, Render, RenderOnce, SharedString, - StatefulInteractiveElement as _, Styled, Subscription, Window, + KeyBinding, MouseButton, ParentElement as _, Render, RenderOnce, SharedString, + StatefulInteractiveElement as _, StyleRefinement, Styled, Subscription, Window, }; use rust_i18n::t; @@ -231,11 +231,11 @@ impl DatePickerState { #[derive(IntoElement)] pub struct DatePicker { id: ElementId, + style: StyleRefinement, state: Entity, cleanable: bool, placeholder: Option, size: Size, - width: Length, number_of_months: usize, presets: Option>, } @@ -252,6 +252,12 @@ impl Focusable for DatePicker { } } +impl Styled for DatePicker { + fn style(&mut self) -> &mut StyleRefinement { + &mut self.style + } +} + impl Render for DatePickerState { fn render(&mut self, _: &mut Window, _: &mut Context) -> impl gpui::IntoElement { Empty @@ -266,7 +272,7 @@ impl DatePicker { cleanable: true, placeholder: None, size: Size::default(), - width: Length::Auto, + style: StyleRefinement::default(), number_of_months: 2, presets: None, } @@ -284,12 +290,6 @@ impl DatePicker { self } - /// Set width of the date picker input field, default is `Length::Auto`. - pub fn width(mut self, width: impl Into) -> Self { - self.width = width.into(); - self - } - /// Set preset ranges for the date picker. pub fn presets(mut self, presets: Vec) -> Self { self.presets = Some(presets); @@ -325,13 +325,11 @@ impl RenderOnce for DatePicker { .when(state.open, |this| { this.on_action(window.listener_for(&self.state, DatePickerState::escape)) }) + .flex_none() .w_full() .relative() - .map(|this| match self.width { - Length::Definite(l) => this.flex_none().w(l), - Length::Auto => this.w_full(), - }) .input_text_size(self.size) + .refine_style(&self.style) .child( div() .id("date-picker-input") @@ -423,7 +421,8 @@ impl RenderOnce for DatePicker { .child( Calendar::new(&state.calendar) .number_of_months(self.number_of_months) - .bordered(false) + .border_0() + .rounded_none() .with_size(self.size), ), ),