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/pane_grid/src/main.rs | 84 ++++++------------------------------------ 1 file changed, 11 insertions(+), 73 deletions(-) (limited to 'examples/pane_grid/src/main.rs') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 2962ca25..4c955b6a 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -4,6 +4,7 @@ use iced::executor; use iced::keyboard; use iced::pane_grid::{self, PaneGrid}; use iced::scrollable::{self, Scrollable}; +use iced::theme::{self, Theme}; use iced::{ Application, Color, Column, Command, Container, Element, Length, Row, Settings, Size, Subscription, Text, @@ -36,6 +37,7 @@ enum Message { impl Application for Example { type Message = Message; + type Theme = Theme; type Executor = executor::Default; type Flags = (); @@ -171,7 +173,7 @@ impl Application for Example { let text = if *is_pinned { "Unpin" } else { "Pin" }; let pin_button = Button::new(pin_button, Text::new(text).size(14)) .on_press(Message::TogglePin(id)) - .style(style::Button::Pin) + .style(theme::Button::Secondary) .padding(3); let title = Row::with_children(vec![ @@ -309,7 +311,7 @@ impl Content { .. } = self; - let button = |state, label, message, style| { + let button = |state, label, message| { Button::new( state, Text::new(label) @@ -320,7 +322,6 @@ impl Content { .width(Length::Fill) .padding(8) .on_press(message) - .style(style) }; let mut controls = Column::new() @@ -330,22 +331,18 @@ impl Content { split_horizontally, "Split horizontally", Message::Split(pane_grid::Axis::Horizontal, pane), - style::Button::Primary, )) .push(button( split_vertically, "Split vertically", Message::Split(pane_grid::Axis::Vertical, pane), - style::Button::Primary, )); if total_panes > 1 && !is_pinned { - controls = controls.push(button( - close, - "Close", - Message::Close(pane), - style::Button::Destructive, - )); + controls = controls.push( + button(close, "Close", Message::Close(pane)) + .style(theme::Button::Destructive), + ); } let content = Scrollable::new(scroll) @@ -379,8 +376,9 @@ impl Controls { ) -> Element { let mut button = Button::new(&mut self.close, Text::new("Close").size(14)) - .style(style::Button::Control) + .style(theme::Button::Destructive) .padding(3); + if total_panes > 1 && !is_pinned { button = button.on_press(Message::Close(pane)); } @@ -389,8 +387,7 @@ impl Controls { } 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, @@ -398,18 +395,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, @@ -449,51 +434,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 - } - } - } } -- 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/pane_grid/src/main.rs | 74 ++++++++++++++++++++---------------------- 1 file changed, 35 insertions(+), 39 deletions(-) (limited to 'examples/pane_grid/src/main.rs') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 4c955b6a..fca1116e 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -193,9 +193,9 @@ impl Application for Example { .controls(pane.controls.view(id, total_panes, *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::new(responsive, move |size| { @@ -203,9 +203,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) @@ -387,51 +387,47 @@ impl Controls { } 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() } } } -- 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/pane_grid/src/main.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'examples/pane_grid/src/main.rs') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index fca1116e..5fbcea2c 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -180,7 +180,7 @@ impl Application for Example { pin_button.into(), Text::new("Pane").into(), Text::new(content.id.to_string()) - .color(if is_focused { + .style(if is_focused { PANE_ID_COLOR_FOCUSED } else { PANE_ID_COLOR_UNFOCUSED -- cgit