me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Try catalog theming approach with Button

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2024-03-23 19:23:08 +01:00
parent 2b00e8b145
commit 999ad2d288
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
5 changed files with 89 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

33
core/src/closure.rs Normal file
View file

@ -0,0 +1,33 @@
//! Box closures with ease.
//!
//! These are just a bunch of types that wrap boxed closures with
//! blanket [`From`] implementations for easy conversions.
//!
//! Mainly, it allows functions to take `Into<T>` where `T` may end
//! up being a boxed closure.
/// A boxed closure that takes `A` by reference and produces `O`.
#[allow(missing_debug_implementations)]
pub struct Unary<'a, A, O>(pub Box<dyn Fn(&A) -> O + 'a>);
impl<'a, A, O, T> From<T> for Unary<'a, A, O>
where
T: Fn(&A) -> O + 'a,
{
fn from(f: T) -> Self {
Self(Box::new(f))
}
}
/// A boxed closure that takes `A` by reference and `B` by value and produces `O`.
#[allow(missing_debug_implementations)]
pub struct Binary<'a, A, B, O>(pub Box<dyn Fn(&A, B) -> O + 'a>);
impl<'a, A, B, O, T> From<T> for Binary<'a, A, B, O>
where
T: Fn(&A, B) -> O + 'a,
{
fn from(f: T) -> Self {
Self(Box::new(f))
}
}

1
core/src/lib.rs
View file

@ -19,6 +19,7 @@
pub mod alignment;
pub mod border;
pub mod clipboard;
pub mod closure;
pub mod event;
pub mod font;
pub mod gradient;

4
examples/component/src/main.rs
View file

