From 664251f3f5c7b76f69a97683af1468094bba887f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 14 May 2022 01:47:55 +0200 Subject: Draft first-class `Theme` support RFC: https://github.com/iced-rs/rfcs/pull/6 --- examples/tour/src/main.rs | 49 +++++++++++------------------------------------ 1 file changed, 11 insertions(+), 38 deletions(-) (limited to 'examples/tour/src/main.rs') diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 2024d25a..8bdc7f1d 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -1,7 +1,13 @@ +use iced::alignment; +use iced::button; +use iced::scrollable; +use iced::slider; +use iced::text_input; +use iced::theme; use iced::{ - alignment, button, scrollable, slider, text_input, Button, Checkbox, Color, - Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox, - Scrollable, Settings, Slider, Space, Text, TextInput, Toggler, + Button, Checkbox, Color, Column, Container, ContentFit, Element, Image, + Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text, + TextInput, Toggler, }; pub fn main() -> iced::Result { @@ -64,7 +70,7 @@ impl Sandbox for Tour { controls = controls.push( button(back_button, "Back") .on_press(Message::BackPressed) - .style(style::Button::Secondary), + .style(theme::Button::Secondary), ); } @@ -74,7 +80,7 @@ impl Sandbox for Tour { controls = controls.push( button(next_button, "Next") .on_press(Message::NextPressed) - .style(style::Button::Primary), + .style(theme::Button::Primary), ); } @@ -818,36 +824,3 @@ pub enum Layout { Row, Column, } - -mod style { - use iced::button; - use iced::{Background, Color, Vector}; - - pub enum Button { - Primary, - Secondary, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(match self { - Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), - Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5), - })), - border_radius: 12.0, - shadow_offset: Vector::new(1.0, 1.0), - text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 2.0), - ..self.active() - } - } - } -} -- cgit From 3a820b45f336398c48f8bedf7b8c4b8af876efff Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 00:40:27 +0200 Subject: Implement theme styling for `Slider` --- examples/tour/src/main.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'examples/tour/src/main.rs') diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 8bdc7f1d..c7ca8534 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -776,7 +776,7 @@ fn color_slider( state: &mut slider::State, component: f32, update: impl Fn(f32) -> Color + 'static, -) -> Slider { +) -> Slider { Slider::new(state, 0.0..=1.0, f64::from(component), move |c| { StepMessage::TextColorChanged(update(c as f32)) }) -- cgit From 3e8f4cdd138d3f927ce8a3ea451cbfcca52af0d9 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 05:31:55 +0200 Subject: Add "Theming" section to the `tour` example --- examples/tour/src/main.rs | 70 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 60 insertions(+), 10 deletions(-) (limited to 'examples/tour/src/main.rs') diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index c7ca8534..155592d5 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -7,7 +7,7 @@ use iced::theme; use iced::{ Button, Checkbox, Color, Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text, - TextInput, Toggler, + TextInput, Theme, Toggler, }; pub fn main() -> iced::Result { @@ -21,6 +21,7 @@ pub struct Tour { scroll: scrollable::State, back_button: button::State, next_button: button::State, + theme: Theme, debug: bool, } @@ -33,6 +34,7 @@ impl Sandbox for Tour { scroll: scrollable::State::new(), back_button: button::State::new(), next_button: button::State::new(), + theme: Theme::default(), debug: false, } } @@ -50,7 +52,8 @@ impl Sandbox for Tour { self.steps.advance(); } Message::StepMessage(step_msg) => { - self.steps.update(step_msg, &mut self.debug); + self.steps + .update(step_msg, &mut self.theme, &mut self.debug); } } } @@ -88,7 +91,7 @@ impl Sandbox for Tour { .max_width(540) .spacing(20) .padding(20) - .push(steps.view(self.debug).map(Message::StepMessage)) + .push(steps.view(self.theme, self.debug).map(Message::StepMessage)) .push(controls) .into(); @@ -106,6 +109,10 @@ impl Sandbox for Tour { .center_y() .into() } + + fn theme(&self) -> Theme { + self.theme + } } #[derive(Debug, Clone)] @@ -125,6 +132,7 @@ impl Steps { Steps { steps: vec![ Step::Welcome, + Step::Theming, Step::Slider { state: slider::State::new(), value: 50, @@ -138,7 +146,7 @@ impl Steps { size_slider: slider::State::new(), size: 30, color_sliders: [slider::State::new(); 3], - color: Color::BLACK, + color: Color::from_rgb(0.5, 0.5, 0.5), }, Step::Radio { selection: None }, Step::Toggler { @@ -162,12 +170,17 @@ impl Steps { } } - fn update(&mut self, msg: StepMessage, debug: &mut bool) { - self.steps[self.current].update(msg, debug); + fn update( + &mut self, + msg: StepMessage, + theme: &mut Theme, + debug: &mut bool, + ) { + self.steps[self.current].update(msg, theme, debug); } - fn view(&mut self, debug: bool) -> Element { - self.steps[self.current].view(debug) + fn view(&mut self, theme: Theme, debug: bool) -> Element { + self.steps[self.current].view(theme, debug) } fn advance(&mut self) { @@ -198,6 +211,7 @@ impl Steps { enum Step { Welcome, + Theming, Slider { state: slider::State, value: u8, @@ -236,6 +250,7 @@ enum Step { #[derive(Debug, Clone)] pub enum StepMessage { + ThemeSelected(Theme), SliderChanged(u8), LayoutChanged(Layout), SpacingChanged(u16), @@ -251,8 +266,16 @@ pub enum StepMessage { } impl<'a> Step { - fn update(&mut self, msg: StepMessage, debug: &mut bool) { + fn update( + &mut self, + msg: StepMessage, + theme: &mut Theme, + debug: &mut bool, + ) { match msg { + StepMessage::ThemeSelected(new_theme) => { + *theme = new_theme; + } StepMessage::DebugToggled(value) => { if let Step::Debugger = self { *debug = value; @@ -319,6 +342,7 @@ impl<'a> Step { fn title(&self) -> &str { match self { Step::Welcome => "Welcome", + Step::Theming => "Theming", Step::Radio { .. } => "Radio button", Step::Toggler { .. } => "Toggler", Step::Slider { .. } => "Slider", @@ -335,6 +359,7 @@ impl<'a> Step { fn can_continue(&self) -> bool { match self { Step::Welcome => true, + Step::Theming => true, Step::Radio { selection } => *selection == Some(Language::Rust), Step::Toggler { can_continue } => *can_continue, Step::Slider { .. } => true, @@ -348,9 +373,10 @@ impl<'a> Step { } } - fn view(&mut self, debug: bool) -> Element { + fn view(&mut self, theme: Theme, debug: bool) -> Element { match self { Step::Welcome => Self::welcome(), + Step::Theming => Self::theme(theme), Step::Radio { selection } => Self::radio(*selection), Step::Toggler { can_continue } => Self::toggler(*can_continue), Step::Slider { state, value } => Self::slider(state, *value), @@ -415,6 +441,30 @@ impl<'a> Step { )) } + fn theme(theme: Theme) -> Column<'a, StepMessage> { + let light_radio = Radio::new( + Theme::Light, + "Light", + Some(theme), + StepMessage::ThemeSelected, + ); + + let dark_radio = Radio::new( + Theme::Dark, + "Dark", + Some(theme), + StepMessage::ThemeSelected, + ); + + Self::container("Theming") + .push(Text::new( + "You can easily change the appearance of an application made \ + with Iced by selecting a different theme!", + )) + .push(light_radio) + .push(dark_radio) + } + fn slider( state: &'a mut slider::State, value: u8, -- cgit From 1dd1a2f97fc747e15e12b5188dad6c41b0d052ea Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 29 Jun 2022 10:51:01 +0200 Subject: Introduce `StyleSheet` for `Text` widget --- examples/tour/src/main.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'examples/tour/src/main.rs') diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 155592d5..22cfaa57 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -584,7 +584,7 @@ impl<'a> Step { .padding(20) .spacing(20) .push(Text::new("And its color:")) - .push(Text::new(format!("{:?}", color)).color(color)) + .push(Text::new(format!("{:?}", color)).style(color)) .push(color_sliders); Self::container("Text") @@ -766,7 +766,7 @@ impl<'a> Step { .push(if cfg!(target_arch = "wasm32") { Element::new( Text::new("Not available on web yet!") - .color([0.7, 0.7, 0.7]) + .style(Color::from([0.7, 0.7, 0.7])) .horizontal_alignment(alignment::Horizontal::Center), ) } else { -- cgit From 3514bd1535bc8421c746d981ca488883486de97f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Jul 2022 20:13:14 +0200 Subject: Add `theme::Application` styling support to `Sandbox` --- examples/tour/src/main.rs | 68 +++++++---------------------------------------- 1 file changed, 9 insertions(+), 59 deletions(-) (limited to 'examples/tour/src/main.rs') diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 22cfaa57..d85f2916 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -7,7 +7,7 @@ use iced::theme; use iced::{ Button, Checkbox, Color, Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text, - TextInput, Theme, Toggler, + TextInput, Toggler, }; pub fn main() -> iced::Result { @@ -21,7 +21,6 @@ pub struct Tour { scroll: scrollable::State, back_button: button::State, next_button: button::State, - theme: Theme, debug: bool, } @@ -34,7 +33,6 @@ impl Sandbox for Tour { scroll: scrollable::State::new(), back_button: button::State::new(), next_button: button::State::new(), - theme: Theme::default(), debug: false, } } @@ -52,8 +50,7 @@ impl Sandbox for Tour { self.steps.advance(); } Message::StepMessage(step_msg) => { - self.steps - .update(step_msg, &mut self.theme, &mut self.debug); + self.steps.update(step_msg, &mut self.debug); } } } @@ -91,7 +88,7 @@ impl Sandbox for Tour { .max_width(540) .spacing(20) .padding(20) - .push(steps.view(self.theme, self.debug).map(Message::StepMessage)) + .push(steps.view(self.debug).map(Message::StepMessage)) .push(controls) .into(); @@ -109,10 +106,6 @@ impl Sandbox for Tour { .center_y() .into() } - - fn theme(&self) -> Theme { - self.theme - } } #[derive(Debug, Clone)] @@ -132,7 +125,6 @@ impl Steps { Steps { steps: vec![ Step::Welcome, - Step::Theming, Step::Slider { state: slider::State::new(), value: 50, @@ -170,17 +162,12 @@ impl Steps { } } - fn update( - &mut self, - msg: StepMessage, - theme: &mut Theme, - debug: &mut bool, - ) { - self.steps[self.current].update(msg, theme, debug); + fn update(&mut self, msg: StepMessage, debug: &mut bool) { + self.steps[self.current].update(msg, debug); } - fn view(&mut self, theme: Theme, debug: bool) -> Element { - self.steps[self.current].view(theme, debug) + fn view(&mut self, debug: bool) -> Element { + self.steps[self.current].view(debug) } fn advance(&mut self) { @@ -211,7 +198,6 @@ impl Steps { enum Step { Welcome, - Theming, Slider { state: slider::State, value: u8, @@ -250,7 +236,6 @@ enum Step { #[derive(Debug, Clone)] pub enum StepMessage { - ThemeSelected(Theme), SliderChanged(u8), LayoutChanged(Layout), SpacingChanged(u16), @@ -266,16 +251,8 @@ pub enum StepMessage { } impl<'a> Step { - fn update( - &mut self, - msg: StepMessage, - theme: &mut Theme, - debug: &mut bool, - ) { + fn update(&mut self, msg: StepMessage, debug: &mut bool) { match msg { - StepMessage::ThemeSelected(new_theme) => { - *theme = new_theme; - } StepMessage::DebugToggled(value) => { if let Step::Debugger = self { *debug = value; @@ -342,7 +319,6 @@ impl<'a> Step { fn title(&self) -> &str { match self { Step::Welcome => "Welcome", - Step::Theming => "Theming", Step::Radio { .. } => "Radio button", Step::Toggler { .. } => "Toggler", Step::Slider { .. } => "Slider", @@ -359,7 +335,6 @@ impl<'a> Step { fn can_continue(&self) -> bool { match self { Step::Welcome => true, - Step::Theming => true, Step::Radio { selection } => *selection == Some(Language::Rust), Step::Toggler { can_continue } => *can_continue, Step::Slider { .. } => true, @@ -373,10 +348,9 @@ impl<'a> Step { } } - fn view(&mut self, theme: Theme, debug: bool) -> Element { + fn view(&mut self, debug: bool) -> Element { match self { Step::Welcome => Self::welcome(), - Step::Theming => Self::theme(theme), Step::Radio { selection } => Self::radio(*selection), Step::Toggler { can_continue } => Self::toggler(*can_continue), Step::Slider { state, value } => Self::slider(state, *value), @@ -441,30 +415,6 @@ impl<'a> Step { )) } - fn theme(theme: Theme) -> Column<'a, StepMessage> { - let light_radio = Radio::new( - Theme::Light, - "Light", - Some(theme), - StepMessage::ThemeSelected, - ); - - let dark_radio = Radio::new( - Theme::Dark, - "Dark", - Some(theme), - StepMessage::ThemeSelected, - ); - - Self::container("Theming") - .push(Text::new( - "You can easily change the appearance of an application made \ - with Iced by selecting a different theme!", - )) - .push(light_radio) - .push(dark_radio) - } - fn slider( state: &'a mut slider::State, value: u8, -- cgit