diff options
| -rw-r--r-- | crates/material_theme/Cargo.toml | 2 | ||||
| -rw-r--r-- | crates/material_theme/src/checkbox.rs | 127 | ||||
| -rw-r--r-- | crates/material_theme/src/lib.rs | 1 | ||||
| -rw-r--r-- | theme_test/src/main.rs | 15 |
4 files changed, 143 insertions, 2 deletions
diff --git a/crates/material_theme/Cargo.toml b/crates/material_theme/Cargo.toml index eef9605..58c5e0c 100644 --- a/crates/material_theme/Cargo.toml +++ b/crates/material_theme/Cargo.toml @@ -13,7 +13,9 @@ rust-version = "1.85" [features] default = [] +# Provides support for animating with `iced_anim` animate = ["dep:iced_anim"] +# Provides support for `iced_dialog` dialog = ["dep:iced_dialog"] [dependencies] diff --git a/crates/material_theme/src/checkbox.rs b/crates/material_theme/src/checkbox.rs new file mode 100644 index 0000000..ac1f974 --- /dev/null +++ b/crates/material_theme/src/checkbox.rs @@ -0,0 +1,127 @@ +use iced_widget::checkbox::{Catalog, Status, Style, StyleFn}; +use iced_widget::core::{Background, Border, Color, border}; + +use super::Theme; +use crate::utils::{DISABLED_CONTAINER_OPACITY, HOVERED_LAYER_OPACITY, mix}; + +impl Catalog for Theme { + type Class<'a> = StyleFn<'a, Self>; + + fn default<'a>() -> Self::Class<'a> { + Box::new(default) + } + + fn style(&self, class: &Self::Class<'_>, status: Status) -> Style { + class(self, status) + } +} + +pub fn styled( + background_color: Color, + background_hover: Option<Color>, + icon_color: Color, + border_color: Color, + text_color: Option<Color>, + is_checked: bool, +) -> Style { + Style { + background: Background::Color(if is_checked { + background_color + } else { + background_hover.unwrap_or(Color::TRANSPARENT) + }), + icon_color, + border: if is_checked { + border::rounded(2) + } else { + Border { + color: border_color, + width: 2.0, + radius: border::radius(2), + } + }, + text_color, + } +} + +pub fn default(theme: &Theme, status: Status) -> Style { + let surface = theme.colorscheme.surface; + let primary = theme.colorscheme.primary; + + match status { + Status::Active { is_checked } => styled( + primary.color, + None, + primary.on_primary, + surface.on_surface_variant, + Some(surface.on_surface), + is_checked, + ), + Status::Hovered { is_checked } => styled( + mix(primary.color, surface.on_surface, HOVERED_LAYER_OPACITY), + Some(Color { + a: HOVERED_LAYER_OPACITY, + ..surface.on_surface + }), + primary.on_primary, + surface.on_surface_variant, + Some(surface.on_surface), + is_checked, + ), + Status::Disabled { is_checked } => styled( + Color { + a: DISABLED_CONTAINER_OPACITY, + ..surface.on_surface + }, + None, + surface.color, + Color { + a: DISABLED_CONTAINER_OPACITY, + ..surface.on_surface + }, + Some(surface.on_surface), + is_checked, + ), + } +} + +pub fn error(theme: &Theme, status: Status) -> Style { + let surface = theme.colorscheme.surface; + let error = theme.colorscheme.error; + + match status { + Status::Active { is_checked } => styled( + error.color, + None, + error.on_error, + error.color, + Some(error.color), + is_checked, + ), + Status::Hovered { is_checked } => styled( + mix(error.color, surface.on_surface, HOVERED_LAYER_OPACITY), + Some(Color { + a: HOVERED_LAYER_OPACITY, + ..error.color + }), + error.on_error, + error.color, + Some(error.color), + is_checked, + ), + Status::Disabled { is_checked } => styled( + Color { + a: DISABLED_CONTAINER_OPACITY, + ..surface.on_surface + }, + None, + surface.color, + Color { + a: DISABLED_CONTAINER_OPACITY, + ..surface.on_surface + }, + Some(surface.on_surface), + is_checked, + ), + } +} diff --git a/crates/material_theme/src/lib.rs b/crates/material_theme/src/lib.rs index adffe09..2440538 100644 --- a/crates/material_theme/src/lib.rs +++ b/crates/material_theme/src/lib.rs @@ -5,6 +5,7 @@ use iced_widget::core::theme::{Base, Style}; use serde::Deserialize; pub mod button; +pub mod checkbox; pub mod container; #[cfg(feature = "dialog")] pub mod dialog; diff --git a/theme_test/src/main.rs b/theme_test/src/main.rs index 799d68d..953d4e0 100644 --- a/theme_test/src/main.rs +++ b/theme_test/src/main.rs @@ -1,6 +1,8 @@ use iced::Element; use iced::Length::Fill; -use iced::widget::{button, column, container, pick_list, row, text_input}; +use iced::widget::{ + button, checkbox, column, container, pick_list, row, text_input, +}; use iced_anim::{Animated, Animation, Event}; use iced_dialog::dialog; use material_theme::button::{elevated, filled_tonal, outlined, text}; @@ -26,6 +28,7 @@ enum Message { OpenDialog, CloseDialog, Input(String), + CheckBox(bool), SwitchTheme(Event<Theme>), } @@ -34,6 +37,7 @@ pub struct State { theme: Animated<Theme>, show_dialog: bool, content: String, + is_checked: bool, } impl State { @@ -47,6 +51,7 @@ impl State { self.show_dialog = false; } Message::Input(content) => self.content = content, + Message::CheckBox(is_checked) => self.is_checked = is_checked, Message::SwitchTheme(event) => { self.theme.update(event); } @@ -121,7 +126,13 @@ impl State { .placeholder("Select a theme..."), button("Open Dialog").on_press(Message::OpenDialog), text_input("Type something here...", &self.content) - .on_input(Message::Input) + .on_input(Message::Input), + checkbox("Normal", self.is_checked) + .on_toggle(Message::CheckBox), + checkbox("Error", self.is_checked) + .on_toggle(Message::CheckBox) + .style(material_theme::checkbox::error), + checkbox("Disabled", self.is_checked), ] .spacing(10) ] |