@ -74,7 +74,7 @@ mod numeric_input {
impl<Message, Theme> Component<Message, Theme> for NumericInput<Message>
where
Theme: text::DefaultStyle
+ button::DefaultStyle
+ button::Catalog
+ text_input::DefaultStyle
+ 'static,
{
@ -152,7 +152,7 @@ mod numeric_input {
for Element<'a, Message, Theme>
where
Theme: text::DefaultStyle
+ button::DefaultStyle
+ button::Catalog
+ text_input::DefaultStyle
+ 'static,
Message: 'a,

104
widget/src/button.rs
View file

@ -1,4 +1,5 @@
//! Allow your users to perform actions by pressing a button.
use crate::core::closure;
use crate::core::event::{self, Event};
use crate::core::layout;
use crate::core::mouse;
@ -49,6 +50,7 @@ use crate::core::{
pub struct Button<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
where
Renderer: crate::core::Renderer,
Theme: Catalog,
{
content: Element<'a, Message, Theme, Renderer>,
on_press: Option<Message>,
@ -56,20 +58,18 @@ where
height: Length,
padding: Padding,
clip: bool,
style: Style<'a, Theme>,
style: Theme::Item<'a>,
}
impl<'a, Message, Theme, Renderer> Button<'a, Message, Theme, Renderer>
where
Renderer: crate::core::Renderer,
Theme: Catalog,
{
/// Creates a new [`Button`] with the given content.
pub fn new(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Self
where
Theme: DefaultStyle + 'a,
{
) -> Self {
let content = content.into();
let size = content.as_widget().size_hint();
@ -80,7 +80,7 @@ where
height: size.height.fluid(),
padding: DEFAULT_PADDING,
clip: false,
style: Box::new(Theme::default_style),
style: Theme::default(),
}
}
@ -120,11 +120,8 @@ where
}
/// Sets the style variant of this [`Button`].
pub fn style(
mut self,
style: impl Fn(&Theme, Status) -> Appearance + 'a,
) -> Self {
self.style = Box::new(style);
pub fn style(mut self, style: impl Into<Theme::Item<'a>>) -> Self {
self.style = style.into();
self
}
@ -146,6 +143,7 @@ impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
where
Message: 'a + Clone,
Renderer: 'a + crate::core::Renderer,
Theme: Catalog,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<State>()
@ -304,7 +302,7 @@ where
Status::Active
};
let styling = (self.style)(theme, status);
let styling = theme.style(&self.style, status);
if styling.background.is_some()
|| styling.border.width > 0.0
@ -378,7 +376,7 @@ impl<'a, Message, Theme, Renderer> From<Button<'a, Message, Theme, Renderer>>
for Element<'a, Message, Theme, Renderer>
where
Message: Clone + 'a,
Theme: 'a,
Theme: Catalog + 'a,
Renderer: crate::core::Renderer + 'a,
{
fn from(button: Button<'a, Message, Theme, Renderer>) -> Self {
@ -409,7 +407,7 @@ pub enum Status {
/// The appearance of a button.
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct Appearance {
pub struct Style {
/// The [`Background`] of the button.
pub background: Option<Background>,
/// The text [`Color`] of the button.
@ -420,7 +418,7 @@ pub struct Appearance {
pub shadow: Shadow,
}
impl Appearance {
impl Style {
/// Updates the [`Appearance`] with the given [`Background`].
pub fn with_background(self, background: impl Into<Background>) -> Self {
Self {
@ -430,7 +428,7 @@ impl Appearance {
}
}
impl std::default::Default for Appearance {
impl std::default::Default for Style {
fn default() -> Self {
Self {
background: None,
@ -441,41 +439,43 @@ impl std::default::Default for Appearance {
}
}
/// The style of a [`Button`].
pub type Style<'a, Theme> = Box<dyn Fn(&Theme, Status) -> Appearance + 'a>;
/// The theme catalog of a [`Button`].
pub trait Catalog: Sized {
/// The item type of this [`Catalog`].
type Item<'a>;
/// The default style of a [`Button`].
pub trait DefaultStyle {
/// Returns the default style of a [`Button`].
fn default_style(&self, status: Status) -> Appearance;
/// The default item produced by this [`Catalog`].
fn default<'a>() -> Self::Item<'a>;
/// The [`Style`] of an item with the given status.
fn style(&self, item: &Self::Item<'_>, status: Status) -> Style;
}
impl DefaultStyle for Theme {
fn default_style(&self, status: Status) -> Appearance {
primary(self, status)
/// The item of a button [`Catalog`] for the built-in [`Theme`].
///
/// This is just a boxed closure: `Fn(&Theme, Status) -> Style`.
pub type Item<'a, Theme> = closure::Binary<'a, Theme, Status, Style>;
impl Catalog for Theme {
type Item<'a> = Item<'a, Self>;
fn default<'a>() -> Self::Item<'a> {
closure::Binary::from(primary)
}
}
impl DefaultStyle for Appearance {
fn default_style(&self, _status: Status) -> Appearance {
*self
}
}
impl DefaultStyle for Color {
fn default_style(&self, _status: Status) -> Appearance {
Appearance::default().with_background(*self)
fn style(&self, item: &Self::Item<'_>, status: Status) -> Style {
(item.0)(self, status)
}
}
/// A primary button; denoting a main action.
pub fn primary(theme: &Theme, status: Status) -> Appearance {
pub fn primary(theme: &Theme, status: Status) -> Style {
let palette = theme.extended_palette();
let base = styled(palette.primary.strong);
match status {
Status::Active | Status::Pressed => base,
Status::Hovered => Appearance {
Status::Hovered => Style {
background: Some(Background::Color(palette.primary.base.color)),
..base
},
@ -484,13 +484,13 @@ pub fn primary(theme: &Theme, status: Status) -> Appearance {
}
/// A secondary button; denoting a complementary action.
pub fn secondary(theme: &Theme, status: Status) -> Appearance {
pub fn secondary(theme: &Theme, status: Status) -> Style {
let palette = theme.extended_palette();
let base = styled(palette.secondary.base);
match status {
Status::Active | Status::Pressed => base,
Status::Hovered => Appearance {
Status::Hovered => Style {
background: Some(Background::Color(palette.secondary.strong.color)),
..base
},
@ -499,13 +499,13 @@ pub fn secondary(theme: &Theme, status: Status) -> Appearance {
}
/// A success button; denoting a good outcome.
pub fn success(theme: &Theme, status: Status) -> Appearance {
pub fn success(theme: &Theme, status: Status) -> Style {
let palette = theme.extended_palette();
let base = styled(palette.success.base);
match status {
Status::Active | Status::Pressed => base,
Status::Hovered => Appearance {
Status::Hovered => Style {
background: Some(Background::Color(palette.success.strong.color)),
..base
},
@ -514,13 +514,13 @@ pub fn success(theme: &Theme, status: Status) -> Appearance {
}
/// A danger button; denoting a destructive action.
pub fn danger(theme: &Theme, status: Status) -> Appearance {
pub fn danger(theme: &Theme, status: Status) -> Style {
let palette = theme.extended_palette();
let base = styled(palette.danger.base);
match status {
Status::Active | Status::Pressed => base,
Status::Hovered => Appearance {
Status::Hovered => Style {
background: Some(Background::Color(palette.danger.strong.color)),
..base
},
@ -529,17 +529,17 @@ pub fn danger(theme: &Theme, status: Status) -> Appearance {
}
/// A text button; useful for links.
pub fn text(theme: &Theme, status: Status) -> Appearance {
pub fn text(theme: &Theme, status: Status) -> Style {
let palette = theme.extended_palette();
let base = Appearance {
let base = Style {
text_color: palette.background.base.text,
..Appearance::default()
..Style::default()
};
match status {
Status::Active | Status::Pressed => base,
Status::Hovered => Appearance {
Status::Hovered => Style {
text_color: palette.background.base.text.scale_alpha(0.8),
..base
},
@ -547,17 +547,17 @@ pub fn text(theme: &Theme, status: Status) -> Appearance {
}
}
fn styled(pair: palette::Pair) -> Appearance {
Appearance {
fn styled(pair: palette::Pair) -> Style {
Style {
background: Some(Background::Color(pair.color)),
text_color: pair.text,
border: Border::rounded(2),
..Appearance::default()
..Style::default()
}
}
fn disabled(appearance: Appearance) -> Appearance {
Appearance {
fn disabled(appearance: Style) -> Style {
Style {
background: appearance
.background
.map(|background| background.scale_alpha(0.5)),

2
widget/src/helpers.rs
View file

@ -117,7 +117,7 @@ pub fn button<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Button<'a, Message, Theme, Renderer>
where
Theme: button::DefaultStyle + 'a,
Theme: button::Catalog + 'a,
Renderer: core::Renderer,
{
Button::new(content)