From 4130ae4be95ce850263fbc55f490b68a95361d58 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 4 Mar 2024 19:31:26 +0100 Subject: Simplify theming for `Text` widget --- widget/src/checkbox.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index 0ff4d58b..3a192fba 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -39,7 +39,7 @@ pub struct Checkbox< Theme = crate::Theme, Renderer = crate::Renderer, > where - Theme: StyleSheet + crate::text::StyleSheet, + Theme: StyleSheet, Renderer: text::Renderer, { is_checked: bool, -- cgit From 1f0a0c235a7729cf2d5716efeecb9c4dc972fdfa Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 5 Mar 2024 02:08:19 +0100 Subject: Simplify theming for `Checkbox` widget --- widget/src/checkbox.rs | 212 ++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 191 insertions(+), 21 deletions(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index 3a192fba..54513b7d 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -9,10 +9,11 @@ use crate::core::touch; use crate::core::widget; use crate::core::widget::tree::{self, Tree}; use crate::core::{ - Clipboard, Element, Layout, Length, Pixels, Rectangle, Shell, Size, Widget, + Background, Border, Clipboard, Color, Element, Layout, Length, Pixels, + Rectangle, Shell, Size, Widget, }; - -pub use crate::style::checkbox::{Appearance, StyleSheet}; +use crate::style::theme::palette; +use crate::style::Theme; /// A box that can be checked. /// @@ -39,7 +40,6 @@ pub struct Checkbox< Theme = crate::Theme, Renderer = crate::Renderer, > where - Theme: StyleSheet, Renderer: text::Renderer, { is_checked: bool, @@ -53,13 +53,13 @@ pub struct Checkbox< text_shaping: text::Shaping, font: Option, icon: Icon, - style: ::Style, + style: fn(&Theme, Status) -> Appearance, } impl<'a, Message, Theme, Renderer> Checkbox<'a, Message, Theme, Renderer> where Renderer: text::Renderer, - Theme: StyleSheet + crate::text::StyleSheet, + Theme: Style, { /// The default size of a [`Checkbox`]. const DEFAULT_SIZE: f32 = 20.0; @@ -91,7 +91,7 @@ where line_height: text::LineHeight::default(), shaping: text::Shaping::Basic, }, - style: Default::default(), + style: Theme::default(), } } @@ -174,10 +174,7 @@ where } /// Sets the style of the [`Checkbox`]. - pub fn style( - mut self, - style: impl Into<::Style>, - ) -> Self { + pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self { self.style = style.into(); self } @@ -186,7 +183,6 @@ where impl<'a, Message, Theme, Renderer> Widget for Checkbox<'a, Message, Theme, Renderer> where - Theme: StyleSheet + crate::text::StyleSheet, Renderer: text::Renderer, { fn tag(&self) -> tree::Tag { @@ -293,17 +289,20 @@ where ) { let is_mouse_over = cursor.is_over(layout.bounds()); let is_disabled = self.on_toggle.is_none(); + let is_checked = self.is_checked; let mut children = layout.children(); - let custom_style = if is_disabled { - theme.disabled(&self.style, self.is_checked) + let status = if is_disabled { + Status::Disabled { is_checked } } else if is_mouse_over { - theme.hovered(&self.style, self.is_checked) + Status::Hovered { is_checked } } else { - theme.active(&self.style, self.is_checked) + Status::Active { is_checked } }; + let appearance = (self.style)(theme, status); + { let layout = children.next().unwrap(); let bounds = layout.bounds(); @@ -311,10 +310,10 @@ where renderer.fill_quad( renderer::Quad { bounds, - border: custom_style.border, + border: appearance.border, ..renderer::Quad::default() }, - custom_style.background, + appearance.background, ); let Icon { @@ -339,7 +338,7 @@ where shaping: *shaping, }, bounds.center(), - custom_style.icon_color, + appearance.icon_color, *viewport, ); } @@ -354,7 +353,7 @@ where label_layout, tree.state.downcast_ref(), crate::text::Appearance { - color: custom_style.text_color, + color: appearance.text_color, }, viewport, ); @@ -366,7 +365,7 @@ impl<'a, Message, Theme, Renderer> From> for Element<'a, Message, Theme, Renderer> where Message: 'a, - Theme: 'a + StyleSheet + crate::text::StyleSheet, + Theme: 'a, Renderer: 'a + text::Renderer, { fn from( @@ -390,3 +389,174 @@ pub struct Icon { /// The shaping strategy of the icon. pub shaping: text::Shaping, } + +/// The possible status of a [`Checkbox`]. +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub enum Status { + /// The [`Checkbox`] can be interacted with. + Active { + /// Indicates if the [`Checkbox`] is currently checked. + is_checked: bool, + }, + /// The [`Checkbox`] can be interacted with and it is being hovered. + Hovered { + /// Indicates if the [`Checkbox`] is currently checked. + is_checked: bool, + }, + /// The [`Checkbox`] cannot be interacted with. + Disabled { + /// Indicates if the [`Checkbox`] is currently checked. + is_checked: bool, + }, +} + +/// The appearance of a checkbox. +#[derive(Debug, Clone, Copy)] +pub struct Appearance { + /// The [`Background`] of the checkbox. + pub background: Background, + /// The icon [`Color`] of the checkbox. + pub icon_color: Color, + /// The [`Border`] of hte checkbox. + pub border: Border, + /// The text [`Color`] of the checkbox. + pub text_color: Option, +} + +/// A set of rules that dictate the style of a checkbox. +pub trait Style { + /// The supported style of the [`StyleSheet`]. + fn default() -> fn(&Self, Status) -> Appearance; +} + +impl Style for Theme { + fn default() -> fn(&Self, Status) -> Appearance { + primary + } +} + +/// A primary checkbox; denoting a main toggle. +pub fn primary(theme: &Theme, status: Status) -> Appearance { + let palette = theme.extended_palette(); + + match status { + Status::Active { is_checked } => styled( + palette.primary.strong.text, + palette.background.base, + palette.primary.strong, + is_checked, + ), + Status::Hovered { is_checked } => styled( + palette.primary.strong.text, + palette.background.weak, + palette.primary.base, + is_checked, + ), + Status::Disabled { is_checked } => styled( + palette.primary.strong.text, + palette.background.weak, + palette.background.strong, + is_checked, + ), + } +} + +/// A secondary checkbox; denoting a complementary toggle. +pub fn secondary(theme: &Theme, status: Status) -> Appearance { + let palette = theme.extended_palette(); + + match status { + Status::Active { is_checked } => styled( + palette.background.base.text, + palette.background.base, + palette.background.strong, + is_checked, + ), + Status::Hovered { is_checked } => styled( + palette.background.base.text, + palette.background.weak, + palette.background.strong, + is_checked, + ), + Status::Disabled { is_checked } => styled( + palette.background.strong.color, + palette.background.weak, + palette.background.weak, + is_checked, + ), + } +} + +/// A success checkbox; denoting a positive toggle. +pub fn success(theme: &Theme, status: Status) -> Appearance { + let palette = theme.extended_palette(); + + match status { + Status::Active { is_checked } => styled( + palette.success.base.text, + palette.background.base, + palette.success.base, + is_checked, + ), + Status::Hovered { is_checked } => styled( + palette.success.base.text, + palette.background.weak, + palette.success.base, + is_checked, + ), + Status::Disabled { is_checked } => styled( + palette.success.base.text, + palette.background.weak, + palette.success.weak, + is_checked, + ), + } +} + +/// A danger checkbox; denoting a negaive toggle. +pub fn danger(theme: &Theme, status: Status) -> Appearance { + let palette = theme.extended_palette(); + + match status { + Status::Active { is_checked } => styled( + palette.danger.base.text, + palette.background.base, + palette.danger.base, + is_checked, + ), + Status::Hovered { is_checked } => styled( + palette.danger.base.text, + palette.background.weak, + palette.danger.base, + is_checked, + ), + Status::Disabled { is_checked } => styled( + palette.danger.base.text, + palette.background.weak, + palette.danger.weak, + is_checked, + ), + } +} + +fn styled( + icon_color: Color, + base: palette::Pair, + accent: palette::Pair, + is_checked: bool, +) -> Appearance { + Appearance { + background: Background::Color(if is_checked { + accent.color + } else { + base.color + }), + icon_color, + border: Border { + radius: 2.0.into(), + width: 1.0, + color: accent.color, + }, + text_color: None, + } +} -- cgit From 87d16a090b14fa206bb87041a32d66348bc294e4 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 5 Mar 2024 22:03:10 +0100 Subject: Reduce default size of `checkbox` to `15.0` --- widget/src/checkbox.rs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index 54513b7d..91838291 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -62,7 +62,7 @@ where Theme: Style, { /// The default size of a [`Checkbox`]. - const DEFAULT_SIZE: f32 = 20.0; + const DEFAULT_SIZE: f32 = 15.0; /// The default spacing of a [`Checkbox`]. const DEFAULT_SPACING: f32 = 10.0; @@ -91,7 +91,7 @@ where line_height: text::LineHeight::default(), shaping: text::Shaping::Basic, }, - style: Theme::default(), + style: Theme::style(), } } @@ -426,11 +426,11 @@ pub struct Appearance { /// A set of rules that dictate the style of a checkbox. pub trait Style { /// The supported style of the [`StyleSheet`]. - fn default() -> fn(&Self, Status) -> Appearance; + fn style() -> fn(&Self, Status) -> Appearance; } impl Style for Theme { - fn default() -> fn(&Self, Status) -> Appearance { + fn style() -> fn(&Self, Status) -> Appearance { primary } } -- cgit From 34e7c6593a9e0f56cee5db18b7258717cf6bc11b Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 6 Mar 2024 20:30:58 +0100 Subject: Use `Style` struct pattern instead of trait for all widgets --- widget/src/checkbox.rs | 40 +++++++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 13 deletions(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index 91838291..e4fc2232 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -53,13 +53,12 @@ pub struct Checkbox< text_shaping: text::Shaping, font: Option, icon: Icon, - style: fn(&Theme, Status) -> Appearance, + style: Style, } impl<'a, Message, Theme, Renderer> Checkbox<'a, Message, Theme, Renderer> where Renderer: text::Renderer, - Theme: Style, { /// The default size of a [`Checkbox`]. const DEFAULT_SIZE: f32 = 15.0; @@ -72,7 +71,10 @@ where /// It expects: /// * the label of the [`Checkbox`] /// * a boolean describing whether the [`Checkbox`] is checked or not - pub fn new(label: impl Into, is_checked: bool) -> Self { + pub fn new(label: impl Into, is_checked: bool) -> Self + where + Style: Default, + { Checkbox { is_checked, on_toggle: None, @@ -91,7 +93,7 @@ where line_height: text::LineHeight::default(), shaping: text::Shaping::Basic, }, - style: Theme::style(), + style: Style::default(), } } @@ -175,7 +177,7 @@ where /// Sets the style of the [`Checkbox`]. pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self { - self.style = style.into(); + self.style = Style(style); self } } @@ -301,7 +303,7 @@ where Status::Active { is_checked } }; - let appearance = (self.style)(theme, status); + let appearance = (self.style.0)(theme, status); { let layout = children.next().unwrap(); @@ -423,15 +425,27 @@ pub struct Appearance { pub text_color: Option, } -/// A set of rules that dictate the style of a checkbox. -pub trait Style { - /// The supported style of the [`StyleSheet`]. - fn style() -> fn(&Self, Status) -> Appearance; +/// The style of a [`Checkbox`]. +#[derive(Debug, PartialEq, Eq)] +pub struct Style(fn(&Theme, Status) -> Appearance); + +impl Clone for Style { + fn clone(&self) -> Self { + *self + } +} + +impl Copy for Style {} + +impl Default for Style { + fn default() -> Self { + Style(primary) + } } -impl Style for Theme { - fn style() -> fn(&Self, Status) -> Appearance { - primary +impl From Appearance> for Style { + fn from(f: fn(&Theme, Status) -> Appearance) -> Self { + Style(f) } } -- cgit From 905f2160e6eb7504f52d9bd62c7bfa42c8ec2902 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Mar 2024 00:14:41 +0100 Subject: Move `Theme` type to `iced_core` --- widget/src/checkbox.rs | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index e4fc2232..a297627b 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -5,23 +5,21 @@ use crate::core::layout; use crate::core::mouse; use crate::core::renderer; use crate::core::text; +use crate::core::theme::palette; use crate::core::touch; use crate::core::widget; use crate::core::widget::tree::{self, Tree}; use crate::core::{ Background, Border, Clipboard, Color, Element, Layout, Length, Pixels, - Rectangle, Shell, Size, Widget, + Rectangle, Shell, Size, Theme, Widget, }; -use crate::style::theme::palette; -use crate::style::Theme; /// A box that can be checked. /// /// # Example /// /// ```no_run -/// # type Checkbox<'a, Message> = -/// # iced_widget::Checkbox<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>; +/// # type Checkbox<'a, Message> = iced_widget::Checkbox<'a, Message>; /// # /// pub enum Message { /// CheckboxToggled(bool), -- cgit From 833538ee7f3a60a839304762dfc29b0881d19094 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 7 Mar 2024 20:11:32 +0100 Subject: Leverage `DefaultStyle` traits instead of `Default` --- widget/src/checkbox.rs | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index a297627b..c837ab3f 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -71,7 +71,7 @@ where /// * a boolean describing whether the [`Checkbox`] is checked or not pub fn new(label: impl Into, is_checked: bool) -> Self where - Style: Default, + Theme: DefaultStyle, { Checkbox { is_checked, @@ -91,7 +91,7 @@ where line_height: text::LineHeight::default(), shaping: text::Shaping::Basic, }, - style: Style::default(), + style: Theme::default_style(), } } @@ -175,7 +175,7 @@ where /// Sets the style of the [`Checkbox`]. pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self { - self.style = Style(style); + self.style = style; self } } @@ -301,7 +301,7 @@ where Status::Active { is_checked } }; - let appearance = (self.style.0)(theme, status); + let appearance = (self.style)(theme, status); { let layout = children.next().unwrap(); @@ -424,26 +424,23 @@ pub struct Appearance { } /// The style of a [`Checkbox`]. -#[derive(Debug, PartialEq, Eq)] -pub struct Style(fn(&Theme, Status) -> Appearance); +pub type Style = fn(&Theme, Status) -> Appearance; -impl Clone for Style { - fn clone(&self) -> Self { - *self - } +/// The default style of a [`Checkbox`]. +pub trait DefaultStyle { + /// Returns the default style of a [`Checkbox`]. + fn default_style() -> Style; } -impl Copy for Style {} - -impl Default for Style { - fn default() -> Self { - Style(primary) +impl DefaultStyle for Theme { + fn default_style() -> Style { + primary } } -impl From Appearance> for Style { - fn from(f: fn(&Theme, Status) -> Appearance) -> Self { - Style(f) +impl DefaultStyle for Appearance { + fn default_style() -> Style { + |appearance, _status| *appearance } } -- cgit From c99e5996478ee74e5328ef5aaa1d350fcc06933b Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Mar 2024 00:25:42 +0100 Subject: Make `Checkbox`, `Radio`, and `Toggler` default sizes consistent --- widget/src/checkbox.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'widget/src/checkbox.rs') diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs index c837ab3f..f0c7357b 100644 --- a/widget/src/checkbox.rs +++ b/widget/src/checkbox.rs @@ -59,10 +59,10 @@ where Renderer: text::Renderer, { /// The default size of a [`Checkbox`]. - const DEFAULT_SIZE: f32 = 15.0; + const DEFAULT_SIZE: f32 = 16.0; /// The default spacing of a [`Checkbox`]. - const DEFAULT_SPACING: f32 = 10.0; + const DEFAULT_SPACING: f32 = 8.0; /// Creates a new [`Checkbox`]. /// -- cgit