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/pure/component/src/main.rs | 9 +++- examples/pure/game_of_life/src/main.rs | 17 +++++-- examples/pure/game_of_life/src/style.rs | 69 +--------------------------- examples/pure/pane_grid/src/main.rs | 81 ++++----------------------------- examples/pure/todos/src/main.rs | 66 +++------------------------ examples/pure/tour/src/main.rs | 37 ++------------- 6 files changed, 41 insertions(+), 238 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs index b38d6fca..2f98f768 100644 --- a/examples/pure/component/src/main.rs +++ b/examples/pure/component/src/main.rs @@ -47,12 +47,13 @@ impl Sandbox for Component { } mod numeric_input { - use iced::pure::{button, row, text, text_input}; use iced_lazy::pure::{self, Component}; use iced_native::alignment::{self, Alignment}; use iced_native::text; + use iced_native::widget; use iced_native::Length; use iced_pure::Element; + use iced_pure::{button, row, text, text_input}; pub struct NumericInput { value: Option, @@ -88,6 +89,9 @@ mod numeric_input { impl Component for NumericInput where Renderer: text::Renderer + 'static, + Renderer::Theme: widget::button::StyleSheet, + ::Variant: + Default + Copy, { type State = (); type Event = Event; @@ -158,6 +162,9 @@ mod numeric_input { where Message: 'a, Renderer: 'static + text::Renderer, + Renderer::Theme: widget::button::StyleSheet, + ::Variant: + Default + Copy, { fn from(numeric_input: NumericInput) -> Self { pure::component(numeric_input) diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index a3164701..a3e46888 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -9,6 +9,7 @@ use iced::pure::{ button, checkbox, column, container, pick_list, row, slider, text, }; use iced::pure::{Application, Element}; +use iced::theme::{self, Theme}; use iced::time; use iced::window; use iced::{Alignment, Color, Command, Length, Settings, Subscription}; @@ -52,6 +53,7 @@ enum Message { impl Application for GameOfLife { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -168,10 +170,13 @@ fn view_controls<'a>( .spacing(10) .push( button(if is_playing { "Pause" } else { "Play" }) - .on_press(Message::TogglePlayback) - .style(style::Button), + .on_press(Message::TogglePlayback), ) - .push(button("Next").on_press(Message::Next).style(style::Button)); + .push( + button("Next") + .on_press(Message::Next) + .style(theme::Button::Secondary), + ); let speed_controls = row() .width(Length::Fill) @@ -201,7 +206,11 @@ fn view_controls<'a>( .text_size(16) .style(style::PickList), ) - .push(button("Clear").on_press(Message::Clear).style(style::Clear)) + .push( + button("Clear") + .on_press(Message::Clear) + .style(theme::Button::Destructive), + ) .into() } diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs index 1a64cf4a..dbd70c26 100644 --- a/examples/pure/game_of_life/src/style.rs +++ b/examples/pure/game_of_life/src/style.rs @@ -1,4 +1,4 @@ -use iced::{button, container, pick_list, slider, Background, Color}; +use iced::{container, pick_list, slider, Color}; const ACTIVE: Color = Color::from_rgb( 0x72 as f32 / 255.0, @@ -6,12 +6,6 @@ const ACTIVE: Color = Color::from_rgb( 0xDA as f32 / 255.0, ); -const DESTRUCTIVE: Color = Color::from_rgb( - 0xC0 as f32 / 255.0, - 0x47 as f32 / 255.0, - 0x47 as f32 / 255.0, -); - const HOVERED: Color = Color::from_rgb( 0x67 as f32 / 255.0, 0x7B as f32 / 255.0, @@ -35,67 +29,6 @@ impl container::StyleSheet for Container { } } -pub struct Button; - -impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(ACTIVE)), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: Some(Background::Color(HOVERED)), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } -} - -pub struct Clear; - -impl button::StyleSheet for Clear { - fn active(&self) -> button::Style { - button::Style { - background: Some(Background::Color(DESTRUCTIVE)), - border_radius: 3.0, - text_color: Color::WHITE, - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - button::Style { - background: Some(Background::Color(Color { - a: 0.5, - ..DESTRUCTIVE - })), - text_color: Color::WHITE, - ..self.active() - } - } - - fn pressed(&self) -> button::Style { - button::Style { - border_width: 1.0, - border_color: Color::WHITE, - ..self.hovered() - } - } -} - pub struct Slider; impl slider::StyleSheet for Slider { diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs index 65516956..2825a5c2 100644 --- a/examples/pure/pane_grid/src/main.rs +++ b/examples/pure/pane_grid/src/main.rs @@ -4,6 +4,7 @@ use iced::keyboard; use iced::pure::widget::pane_grid::{self, PaneGrid}; use iced::pure::{button, column, container, row, scrollable, text}; use iced::pure::{Application, Element}; +use iced::theme::{self, Theme}; use iced::{Color, Command, Length, Settings, Size, Subscription}; use iced_lazy::pure::responsive; use iced_native::{event, subscription, Event}; @@ -33,6 +34,7 @@ enum Message { impl Application for Example { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -161,7 +163,6 @@ impl Application for Example { text(if pane.is_pinned { "Unpin" } else { "Pin" }).size(14), ) .on_press(Message::TogglePin(id)) - .style(style::Button::Pin) .padding(3); let title = row() @@ -259,7 +260,7 @@ fn view_content<'a>( is_pinned: bool, size: Size, ) -> Element<'a, Message> { - let button = |label, message, style| { + let button = |label, message| { button( text(label) .width(Length::Fill) @@ -269,7 +270,6 @@ fn view_content<'a>( .width(Length::Fill) .padding(8) .on_press(message) - .style(style) }; let mut controls = column() @@ -278,20 +278,17 @@ fn view_content<'a>( .push(button( "Split horizontally", Message::Split(pane_grid::Axis::Horizontal, pane), - style::Button::Primary, )) .push(button( "Split vertically", Message::Split(pane_grid::Axis::Vertical, pane), - style::Button::Primary, )); if total_panes > 1 && !is_pinned { - controls = controls.push(button( - "Close", - Message::Close(pane), - style::Button::Destructive, - )); + controls = controls.push( + button("Close", Message::Close(pane)) + .style(theme::Button::Destructive), + ); } let content = column() @@ -315,7 +312,7 @@ fn view_controls<'a>( is_pinned: bool, ) -> Element<'a, Message> { let mut button = button(text("Close").size(14)) - .style(style::Button::Control) + .style(theme::Button::Destructive) .padding(3); if total_panes > 1 && !is_pinned { @@ -326,8 +323,7 @@ fn view_controls<'a>( } mod style { - use crate::PANE_ID_COLOR_FOCUSED; - use iced::{button, container, Background, Color, Vector}; + use iced::{container, Background, Color}; const SURFACE: Color = Color::from_rgb( 0xF2 as f32 / 255.0, @@ -335,18 +331,6 @@ mod style { 0xF5 as f32 / 255.0, ); - const ACTIVE: Color = Color::from_rgb( - 0x72 as f32 / 255.0, - 0x89 as f32 / 255.0, - 0xDA as f32 / 255.0, - ); - - const HOVERED: Color = Color::from_rgb( - 0x67 as f32 / 255.0, - 0x7B as f32 / 255.0, - 0xC4 as f32 / 255.0, - ); - pub enum TitleBar { Active, Focused, @@ -386,51 +370,4 @@ mod style { } } } - - pub enum Button { - Primary, - Destructive, - Control, - Pin, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - let (background, text_color) = match self { - Button::Primary => (Some(ACTIVE), Color::WHITE), - Button::Destructive => { - (None, Color::from_rgb8(0xFF, 0x47, 0x47)) - } - Button::Control => (Some(PANE_ID_COLOR_FOCUSED), Color::WHITE), - Button::Pin => (Some(ACTIVE), Color::WHITE), - }; - - button::Style { - text_color, - background: background.map(Background::Color), - border_radius: 5.0, - shadow_offset: Vector::new(0.0, 0.0), - ..button::Style::default() - } - } - - fn hovered(&self) -> button::Style { - let active = self.active(); - - let background = match self { - Button::Primary => Some(HOVERED), - Button::Destructive => Some(Color { - a: 0.2, - ..active.text_color - }), - Button::Control => Some(PANE_ID_COLOR_FOCUSED), - Button::Pin => Some(HOVERED), - }; - - button::Style { - background: background.map(Background::Color), - ..active - } - } - } } diff --git a/examples/pure/todos/src/main.rs b/examples/pure/todos/src/main.rs index 6a6c6300..ea772def 100644 --- a/examples/pure/todos/src/main.rs +++ b/examples/pure/todos/src/main.rs @@ -4,6 +4,7 @@ use iced::pure::{ button, checkbox, column, container, row, scrollable, text, text_input, Application, Element, }; +use iced::theme::{self, Theme}; use iced::window; use iced::{Command, Font, Length, Settings}; use serde::{Deserialize, Serialize}; @@ -44,8 +45,9 @@ enum Message { } impl Application for Todos { - type Executor = iced::executor::Default; type Message = Message; + type Theme = Theme; + type Executor = iced::executor::Default; type Flags = (); fn new(_flags: ()) -> (Todos, Command) { @@ -287,7 +289,7 @@ impl Task { button(edit_icon()) .on_press(TaskMessage::Edit) .padding(10) - .style(style::Button::Icon), + .style(theme::Button::Text), ) .into() } @@ -313,7 +315,7 @@ impl Task { ) .on_press(TaskMessage::Delete) .padding(10) - .style(style::Button::Destructive), + .style(theme::Button::Destructive), ) .into() } @@ -328,9 +330,9 @@ fn view_controls(tasks: &[Task], current_filter: Filter) -> Element { let label = text(label).size(16); let button = button(label).style(if filter == current_filter { - style::Button::FilterSelected + theme::Button::Primary } else { - style::Button::FilterActive + theme::Button::Text }); button.on_press(Message::FilterChanged(filter)).padding(8) @@ -552,57 +554,3 @@ impl SavedState { Ok(()) } } - -mod style { - use iced::{button, Background, Color, Vector}; - - pub enum Button { - FilterActive, - FilterSelected, - Icon, - Destructive, - } - - impl button::StyleSheet for Button { - fn active(&self) -> button::Style { - match self { - Button::FilterActive => button::Style::default(), - Button::FilterSelected => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.2, 0.2, 0.7, - ))), - border_radius: 10.0, - text_color: Color::WHITE, - ..button::Style::default() - }, - Button::Icon => button::Style { - text_color: Color::from_rgb(0.5, 0.5, 0.5), - ..button::Style::default() - }, - Button::Destructive => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.8, 0.2, 0.2, - ))), - border_radius: 5.0, - text_color: Color::WHITE, - shadow_offset: Vector::new(1.0, 1.0), - ..button::Style::default() - }, - } - } - - fn hovered(&self) -> button::Style { - let active = self.active(); - - button::Style { - text_color: match self { - Button::Icon => Color::from_rgb(0.2, 0.2, 0.7), - Button::FilterActive => Color::from_rgb(0.2, 0.2, 0.7), - _ => active.text_color, - }, - shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0), - ..active - } - } - } -} diff --git a/examples/pure/tour/src/main.rs b/examples/pure/tour/src/main.rs index a44d99f3..2002ad98 100644 --- a/examples/pure/tour/src/main.rs +++ b/examples/pure/tour/src/main.rs @@ -5,6 +5,7 @@ use iced::pure::{ scrollable, slider, text, text_input, toggler, vertical_space, }; use iced::pure::{Element, Sandbox}; +use iced::theme; use iced::{Color, Length, Settings}; pub fn main() -> iced::Result { @@ -55,7 +56,7 @@ impl Sandbox for Tour { controls = controls.push( button("Back") .on_press(Message::BackPressed) - .style(style::Button::Secondary), + .style(theme::Button::Secondary), ); } @@ -65,7 +66,7 @@ impl Sandbox for Tour { controls = controls.push( button("Next") .on_press(Message::NextPressed) - .style(style::Button::Primary), + .style(theme::Button::Primary), ); } @@ -669,35 +670,3 @@ pub enum Layout { Row, Column, } - -mod style { - use iced::{button, 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 03eda9b162012c503ead649e5ccb95b7ef1d10ed Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 25 May 2022 05:01:18 +0200 Subject: Let a `Theme` control the background color of an application ... and remove `Application::background_color` --- examples/pure/game_of_life/src/main.rs | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index a3e46888..0eded2ce 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -12,7 +12,7 @@ use iced::pure::{Application, Element}; use iced::theme::{self, Theme}; use iced::time; use iced::window; -use iced::{Alignment, Color, Command, Length, Settings, Subscription}; +use iced::{Alignment, Command, Length, Settings, Subscription}; use preset::Preset; use std::time::{Duration, Instant}; @@ -71,10 +71,6 @@ impl Application for GameOfLife { String::from("Game of Life - Iced") } - fn background_color(&self) -> Color { - style::BACKGROUND - } - fn update(&mut self, message: Message) -> Command { match message { Message::Grid(message, version) => { -- cgit From cf0230072c01ea9523f4d98a3656f5c975b3f347 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 23:07:34 +0200 Subject: Rename `Variant` to `Style` and `Style` to `Appearance` --- examples/pure/component/src/main.rs | 4 ---- 1 file changed, 4 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs index 2f98f768..2c065231 100644 --- a/examples/pure/component/src/main.rs +++ b/examples/pure/component/src/main.rs @@ -90,8 +90,6 @@ mod numeric_input { where Renderer: text::Renderer + 'static, Renderer::Theme: widget::button::StyleSheet, - ::Variant: - Default + Copy, { type State = (); type Event = Event; @@ -163,8 +161,6 @@ mod numeric_input { Message: 'a, Renderer: 'static + text::Renderer, Renderer::Theme: widget::button::StyleSheet, - ::Variant: - Default + Copy, { fn from(numeric_input: NumericInput) -> Self { pure::component(numeric_input) -- cgit From d5bc610d0139fb331a59fc904a932d156f637391 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 23:12:11 +0200 Subject: Fix examples and doc-tests --- examples/pure/game_of_life/src/main.rs | 5 +-- examples/pure/game_of_life/src/style.rs | 54 +-------------------------------- examples/pure/tour/src/main.rs | 4 +-- 3 files changed, 4 insertions(+), 59 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index 0eded2ce..87c7a204 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -178,10 +178,7 @@ fn view_controls<'a>( .width(Length::Fill) .align_items(Alignment::Center) .spacing(10) - .push( - slider(1.0..=1000.0, speed as f32, Message::SpeedChanged) - .style(style::Slider), - ) + .push(slider(1.0..=1000.0, speed as f32, Message::SpeedChanged)) .push(text(format!("x{}", speed)).size(16)); row() diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs index dbd70c26..773b88eb 100644 --- a/examples/pure/game_of_life/src/style.rs +++ b/examples/pure/game_of_life/src/style.rs @@ -1,16 +1,4 @@ -use iced::{container, pick_list, slider, Color}; - -const ACTIVE: Color = Color::from_rgb( - 0x72 as f32 / 255.0, - 0x89 as f32 / 255.0, - 0xDA as f32 / 255.0, -); - -const HOVERED: Color = Color::from_rgb( - 0x67 as f32 / 255.0, - 0x7B as f32 / 255.0, - 0xC4 as f32 / 255.0, -); +use iced::{container, pick_list, Color}; pub const BACKGROUND: Color = Color::from_rgb( 0x2F as f32 / 255.0, @@ -29,46 +17,6 @@ impl container::StyleSheet for Container { } } -pub struct Slider; - -impl slider::StyleSheet for Slider { - fn active(&self) -> slider::Style { - slider::Style { - rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }), - handle: slider::Handle { - shape: slider::HandleShape::Circle { radius: 9.0 }, - color: ACTIVE, - border_width: 0.0, - border_color: Color::TRANSPARENT, - }, - } - } - - fn hovered(&self) -> slider::Style { - let active = self.active(); - - slider::Style { - handle: slider::Handle { - color: HOVERED, - ..active.handle - }, - ..active - } - } - - fn dragging(&self) -> slider::Style { - let active = self.active(); - - slider::Style { - handle: slider::Handle { - color: Color::from_rgb(0.85, 0.85, 0.85), - ..active.handle - }, - ..active - } - } -} - pub struct PickList; impl pick_list::StyleSheet for PickList { diff --git a/examples/pure/tour/src/main.rs b/examples/pure/tour/src/main.rs index 2002ad98..700e4216 100644 --- a/examples/pure/tour/src/main.rs +++ b/examples/pure/tour/src/main.rs @@ -6,7 +6,7 @@ use iced::pure::{ }; use iced::pure::{Element, Sandbox}; use iced::theme; -use iced::{Color, Length, Settings}; +use iced::{Color, Length, Renderer, Settings}; pub fn main() -> iced::Result { env_logger::init(); @@ -622,7 +622,7 @@ fn button<'a, Message: Clone>(label: &str) -> Button<'a, Message> { fn color_slider<'a>( component: f32, update: impl Fn(f32) -> Color + 'a, -) -> Slider<'a, f64, StepMessage> { +) -> Slider<'a, f64, StepMessage, Renderer> { slider(0.0..=1.0, f64::from(component), move |c| { StepMessage::TextColorChanged(update(c as f32)) }) -- cgit From ce53d3933c860cd958636cce415ac97c04aee746 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 01:11:35 +0200 Subject: Implement theme styling for `TextInput` --- examples/pure/component/src/main.rs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs index 2c065231..31592dbf 100644 --- a/examples/pure/component/src/main.rs +++ b/examples/pure/component/src/main.rs @@ -89,7 +89,8 @@ mod numeric_input { impl Component for NumericInput where Renderer: text::Renderer + 'static, - Renderer::Theme: widget::button::StyleSheet, + Renderer::Theme: + widget::button::StyleSheet + widget::text_input::StyleSheet, { type State = (); type Event = Event; @@ -160,7 +161,8 @@ mod numeric_input { where Message: 'a, Renderer: 'static + text::Renderer, - Renderer::Theme: widget::button::StyleSheet, + Renderer::Theme: + widget::button::StyleSheet + widget::text_input::StyleSheet, { fn from(numeric_input: NumericInput) -> Self { pure::component(numeric_input) -- cgit From 97555e67af8b4bcc77df69c5e72156e14948150e Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 04:11:24 +0200 Subject: Implement theme styling for `Container` --- examples/pure/game_of_life/src/main.rs | 1 - examples/pure/game_of_life/src/style.rs | 13 +----- examples/pure/pane_grid/src/main.rs | 74 ++++++++++++++++----------------- examples/pure/tooltip/src/main.rs | 27 +++--------- 4 files changed, 41 insertions(+), 74 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index 87c7a204..4db9fbc7 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -151,7 +151,6 @@ impl Application for GameOfLife { container(content) .width(Length::Fill) .height(Length::Fill) - .style(style::Container) .into() } } diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs index 773b88eb..d1ca5c9b 100644 --- a/examples/pure/game_of_life/src/style.rs +++ b/examples/pure/game_of_life/src/style.rs @@ -1,4 +1,4 @@ -use iced::{container, pick_list, Color}; +use iced::{pick_list, Color}; pub const BACKGROUND: Color = Color::from_rgb( 0x2F as f32 / 255.0, @@ -6,17 +6,6 @@ pub const BACKGROUND: Color = Color::from_rgb( 0x36 as f32 / 255.0, ); -pub struct Container; - -impl container::StyleSheet for Container { - fn style(&self) -> container::Style { - container::Style { - text_color: Some(Color::WHITE), - ..container::Style::default() - } - } -} - pub struct PickList; impl pick_list::StyleSheet for PickList { diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs index 2825a5c2..077e116b 100644 --- a/examples/pure/pane_grid/src/main.rs +++ b/examples/pure/pane_grid/src/main.rs @@ -179,9 +179,9 @@ impl Application for Example { .controls(view_controls(id, total_panes, pane.is_pinned)) .padding(10) .style(if is_focused { - style::TitleBar::Focused + style::title_bar_focused } else { - style::TitleBar::Active + style::title_bar_active }); pane_grid::Content::new(responsive(move |size| { @@ -189,9 +189,9 @@ impl Application for Example { })) .title_bar(title_bar) .style(if is_focused { - style::Pane::Focused + style::pane_focused } else { - style::Pane::Active + style::pane_active }) }) .width(Length::Fill) @@ -323,51 +323,47 @@ fn view_controls<'a>( } mod style { - use iced::{container, Background, Color}; + use iced::{container, Theme}; - const SURFACE: Color = Color::from_rgb( - 0xF2 as f32 / 255.0, - 0xF3 as f32 / 255.0, - 0xF5 as f32 / 255.0, - ); + pub fn title_bar_active(theme: &Theme) -> container::Appearance { + let palette = theme.extended_palette(); - pub enum TitleBar { - Active, - Focused, + container::Appearance { + text_color: Some(palette.background.strong.text), + background: Some(palette.background.strong.color.into()), + ..Default::default() + } } - impl container::StyleSheet for TitleBar { - fn style(&self) -> container::Style { - let pane = match self { - Self::Active => Pane::Active, - Self::Focused => Pane::Focused, - } - .style(); + pub fn title_bar_focused(theme: &Theme) -> container::Appearance { + let palette = theme.extended_palette(); - container::Style { - text_color: Some(Color::WHITE), - background: Some(pane.border_color.into()), - ..Default::default() - } + container::Appearance { + text_color: Some(palette.primary.strong.text), + background: Some(palette.primary.strong.color.into()), + ..Default::default() } } - pub enum Pane { - Active, - Focused, + pub fn pane_active(theme: &Theme) -> container::Appearance { + let palette = theme.extended_palette(); + + container::Appearance { + background: Some(palette.background.weak.color.into()), + border_width: 2.0, + border_color: palette.background.strong.color, + ..Default::default() + } } - impl container::StyleSheet for Pane { - fn style(&self) -> container::Style { - container::Style { - background: Some(Background::Color(SURFACE)), - border_width: 2.0, - border_color: match self { - Self::Active => Color::from_rgb(0.7, 0.7, 0.7), - Self::Focused => Color::BLACK, - }, - ..Default::default() - } + pub fn pane_focused(theme: &Theme) -> container::Appearance { + let palette = theme.extended_palette(); + + container::Appearance { + background: Some(palette.background.weak.color.into()), + border_width: 2.0, + border_color: palette.primary.strong.color, + ..Default::default() } } } diff --git a/examples/pure/tooltip/src/main.rs b/examples/pure/tooltip/src/main.rs index dbd83f5f..e9a6c111 100644 --- a/examples/pure/tooltip/src/main.rs +++ b/examples/pure/tooltip/src/main.rs @@ -1,6 +1,7 @@ -use iced::pure::{ - button, container, tooltip, widget::tooltip::Position, Element, Sandbox, -}; +use iced::pure::widget::tooltip::Position; +use iced::pure::{button, container, tooltip}; +use iced::pure::{Element, Sandbox}; +use iced::theme; use iced::{Length, Settings}; pub fn main() -> iced::Result { @@ -53,7 +54,7 @@ impl Sandbox for Example { self.position, ) .gap(10) - .style(style::Tooltip); + .style(theme::Container::Box); container(tooltip) .width(Length::Fill) @@ -73,21 +74,3 @@ fn position_to_text<'a>(position: Position) -> &'a str { Position::Right => "Right", } } - -mod style { - use iced::container; - use iced::Color; - - pub struct Tooltip; - - impl container::StyleSheet for Tooltip { - fn style(&self) -> container::Style { - container::Style { - text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)), - background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()), - border_radius: 12.0, - ..container::Style::default() - } - } - } -} -- cgit From 396735b682433928f52ba777891e14f2fbc703c7 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 04:51:44 +0200 Subject: Implement theme styling for `PickList` and `Menu` --- examples/pure/game_of_life/src/main.rs | 4 +-- examples/pure/game_of_life/src/style.rs | 56 --------------------------------- 2 files changed, 1 insertion(+), 59 deletions(-) delete mode 100644 examples/pure/game_of_life/src/style.rs (limited to 'examples/pure') diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index 4db9fbc7..58528b96 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -1,7 +1,6 @@ //! This example showcases an interactive version of the Game of Life, invented //! by John Conway. It leverages a `Canvas` together with other widgets. mod preset; -mod style; use grid::Grid; use iced::executor; @@ -195,8 +194,7 @@ fn view_controls<'a>( .push( pick_list(preset::ALL, Some(preset), Message::PresetPicked) .padding(8) - .text_size(16) - .style(style::PickList), + .text_size(16), ) .push( button("Clear") diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs deleted file mode 100644 index d1ca5c9b..00000000 --- a/examples/pure/game_of_life/src/style.rs +++ /dev/null @@ -1,56 +0,0 @@ -use iced::{pick_list, Color}; - -pub const BACKGROUND: Color = Color::from_rgb( - 0x2F as f32 / 255.0, - 0x31 as f32 / 255.0, - 0x36 as f32 / 255.0, -); - -pub struct PickList; - -impl pick_list::StyleSheet for PickList { - fn menu(&self) -> pick_list::Menu { - pick_list::Menu { - text_color: Color::WHITE, - background: BACKGROUND.into(), - border_width: 1.0, - border_color: Color { - a: 0.7, - ..Color::BLACK - }, - selected_background: Color { - a: 0.5, - ..Color::BLACK - } - .into(), - selected_text_color: Color::WHITE, - } - } - - fn active(&self) -> pick_list::Style { - pick_list::Style { - text_color: Color::WHITE, - background: BACKGROUND.into(), - border_width: 1.0, - border_color: Color { - a: 0.6, - ..Color::BLACK - }, - border_radius: 2.0, - icon_size: 0.5, - ..pick_list::Style::default() - } - } - - fn hovered(&self) -> pick_list::Style { - let active = self.active(); - - pick_list::Style { - border_color: Color { - a: 0.9, - ..Color::BLACK - }, - ..active - } - } -} -- cgit From f92afa795062cf38f0f99d0a1545a990ed35b09c Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 04:57:10 +0200 Subject: Use `Theme::Dark` in `pure_game_of_life` example --- examples/pure/game_of_life/src/main.rs | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'examples/pure') diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index 58528b96..2af139e8 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -152,6 +152,10 @@ impl Application for GameOfLife { .height(Length::Fill) .into() } + + fn theme(&self) -> Theme { + Theme::Dark + } } fn view_controls<'a>( -- cgit From fc13bb3d65c85cfad9f231c0776d3a45f4fbf480 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 05:24:43 +0200 Subject: Implement theme styling for `Canvas` --- examples/pure/game_of_life/src/main.rs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs index 2af139e8..851fbd47 100644 --- a/examples/pure/game_of_life/src/main.rs +++ b/examples/pure/game_of_life/src/main.rs @@ -3,6 +3,8 @@ mod preset; use grid::Grid; +use preset::Preset; + use iced::executor; use iced::pure::{ button, checkbox, column, container, pick_list, row, slider, text, @@ -12,7 +14,6 @@ use iced::theme::{self, Theme}; use iced::time; use iced::window; use iced::{Alignment, Command, Length, Settings, Subscription}; -use preset::Preset; use std::time::{Duration, Instant}; pub fn main() -> iced::Result { @@ -216,7 +217,7 @@ mod grid { }; use iced::pure::Element; use iced::{ - alignment, mouse, Color, Length, Point, Rectangle, Size, Vector, + alignment, mouse, Color, Length, Point, Rectangle, Size, Theme, Vector, }; use rustc_hash::{FxHashMap, FxHashSet}; use std::future::Future; @@ -525,6 +526,7 @@ mod grid { fn draw( &self, _interaction: &Interaction, + _theme: &Theme, bounds: Rectangle, cursor: Cursor, ) -> Vec { -- 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/pure/component/src/main.rs | 10 ++++++---- examples/pure/pane_grid/src/main.rs | 2 +- examples/pure/todos/src/main.rs | 6 +++--- examples/pure/tour/src/main.rs | 4 ++-- 4 files changed, 12 insertions(+), 10 deletions(-) (limited to 'examples/pure') diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs index 31592dbf..64935afd 100644 --- a/examples/pure/component/src/main.rs +++ b/examples/pure/component/src/main.rs @@ -89,8 +89,9 @@ mod numeric_input { impl Component for NumericInput where Renderer: text::Renderer + 'static, - Renderer::Theme: - widget::button::StyleSheet + widget::text_input::StyleSheet, + Renderer::Theme: widget::button::StyleSheet + + widget::text_input::StyleSheet + + widget::text::StyleSheet, { type State = (); type Event = Event; @@ -161,8 +162,9 @@ mod numeric_input { where Message: 'a, Renderer: 'static + text::Renderer, - Renderer::Theme: - widget::button::StyleSheet + widget::text_input::StyleSheet, + Renderer::Theme: widget::button::StyleSheet + + widget::text_input::StyleSheet + + widget::text::StyleSheet, { fn from(numeric_input: NumericInput) -> Self { pure::component(numeric_input) diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs index 077e116b..e85ed78d 100644 --- a/examples/pure/pane_grid/src/main.rs +++ b/examples/pure/pane_grid/src/main.rs @@ -168,7 +168,7 @@ impl Application for Example { let title = row() .push(pin_button) .push("Pane") - .push(text(pane.id.to_string()).color(if is_focused { + .push(text(pane.id.to_string()).style(if is_focused { PANE_ID_COLOR_FOCUSED } else { PANE_ID_COLOR_UNFOCUSED diff --git a/examples/pure/todos/src/main.rs b/examples/pure/todos/src/main.rs index ea772def..723386ad 100644 --- a/examples/pure/todos/src/main.rs +++ b/examples/pure/todos/src/main.rs @@ -6,7 +6,7 @@ use iced::pure::{ }; use iced::theme::{self, Theme}; use iced::window; -use iced::{Command, Font, Length, Settings}; +use iced::{Color, Command, Font, Length, Settings}; use serde::{Deserialize, Serialize}; pub fn main() -> iced::Result { @@ -155,7 +155,7 @@ impl Application for Todos { let title = text("todos") .width(Length::Fill) .size(100) - .color([0.5, 0.5, 0.5]) + .style(Color::from([0.5, 0.5, 0.5])) .horizontal_alignment(alignment::Horizontal::Center); let input = text_input( @@ -406,7 +406,7 @@ fn empty_message(message: &str) -> Element<'_, Message> { .width(Length::Fill) .size(25) .horizontal_alignment(alignment::Horizontal::Center) - .color([0.7, 0.7, 0.7]), + .style(Color::from([0.7, 0.7, 0.7])), ) .width(Length::Fill) .height(Length::Units(200)) diff --git a/examples/pure/tour/src/main.rs b/examples/pure/tour/src/main.rs index 700e4216..477a1ec7 100644 --- a/examples/pure/tour/src/main.rs +++ b/examples/pure/tour/src/main.rs @@ -433,7 +433,7 @@ impl<'a> Step { .padding(20) .spacing(20) .push("And its color:") - .push(text(format!("{:?}", color)).color(color)) + .push(text(format!("{:?}", color)).style(color)) .push(color_sliders); Self::container("Text") @@ -576,7 +576,7 @@ impl<'a> Step { .push(if cfg!(target_arch = "wasm32") { Element::new( text("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