From c7b170da6d180f80e539910cccb543720fa3713c Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sun, 29 Dec 2019 10:57:01 +0100 Subject: Draft `Style` and `StyleSheet` for `Button` --- examples/pokedex.rs | 23 +++++++++++++++++++++-- examples/stopwatch.rs | 43 +++++++++++++++++++++++++++++++++---------- examples/todos.rs | 51 ++++++++++++++++++++++++++++++++++++++++++--------- examples/tour.rs | 47 ++++++++++++++++++++++++++++------------------- 4 files changed, 124 insertions(+), 40 deletions(-) (limited to 'examples') diff --git a/examples/pokedex.rs b/examples/pokedex.rs index 2d595ec4..0dcf6981 100644 --- a/examples/pokedex.rs +++ b/examples/pokedex.rs @@ -220,7 +220,26 @@ impl From for Error { fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> { Button::new(state, Text::new(text).color(Color::WHITE)) - .background(Color::from_rgb(0.11, 0.42, 0.87)) - .border_radius(10) .padding(10) + .style(style::Button::Primary) +} + +mod style { + use iced::{button, Background, Color}; + + pub enum Button { + Primary, + } + + 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), + })), + border_radius: 12, + shadow_offset: 1.0, + } + } + } } diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs index 7a7f0793..0e0cdba5 100644 --- a/examples/stopwatch.rs +++ b/examples/stopwatch.rs @@ -1,7 +1,6 @@ use iced::{ - button, Align, Application, Background, Button, Color, Column, Command, - Container, Element, HorizontalAlignment, Length, Row, Settings, - Subscription, Text, + button, Align, Application, Button, Color, Column, Command, Container, + Element, HorizontalAlignment, Length, Row, Settings, Subscription, Text, }; use std::time::{Duration, Instant}; @@ -99,7 +98,7 @@ impl Application for Stopwatch { .width(Length::Shrink) .size(40); - let button = |state, label, color: [f32; 3]| { + let button = |state, label, style| { Button::new( state, Text::new(label) @@ -107,22 +106,22 @@ impl Application for Stopwatch { .horizontal_alignment(HorizontalAlignment::Center), ) .min_width(80) - .background(Background::Color(color.into())) - .border_radius(10) .padding(10) + .style(style) }; let toggle_button = { let (label, color) = match self.state { - State::Idle => ("Start", [0.11, 0.42, 0.87]), - State::Ticking { .. } => ("Stop", [0.9, 0.4, 0.4]), + State::Idle => ("Start", style::Button::Primary), + State::Ticking { .. } => ("Stop", style::Button::Destructive), }; button(&mut self.toggle, label, color).on_press(Message::Toggle) }; - let reset_button = button(&mut self.reset, "Reset", [0.7, 0.7, 0.7]) - .on_press(Message::Reset); + let reset_button = + button(&mut self.reset, "Reset", style::Button::Secondary) + .on_press(Message::Reset); let controls = Row::new() .width(Length::Shrink) @@ -180,3 +179,27 @@ mod time { } } } + +mod style { + use iced::{button, Background, Color}; + + pub enum Button { + Primary, + Secondary, + Destructive, + } + + 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), + Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2), + })), + border_radius: 12, + shadow_offset: 1.0, + } + } + } +} diff --git a/examples/todos.rs b/examples/todos.rs index 42e88f65..00edd7fb 100644 --- a/examples/todos.rs +++ b/examples/todos.rs @@ -296,7 +296,8 @@ impl Task { edit_icon().color([0.5, 0.5, 0.5]), ) .on_press(TaskMessage::Edit) - .padding(10), + .padding(10) + .style(style::Button::NoBackground), ) .into() } @@ -331,8 +332,7 @@ impl Task { ) .on_press(TaskMessage::Delete) .padding(10) - .border_radius(5) - .background(Color::from_rgb(0.8, 0.2, 0.2)), + .style(style::Button::Destructive), ) .into() } @@ -361,15 +361,12 @@ impl Controls { let label = Text::new(label).size(16).width(Length::Shrink); let button = if filter == current_filter { Button::new(state, label.color(Color::WHITE)) - .background(Color::from_rgb(0.2, 0.2, 0.7)) + .style(style::Button::FilterSelected) } else { - Button::new(state, label) + Button::new(state, label).style(style::Button::NoBackground) }; - button - .on_press(Message::FilterChanged(filter)) - .padding(8) - .border_radius(10) + button.on_press(Message::FilterChanged(filter)).padding(8) }; Row::new() @@ -562,3 +559,39 @@ impl SavedState { Ok(()) } } + +mod style { + use iced::{button, Background, Color}; + + pub enum Button { + FilterSelected, + NoBackground, + Destructive, + } + + impl button::StyleSheet for Button { + fn active(&self) -> button::Style { + match self { + Button::FilterSelected => button::Style { + background: Some(Background::Color(Color::from_rgb( + 0.2, 0.2, 0.7, + ))), + border_radius: 10, + shadow_offset: 0.0, + }, + Button::NoBackground => button::Style { + background: None, + border_radius: 0, + shadow_offset: 0.0, + }, + Button::Destructive => button::Style { + background: Some(Background::Color(Color::from_rgb( + 0.8, 0.2, 0.2, + ))), + border_radius: 5, + shadow_offset: 1.0, + }, + } + } + } +} diff --git a/examples/tour.rs b/examples/tour.rs index da05b396..402bf1c4 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -62,8 +62,9 @@ impl Sandbox for Tour { if steps.has_previous() { controls = controls.push( - secondary_button(back_button, "Back") - .on_press(Message::BackPressed), + button(back_button, "Back") + .on_press(Message::BackPressed) + .style(style::Button::Secondary), ); } @@ -71,8 +72,9 @@ impl Sandbox for Tour { if steps.can_continue() { controls = controls.push( - primary_button(next_button, "Next") - .on_press(Message::NextPressed), + button(next_button, "Next") + .on_press(Message::NextPressed) + .style(style::Button::Primary), ); } @@ -697,24 +699,9 @@ fn button<'a, Message>( .horizontal_alignment(HorizontalAlignment::Center), ) .padding(12) - .border_radius(12) .min_width(100) } -fn primary_button<'a, Message>( - state: &'a mut button::State, - label: &str, -) -> Button<'a, Message> { - button(state, label).background(Color::from_rgb(0.11, 0.42, 0.87)) -} - -fn secondary_button<'a, Message>( - state: &'a mut button::State, - label: &str, -) -> Button<'a, Message> { - button(state, label).background(Color::from_rgb(0.4, 0.4, 0.4)) -} - #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Language { Rust, @@ -757,6 +744,28 @@ pub enum Layout { Column, } +mod style { + use iced::{button, Background, Color}; + + 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, + shadow_offset: 1.0, + } + } + } +} + // This should be gracefully handled by Iced in the future. Probably using our // own proc macro, or maybe the whole process is streamlined by `wasm-pack` at // some point. -- cgit From 8caa66be2708b1c83e20d905d69902c2567c4692 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 30 Dec 2019 12:14:26 +0100 Subject: Add `Renderer::Defaults` and style inheritance --- examples/custom_widget.rs | 3 +- examples/pokedex.rs | 7 ++-- examples/stopwatch.rs | 6 ++-- examples/todos.rs | 86 +++++++++++++++++++++++++++++------------------ examples/tour.rs | 13 +++++-- 5 files changed, 72 insertions(+), 43 deletions(-) (limited to 'examples') diff --git a/examples/custom_widget.rs b/examples/custom_widget.rs index cf2f7792..ca562ead 100644 --- a/examples/custom_widget.rs +++ b/examples/custom_widget.rs @@ -13,7 +13,7 @@ mod circle { layout, Background, Color, Element, Hasher, Layout, Length, MouseCursor, Point, Size, Widget, }; - use iced_wgpu::{Primitive, Renderer}; + use iced_wgpu::{Defaults, Primitive, Renderer}; pub struct Circle { radius: u16, @@ -54,6 +54,7 @@ mod circle { fn draw( &self, _renderer: &mut Renderer, + _defaults: &Defaults, layout: Layout<'_>, _cursor_position: Point, ) -> (Primitive, MouseCursor) { diff --git a/examples/pokedex.rs b/examples/pokedex.rs index 0dcf6981..35d38251 100644 --- a/examples/pokedex.rs +++ b/examples/pokedex.rs @@ -1,6 +1,6 @@ use iced::{ - button, image, Align, Application, Button, Color, Column, Command, - Container, Element, Image, Length, Row, Settings, Text, + button, image, Align, Application, Button, Column, Command, Container, + Element, Image, Length, Row, Settings, Text, }; pub fn main() { @@ -219,7 +219,7 @@ impl From for Error { } fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> { - Button::new(state, Text::new(text).color(Color::WHITE)) + Button::new(state, Text::new(text)) .padding(10) .style(style::Button::Primary) } @@ -239,6 +239,7 @@ mod style { })), border_radius: 12, shadow_offset: 1.0, + text_color: Color::WHITE, } } } diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs index 0e0cdba5..99746609 100644 --- a/examples/stopwatch.rs +++ b/examples/stopwatch.rs @@ -1,6 +1,6 @@ use iced::{ - button, Align, Application, Button, Color, Column, Command, Container, - Element, HorizontalAlignment, Length, Row, Settings, Subscription, Text, + button, Align, Application, Button, Column, Command, Container, Element, + HorizontalAlignment, Length, Row, Settings, Subscription, Text, }; use std::time::{Duration, Instant}; @@ -102,7 +102,6 @@ impl Application for Stopwatch { Button::new( state, Text::new(label) - .color(Color::WHITE) .horizontal_alignment(HorizontalAlignment::Center), ) .min_width(80) @@ -199,6 +198,7 @@ mod style { })), border_radius: 12, shadow_offset: 1.0, + text_color: Color::WHITE, } } } diff --git a/examples/todos.rs b/examples/todos.rs index 00edd7fb..ca20183f 100644 --- a/examples/todos.rs +++ b/examples/todos.rs @@ -1,7 +1,7 @@ use iced::{ button, scrollable, text_input, Align, Application, Button, Checkbox, - Color, Column, Command, Container, Element, Font, HorizontalAlignment, - Length, Row, Scrollable, Settings, Text, TextInput, + Column, Command, Container, Element, Font, HorizontalAlignment, Length, + Row, Scrollable, Settings, Text, TextInput, }; use serde::{Deserialize, Serialize}; @@ -291,13 +291,10 @@ impl Task { .align_items(Align::Center) .push(checkbox) .push( - Button::new( - edit_button, - edit_icon().color([0.5, 0.5, 0.5]), - ) - .on_press(TaskMessage::Edit) - .padding(10) - .style(style::Button::NoBackground), + Button::new(edit_button, edit_icon()) + .on_press(TaskMessage::Edit) + .padding(10) + .style(style::Button::Icon), ) .into() } @@ -321,14 +318,9 @@ impl Task { .push( Button::new( delete_button, - Row::new() - .spacing(10) - .push(delete_icon().color(Color::WHITE)) - .push( - Text::new("Delete") - .width(Length::Shrink) - .color(Color::WHITE), - ), + Row::new().spacing(10).push(delete_icon()).push( + Text::new("Delete").width(Length::Shrink), + ), ) .on_press(TaskMessage::Delete) .padding(10) @@ -359,12 +351,10 @@ impl Controls { let filter_button = |state, label, filter, current_filter| { let label = Text::new(label).size(16).width(Length::Shrink); - let button = if filter == current_filter { - Button::new(state, label.color(Color::WHITE)) - .style(style::Button::FilterSelected) - } else { - Button::new(state, label).style(style::Button::NoBackground) - }; + let button = + Button::new(state, label).style(style::Button::Filter { + selected: filter == current_filter, + }); button.on_press(Message::FilterChanged(filter)).padding(8) }; @@ -564,25 +554,38 @@ mod style { use iced::{button, Background, Color}; pub enum Button { - FilterSelected, - NoBackground, + Filter { selected: bool }, + Icon, Destructive, } impl button::StyleSheet for Button { fn active(&self) -> button::Style { match self { - Button::FilterSelected => button::Style { - background: Some(Background::Color(Color::from_rgb( - 0.2, 0.2, 0.7, - ))), - border_radius: 10, - shadow_offset: 0.0, - }, - Button::NoBackground => button::Style { + Button::Filter { selected } => { + if *selected { + button::Style { + background: Some(Background::Color( + Color::from_rgb(0.2, 0.2, 0.7), + )), + border_radius: 10, + shadow_offset: 0.0, + text_color: Color::WHITE, + } + } else { + button::Style { + background: None, + border_radius: 0, + shadow_offset: 0.0, + text_color: Color::BLACK, + } + } + } + Button::Icon => button::Style { background: None, border_radius: 0, shadow_offset: 0.0, + text_color: Color::from_rgb(0.5, 0.5, 0.5), }, Button::Destructive => button::Style { background: Some(Background::Color(Color::from_rgb( @@ -590,7 +593,24 @@ mod style { ))), border_radius: 5, shadow_offset: 1.0, + text_color: Color::WHITE, + }, + } + } + + 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::Filter { selected } if !selected => { + Color::from_rgb(0.2, 0.2, 0.7) + } + _ => active.text_color, }, + shadow_offset: active.shadow_offset + 1.0, + ..active } } } diff --git a/examples/tour.rs b/examples/tour.rs index 402bf1c4..2429ca4f 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -694,9 +694,7 @@ fn button<'a, Message>( ) -> Button<'a, Message> { Button::new( state, - Text::new(label) - .color(Color::WHITE) - .horizontal_alignment(HorizontalAlignment::Center), + Text::new(label).horizontal_alignment(HorizontalAlignment::Center), ) .padding(12) .min_width(100) @@ -761,6 +759,15 @@ mod style { })), border_radius: 12, shadow_offset: 1.0, + text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE), + } + } + + fn hovered(&self) -> button::Style { + button::Style { + text_color: Color::WHITE, + shadow_offset: 2.0, + ..self.active() } } } -- cgit From 9ab7c47dc7d834ee73bc068f9f34eea4d6946436 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 31 Dec 2019 21:35:42 +0100 Subject: Add `border_width` and `border_color` to `Quad` --- examples/custom_widget.rs | 2 ++ examples/tour.rs | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'examples') diff --git a/examples/custom_widget.rs b/examples/custom_widget.rs index ca562ead..1f51ee54 100644 --- a/examples/custom_widget.rs +++ b/examples/custom_widget.rs @@ -63,6 +63,8 @@ mod circle { bounds: layout.bounds(), background: Background::Color(Color::BLACK), border_radius: self.radius, + border_width: 0, + border_color: Color::TRANSPARENT, }, MouseCursor::OutOfBounds, ) diff --git a/examples/tour.rs b/examples/tour.rs index c7f866e8..d006d397 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -27,7 +27,7 @@ impl Sandbox for Tour { scroll: scrollable::State::new(), back_button: button::State::new(), next_button: button::State::new(), - debug: false, + debug: true, } } -- cgit From 1a0effa961344677daf17b4192243423a154f1bf Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sun, 5 Jan 2020 19:29:12 +0100 Subject: Add border and shadow styling to `Button` --- examples/pokedex.rs | 5 +++-- examples/stopwatch.rs | 5 +++-- examples/todos.rs | 20 +++++++------------- examples/tour.rs | 9 +++++---- 4 files changed, 18 insertions(+), 21 deletions(-) (limited to 'examples') diff --git a/examples/pokedex.rs b/examples/pokedex.rs index 35d38251..2a696ffe 100644 --- a/examples/pokedex.rs +++ b/examples/pokedex.rs @@ -225,7 +225,7 @@ fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> { } mod style { - use iced::{button, Background, Color}; + use iced::{button, Background, Color, Vector}; pub enum Button { Primary, @@ -238,8 +238,9 @@ mod style { Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), })), border_radius: 12, - shadow_offset: 1.0, + shadow_offset: Vector::new(1.0, 1.0), text_color: Color::WHITE, + ..button::Style::default() } } } diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs index 99746609..9b69f7ca 100644 --- a/examples/stopwatch.rs +++ b/examples/stopwatch.rs @@ -180,7 +180,7 @@ mod time { } mod style { - use iced::{button, Background, Color}; + use iced::{button, Background, Color, Vector}; pub enum Button { Primary, @@ -197,8 +197,9 @@ mod style { Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2), })), border_radius: 12, - shadow_offset: 1.0, + shadow_offset: Vector::new(1.0, 1.0), text_color: Color::WHITE, + ..button::Style::default() } } } diff --git a/examples/todos.rs b/examples/todos.rs index ca20183f..1563aad5 100644 --- a/examples/todos.rs +++ b/examples/todos.rs @@ -551,7 +551,7 @@ impl SavedState { } mod style { - use iced::{button, Background, Color}; + use iced::{button, Background, Color, Vector}; pub enum Button { Filter { selected: bool }, @@ -569,31 +569,25 @@ mod style { Color::from_rgb(0.2, 0.2, 0.7), )), border_radius: 10, - shadow_offset: 0.0, text_color: Color::WHITE, + ..button::Style::default() } } else { - button::Style { - background: None, - border_radius: 0, - shadow_offset: 0.0, - text_color: Color::BLACK, - } + button::Style::default() } } Button::Icon => button::Style { - background: None, - border_radius: 0, - shadow_offset: 0.0, 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, - shadow_offset: 1.0, text_color: Color::WHITE, + shadow_offset: Vector::new(1.0, 1.0), + ..button::Style::default() }, } } @@ -609,7 +603,7 @@ mod style { } _ => active.text_color, }, - shadow_offset: active.shadow_offset + 1.0, + shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0), ..active } } diff --git a/examples/tour.rs b/examples/tour.rs index d006d397..84e5d516 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -27,7 +27,7 @@ impl Sandbox for Tour { scroll: scrollable::State::new(), back_button: button::State::new(), next_button: button::State::new(), - debug: true, + debug: false, } } @@ -743,7 +743,7 @@ pub enum Layout { } mod style { - use iced::{button, Background, Color}; + use iced::{button, Background, Color, Vector}; pub enum Button { Primary, @@ -758,15 +758,16 @@ mod style { Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5), })), border_radius: 12, - shadow_offset: 1.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: 2.0, + shadow_offset: Vector::new(1.0, 2.0), ..self.active() } } -- cgit From 2bbd395d5dcdf9c92ffb354b8b05444478e4b344 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 6 Jan 2020 18:44:45 +0100 Subject: Draft `styling` example --- examples/styling.rs | 282 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 282 insertions(+) create mode 100644 examples/styling.rs (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs new file mode 100644 index 00000000..95590f2c --- /dev/null +++ b/examples/styling.rs @@ -0,0 +1,282 @@ +use iced::{ + button, text_input, Button, Column, Container, Element, Length, Radio, Row, + Sandbox, Settings, Text, TextInput, +}; + +pub fn main() { + Styling::run(Settings::default()) +} + +struct Styling { + theme: style::Theme, + input: text_input::State, + input_value: String, + button: button::State, +} + +#[derive(Debug, Clone)] +enum Message { + ThemeChanged(style::Theme), + InputChanged(String), + ButtonPressed, +} + +impl Sandbox for Styling { + type Message = Message; + + fn new() -> Self { + Styling { + theme: style::Theme::Light, + input: text_input::State::default(), + input_value: String::new(), + button: button::State::default(), + } + } + + fn title(&self) -> String { + String::from("Styling - Iced") + } + + fn update(&mut self, message: Message) { + match message { + Message::ThemeChanged(theme) => self.theme = theme, + Message::InputChanged(value) => self.input_value = value, + Message::ButtonPressed => (), + } + } + + fn view(&mut self) -> Element { + let choose_theme = style::Theme::ALL.iter().fold( + Column::new() + .width(Length::Shrink) + .spacing(10) + .push(Text::new("Choose a theme:").width(Length::Shrink)), + |column, theme| { + column.push(Radio::new( + *theme, + &format!("{:?}", theme), + Some(self.theme), + Message::ThemeChanged, + )) + }, + ); + + let text_input = TextInput::new( + &mut self.input, + "Type something...", + &self.input_value, + Message::InputChanged, + ) + .padding(10) + .size(20) + .style(self.theme); + + let button = Button::new(&mut self.button, Text::new("Submit")) + .padding(10) + .on_press(Message::ButtonPressed) + .style(self.theme); + + let content = Column::new() + .spacing(20) + .padding(20) + .max_width(600) + .push(choose_theme) + .push(Row::new().spacing(10).push(text_input).push(button)); + + Container::new(content) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .style(self.theme) + .into() + } +} + +mod style { + use iced::{button, container, text_input}; + + #[derive(Debug, Clone, Copy, PartialEq, Eq)] + pub enum Theme { + Light, + Dark, + } + + impl Theme { + pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark]; + } + + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => light::Container.into(), + Theme::Dark => dark::Container.into(), + } + } + } + + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => light::TextInput.into(), + Theme::Dark => dark::TextInput.into(), + } + } + } + + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => light::Button.into(), + Theme::Dark => dark::Button.into(), + } + } + } + + mod light { + use iced::{button, container, text_input, Background, Color, Vector}; + + pub struct Container; + + impl container::StyleSheet for Container { + fn style(&self) -> container::Style { + container::Style::default() + } + } + + pub struct TextInput; + + impl text_input::StyleSheet for TextInput { + fn active(&self) -> text_input::Style { + text_input::Style { + background: Background::Color(Color::WHITE), + border_radius: 5, + border_width: 1, + border_color: Color::from_rgb(0.7, 0.7, 0.7), + } + } + + fn focused(&self) -> text_input::Style { + text_input::Style { + border_width: 1, + border_color: Color::from_rgb(0.5, 0.5, 0.5), + ..self.active() + } + } + + fn placeholder_color(&self) -> Color { + Color::from_rgb(0.7, 0.7, 0.7) + } + + fn value_color(&self) -> Color { + Color::from_rgb(0.3, 0.3, 0.3) + } + } + + pub struct Button; + + impl button::StyleSheet for Button { + fn active(&self) -> button::Style { + button::Style { + background: Some(Background::Color(Color::from_rgb( + 0.11, 0.42, 0.87, + ))), + border_radius: 12, + 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() + } + } + } + } + + mod dark { + use iced::{button, container, text_input, Background, Color}; + + pub struct Container; + + impl container::StyleSheet for Container { + fn style(&self) -> container::Style { + container::Style { + background: Some(Background::Color(Color::from_rgb8( + 0x36, 0x39, 0x3F, + ))), + text_color: Some(Color::WHITE), + ..container::Style::default() + } + } + } + + pub struct TextInput; + + impl text_input::StyleSheet for TextInput { + fn active(&self) -> text_input::Style { + text_input::Style { + background: Background::Color(Color::from_rgb8( + 0x40, 0x44, 0x4B, + )), + border_radius: 2, + border_width: 0, + border_color: Color::TRANSPARENT, + } + } + + fn focused(&self) -> text_input::Style { + text_input::Style { + border_width: 1, + border_color: Color::from_rgb8(0x6F, 0xFF, 0xE9), + ..self.active() + } + } + + fn hovered(&self) -> text_input::Style { + text_input::Style { + border_width: 1, + border_color: Color::from_rgb8(0x5B, 0xC0, 0xBE), + ..self.focused() + } + } + + fn placeholder_color(&self) -> Color { + Color::from_rgb(0.7, 0.7, 0.7) + } + + fn value_color(&self) -> Color { + Color::WHITE + } + } + + pub struct Button; + + impl button::StyleSheet for Button { + fn active(&self) -> button::Style { + button::Style { + background: Some(Background::Color(Color::from_rgb8( + 0x72, 0x89, 0xDA, + ))), + border_radius: 3, + text_color: Color::WHITE, + ..button::Style::default() + } + } + + fn hovered(&self) -> button::Style { + button::Style { + background: Some(Background::Color(Color::from_rgb8( + 0x67, 0x7B, 0xC4, + ))), + text_color: Color::WHITE, + ..self.active() + } + } + } + } +} -- cgit From fbc25f8d3d94be148663dbbe1de6ceb9c162b308 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 6 Jan 2020 18:46:47 +0100 Subject: Implement `Default` for `Theme` in `styling` example --- examples/styling.rs | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index 95590f2c..9f8cc53f 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -7,6 +7,7 @@ pub fn main() { Styling::run(Settings::default()) } +#[derive(Default)] struct Styling { theme: style::Theme, input: text_input::State, @@ -25,12 +26,7 @@ impl Sandbox for Styling { type Message = Message; fn new() -> Self { - Styling { - theme: style::Theme::Light, - input: text_input::State::default(), - input_value: String::new(), - button: button::State::default(), - } + Styling::default() } fn title(&self) -> String { @@ -106,6 +102,12 @@ mod style { pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark]; } + impl Default for Theme { + fn default() -> Theme { + Theme::Light + } + } + impl From for Box { fn from(theme: Theme) -> Self { match theme { -- cgit From f7dfd6537429f94af63d75617c27bc998d72d9c8 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 6 Jan 2020 19:05:00 +0100 Subject: Use default styles in `styling` example --- examples/styling.rs | 48 ++++-------------------------------------------- 1 file changed, 4 insertions(+), 44 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index 9f8cc53f..c368ea07 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -43,10 +43,7 @@ impl Sandbox for Styling { fn view(&mut self) -> Element { let choose_theme = style::Theme::ALL.iter().fold( - Column::new() - .width(Length::Shrink) - .spacing(10) - .push(Text::new("Choose a theme:").width(Length::Shrink)), + Column::new().spacing(10).push(Text::new("Choose a theme:")), |column, theme| { column.push(Radio::new( *theme, @@ -111,7 +108,7 @@ mod style { impl From for Box { fn from(theme: Theme) -> Self { match theme { - Theme::Light => light::Container.into(), + Theme::Light => Default::default(), Theme::Dark => dark::Container.into(), } } @@ -120,7 +117,7 @@ mod style { impl From for Box { fn from(theme: Theme) -> Self { match theme { - Theme::Light => light::TextInput.into(), + Theme::Light => Default::default(), Theme::Dark => dark::TextInput.into(), } } @@ -136,44 +133,7 @@ mod style { } mod light { - use iced::{button, container, text_input, Background, Color, Vector}; - - pub struct Container; - - impl container::StyleSheet for Container { - fn style(&self) -> container::Style { - container::Style::default() - } - } - - pub struct TextInput; - - impl text_input::StyleSheet for TextInput { - fn active(&self) -> text_input::Style { - text_input::Style { - background: Background::Color(Color::WHITE), - border_radius: 5, - border_width: 1, - border_color: Color::from_rgb(0.7, 0.7, 0.7), - } - } - - fn focused(&self) -> text_input::Style { - text_input::Style { - border_width: 1, - border_color: Color::from_rgb(0.5, 0.5, 0.5), - ..self.active() - } - } - - fn placeholder_color(&self) -> Color { - Color::from_rgb(0.7, 0.7, 0.7) - } - - fn value_color(&self) -> Color { - Color::from_rgb(0.3, 0.3, 0.3) - } - } + use iced::{button, Background, Color, Vector}; pub struct Button; -- cgit From d0dc7cebf9c352f4d14827fe47489788f59e61a1 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 6 Jan 2020 21:01:09 +0100 Subject: Implement styling for `Scrollable` --- examples/styling.rs | 63 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 57 insertions(+), 6 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index c368ea07..61c8bcba 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -1,6 +1,6 @@ use iced::{ - button, text_input, Button, Column, Container, Element, Length, Radio, Row, - Sandbox, Settings, Text, TextInput, + button, scrollable, text_input, Button, Column, Container, Element, Length, + Radio, Row, Sandbox, Scrollable, Settings, Text, TextInput, }; pub fn main() { @@ -10,6 +10,7 @@ pub fn main() { #[derive(Default)] struct Styling { theme: style::Theme, + scroll: scrollable::State, input: text_input::State, input_value: String, button: button::State, @@ -76,10 +77,13 @@ impl Sandbox for Styling { .push(choose_theme) .push(Row::new().spacing(10).push(text_input).push(button)); - Container::new(content) + let scrollable = Scrollable::new(&mut self.scroll) + .style(self.theme) + .push(Container::new(content).width(Length::Fill).center_x()); + + Container::new(scrollable) .width(Length::Fill) .height(Length::Fill) - .center_x() .center_y() .style(self.theme) .into() @@ -87,7 +91,7 @@ impl Sandbox for Styling { } mod style { - use iced::{button, container, text_input}; + use iced::{button, container, scrollable, text_input}; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -132,6 +136,15 @@ mod style { } } + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Scrollable.into(), + } + } + } + mod light { use iced::{button, Background, Color, Vector}; @@ -161,7 +174,9 @@ mod style { } mod dark { - use iced::{button, container, text_input, Background, Color}; + use iced::{ + button, container, scrollable, text_input, Background, Color, + }; pub struct Container; @@ -239,6 +254,42 @@ mod style { ..self.active() } } + + fn pressed(&self) -> button::Style { + button::Style { + border_width: 1, + border_color: Color::WHITE, + ..self.hovered() + } + } + } + + pub struct Scrollable; + + impl scrollable::StyleSheet for Scrollable { + fn active(&self) -> scrollable::Scrollbar { + scrollable::Scrollbar { + background: None, + border_radius: 2, + border_width: 0, + border_color: Color::TRANSPARENT, + scroller: scrollable::Scroller { + color: [1.0, 1.0, 1.0, 0.7].into(), + border_radius: 2, + border_width: 1, + border_color: Color::WHITE, + }, + } + } + + fn hovered(&self) -> scrollable::Scrollbar { + scrollable::Scrollbar { + background: Some(Background::Color( + [1.0, 1.0, 1.0, 0.3].into(), + )), + ..self.active() + } + } } } } -- cgit From b329003c8fdcdc3378c8fda93af54be5686fc9ae Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 00:28:08 +0100 Subject: Implement styling for `Slider` --- examples/styling.rs | 75 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 70 insertions(+), 5 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index 61c8bcba..b0cdbcf0 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -1,6 +1,6 @@ use iced::{ - button, scrollable, text_input, Button, Column, Container, Element, Length, - Radio, Row, Sandbox, Scrollable, Settings, Text, TextInput, + button, scrollable, slider, text_input, Button, Column, Container, Element, + Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Text, TextInput, }; pub fn main() { @@ -14,6 +14,8 @@ struct Styling { input: text_input::State, input_value: String, button: button::State, + slider: slider::State, + slider_value: f32, } #[derive(Debug, Clone)] @@ -21,6 +23,7 @@ enum Message { ThemeChanged(style::Theme), InputChanged(String), ButtonPressed, + SliderChanged(f32), } impl Sandbox for Styling { @@ -39,6 +42,7 @@ impl Sandbox for Styling { Message::ThemeChanged(theme) => self.theme = theme, Message::InputChanged(value) => self.input_value = value, Message::ButtonPressed => (), + Message::SliderChanged(value) => self.slider_value = value, } } @@ -70,12 +74,21 @@ impl Sandbox for Styling { .on_press(Message::ButtonPressed) .style(self.theme); + let slider = Slider::new( + &mut self.slider, + 0.0..=100.0, + self.slider_value, + Message::SliderChanged, + ) + .style(self.theme); + let content = Column::new() .spacing(20) .padding(20) .max_width(600) .push(choose_theme) - .push(Row::new().spacing(10).push(text_input).push(button)); + .push(Row::new().spacing(10).push(text_input).push(button)) + .push(slider); let scrollable = Scrollable::new(&mut self.scroll) .style(self.theme) @@ -91,7 +104,7 @@ impl Sandbox for Styling { } mod style { - use iced::{button, container, scrollable, text_input}; + use iced::{button, container, scrollable, slider, text_input}; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -145,6 +158,15 @@ mod style { } } + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Slider.into(), + } + } + } + mod light { use iced::{button, Background, Color, Vector}; @@ -175,7 +197,8 @@ mod style { mod dark { use iced::{ - button, container, scrollable, text_input, Background, Color, + button, container, scrollable, slider, text_input, Background, + Color, }; pub struct Container; @@ -291,5 +314,47 @@ mod style { } } } + + pub struct Slider; + + impl slider::StyleSheet for Slider { + fn active(&self) -> slider::Style { + let blue = Color::from_rgb8(0x72, 0x89, 0xDA); + + slider::Style { + rail_colors: (blue, Color { a: 0.1, ..blue }), + handle: slider::Handle { + shape: slider::HandleShape::Circle { radius: 9 }, + color: blue, + border_width: 0, + border_color: Color::TRANSPARENT, + }, + } + } + + fn hovered(&self) -> slider::Style { + let active = self.active(); + + slider::Style { + handle: slider::Handle { + color: Color::from_rgb(0.90, 0.90, 0.90), + ..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 + } + } + } } } -- cgit From fce89d0ffe36111cdbf42480c28e67811afb42e6 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 01:17:32 +0100 Subject: Use constants for colors in `styling` example --- examples/styling.rs | 48 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 16 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index b0cdbcf0..215185e3 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -201,6 +201,30 @@ mod style { Color, }; + const SURFACE: Color = Color::from_rgb( + 0x40 as f32 / 255.0, + 0x44 as f32 / 255.0, + 0x4B as f32 / 255.0, + ); + + const ACCENT: Color = Color::from_rgb( + 0x6F as f32 / 255.0, + 0xFF as f32 / 255.0, + 0xE9 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 struct Container; impl container::StyleSheet for Container { @@ -220,9 +244,7 @@ mod style { impl text_input::StyleSheet for TextInput { fn active(&self) -> text_input::Style { text_input::Style { - background: Background::Color(Color::from_rgb8( - 0x40, 0x44, 0x4B, - )), + background: Background::Color(SURFACE), border_radius: 2, border_width: 0, border_color: Color::TRANSPARENT, @@ -232,7 +254,7 @@ mod style { fn focused(&self) -> text_input::Style { text_input::Style { border_width: 1, - border_color: Color::from_rgb8(0x6F, 0xFF, 0xE9), + border_color: ACCENT, ..self.active() } } @@ -240,7 +262,7 @@ mod style { fn hovered(&self) -> text_input::Style { text_input::Style { border_width: 1, - border_color: Color::from_rgb8(0x5B, 0xC0, 0xBE), + border_color: Color { a: 0.3, ..ACCENT }, ..self.focused() } } @@ -259,9 +281,7 @@ mod style { impl button::StyleSheet for Button { fn active(&self) -> button::Style { button::Style { - background: Some(Background::Color(Color::from_rgb8( - 0x72, 0x89, 0xDA, - ))), + background: Some(Background::Color(ACTIVE)), border_radius: 3, text_color: Color::WHITE, ..button::Style::default() @@ -270,9 +290,7 @@ mod style { fn hovered(&self) -> button::Style { button::Style { - background: Some(Background::Color(Color::from_rgb8( - 0x67, 0x7B, 0xC4, - ))), + background: Some(Background::Color(HOVERED)), text_color: Color::WHITE, ..self.active() } @@ -319,13 +337,11 @@ mod style { impl slider::StyleSheet for Slider { fn active(&self) -> slider::Style { - let blue = Color::from_rgb8(0x72, 0x89, 0xDA); - slider::Style { - rail_colors: (blue, Color { a: 0.1, ..blue }), + rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }), handle: slider::Handle { shape: slider::HandleShape::Circle { radius: 9 }, - color: blue, + color: ACTIVE, border_width: 0, border_color: Color::TRANSPARENT, }, @@ -337,7 +353,7 @@ mod style { slider::Style { handle: slider::Handle { - color: Color::from_rgb(0.90, 0.90, 0.90), + color: HOVERED, ..active.handle }, ..active -- cgit From 48b3b78a3840778eef1035f4585d5ba9dd3d6291 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 01:53:26 +0100 Subject: Implement styling for `ProgressBar` --- examples/progress_bar.rs | 14 ++------------ examples/styling.rs | 40 ++++++++++++++++++++++++++++++++++------ 2 files changed, 36 insertions(+), 18 deletions(-) (limited to 'examples') diff --git a/examples/progress_bar.rs b/examples/progress_bar.rs index 901428de..43b09928 100644 --- a/examples/progress_bar.rs +++ b/examples/progress_bar.rs @@ -1,7 +1,4 @@ -use iced::{ - slider, Background, Color, Column, Element, Length, ProgressBar, Sandbox, - Settings, Slider, -}; +use iced::{slider, Column, Element, ProgressBar, Sandbox, Settings, Slider}; pub fn main() { Progress::run(Settings::default()) @@ -38,14 +35,7 @@ impl Sandbox for Progress { fn view(&mut self) -> Element { Column::new() .padding(20) - .push( - ProgressBar::new(0.0..=100.0, self.value) - .background(Background::Color(Color::from_rgb( - 0.6, 0.6, 0.6, - ))) - .active_color(Color::from_rgb(0.0, 0.95, 0.0)) - .height(Length::Units(30)), - ) + .push(ProgressBar::new(0.0..=100.0, self.value)) .push(Slider::new( &mut self.progress_bar_slider, 0.0..=100.0, diff --git a/examples/styling.rs b/examples/styling.rs index 215185e3..426e0638 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -1,6 +1,7 @@ use iced::{ button, scrollable, slider, text_input, Button, Column, Container, Element, - Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Text, TextInput, + Length, ProgressBar, Radio, Row, Sandbox, Scrollable, Settings, Slider, + Text, TextInput, }; pub fn main() { @@ -82,13 +83,17 @@ impl Sandbox for Styling { ) .style(self.theme); + let progress_bar = + ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme); + let content = Column::new() .spacing(20) .padding(20) .max_width(600) .push(choose_theme) .push(Row::new().spacing(10).push(text_input).push(button)) - .push(slider); + .push(slider) + .push(progress_bar); let scrollable = Scrollable::new(&mut self.scroll) .style(self.theme) @@ -104,7 +109,9 @@ impl Sandbox for Styling { } mod style { - use iced::{button, container, scrollable, slider, text_input}; + use iced::{ + button, container, progress_bar, scrollable, slider, text_input, + }; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -167,6 +174,15 @@ mod style { } } + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::ProgressBar.into(), + } + } + } + mod light { use iced::{button, Background, Color, Vector}; @@ -197,8 +213,8 @@ mod style { mod dark { use iced::{ - button, container, scrollable, slider, text_input, Background, - Color, + button, container, progress_bar, scrollable, slider, text_input, + Background, Color, }; const SURFACE: Color = Color::from_rgb( @@ -268,7 +284,7 @@ mod style { } fn placeholder_color(&self) -> Color { - Color::from_rgb(0.7, 0.7, 0.7) + Color::from_rgb(0.4, 0.4, 0.4) } fn value_color(&self) -> Color { @@ -372,5 +388,17 @@ mod style { } } } + + pub struct ProgressBar; + + impl progress_bar::StyleSheet for ProgressBar { + fn style(&self) -> progress_bar::Style { + progress_bar::Style { + background: Background::Color(SURFACE), + bar: Background::Color(ACTIVE), + border_radius: 10, + } + } + } } } -- cgit From 387fc0be26ccd1adc66c1dc80420f9b08d0c023a Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 02:25:57 +0100 Subject: Implement styling for `Radio` --- examples/styling.rs | 50 +++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 41 insertions(+), 9 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index 426e0638..b5600e85 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -51,12 +51,15 @@ impl Sandbox for Styling { let choose_theme = style::Theme::ALL.iter().fold( Column::new().spacing(10).push(Text::new("Choose a theme:")), |column, theme| { - column.push(Radio::new( - *theme, - &format!("{:?}", theme), - Some(self.theme), - Message::ThemeChanged, - )) + column.push( + Radio::new( + *theme, + &format!("{:?}", theme), + Some(self.theme), + Message::ThemeChanged, + ) + .style(self.theme), + ) }, ); @@ -110,7 +113,7 @@ impl Sandbox for Styling { mod style { use iced::{ - button, container, progress_bar, scrollable, slider, text_input, + button, container, progress_bar, radio, scrollable, slider, text_input, }; #[derive(Debug, Clone, Copy, PartialEq, Eq)] @@ -138,6 +141,15 @@ mod style { } } + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Radio.into(), + } + } + } + impl From for Box { fn from(theme: Theme) -> Self { match theme { @@ -213,8 +225,8 @@ mod style { mod dark { use iced::{ - button, container, progress_bar, scrollable, slider, text_input, - Background, Color, + button, container, progress_bar, radio, scrollable, slider, + text_input, Background, Color, }; const SURFACE: Color = Color::from_rgb( @@ -255,6 +267,26 @@ mod style { } } + pub struct Radio; + + impl radio::StyleSheet for Radio { + fn active(&self) -> radio::Style { + radio::Style { + background: Background::Color(SURFACE), + dot_color: Color::WHITE, + border_width: 0, + border_color: Color::TRANSPARENT, + } + } + + fn hovered(&self) -> radio::Style { + radio::Style { + background: Background::Color(Color { a: 0.5, ..SURFACE }), + ..self.active() + } + } + } + pub struct TextInput; impl text_input::StyleSheet for TextInput { -- cgit From ed30b487d649ffa0967ab8bfd66f4820ee2150fd Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 02:54:54 +0100 Subject: Implement styling for `Checkbox` --- examples/styling.rs | 81 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 69 insertions(+), 12 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index b5600e85..97095cff 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -1,7 +1,7 @@ use iced::{ - button, scrollable, slider, text_input, Button, Column, Container, Element, - Length, ProgressBar, Radio, Row, Sandbox, Scrollable, Settings, Slider, - Text, TextInput, + button, scrollable, slider, text_input, Button, Checkbox, Column, + Container, Element, Length, ProgressBar, Radio, Row, Sandbox, Scrollable, + Settings, Slider, Text, TextInput, }; pub fn main() { @@ -17,6 +17,7 @@ struct Styling { button: button::State, slider: slider::State, slider_value: f32, + debug: bool, } #[derive(Debug, Clone)] @@ -25,6 +26,7 @@ enum Message { InputChanged(String), ButtonPressed, SliderChanged(f32), + DebugToggled(bool), } impl Sandbox for Styling { @@ -44,6 +46,7 @@ impl Sandbox for Styling { Message::InputChanged(value) => self.input_value = value, Message::ButtonPressed => (), Message::SliderChanged(value) => self.slider_value = value, + Message::DebugToggled(debug) => self.debug = debug, } } @@ -89,18 +92,34 @@ impl Sandbox for Styling { let progress_bar = ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme); - let content = Column::new() + let checkbox = Checkbox::new( + self.debug, + "Enable layout debugger", + Message::DebugToggled, + ) + .style(self.theme); + + let content: Element<_> = Column::new() .spacing(20) .padding(20) .max_width(600) .push(choose_theme) .push(Row::new().spacing(10).push(text_input).push(button)) .push(slider) - .push(progress_bar); - - let scrollable = Scrollable::new(&mut self.scroll) - .style(self.theme) - .push(Container::new(content).width(Length::Fill).center_x()); + .push(progress_bar) + .push(checkbox) + .into(); + + let scrollable = + Scrollable::new(&mut self.scroll).style(self.theme).push( + Container::new(if self.debug { + content.explain(self.theme.debug_color()) + } else { + content + }) + .width(Length::Fill) + .center_x(), + ); Container::new(scrollable) .width(Length::Fill) @@ -113,7 +132,8 @@ impl Sandbox for Styling { mod style { use iced::{ - button, container, progress_bar, radio, scrollable, slider, text_input, + button, checkbox, container, progress_bar, radio, scrollable, slider, + text_input, Color, }; #[derive(Debug, Clone, Copy, PartialEq, Eq)] @@ -124,6 +144,13 @@ mod style { impl Theme { pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark]; + + pub fn debug_color(&self) -> Color { + match self { + Theme::Light => Color::BLACK, + Theme::Dark => Color::WHITE, + } + } } impl Default for Theme { @@ -195,6 +222,15 @@ mod style { } } + impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Checkbox.into(), + } + } + } + mod light { use iced::{button, Background, Color, Vector}; @@ -225,8 +261,8 @@ mod style { mod dark { use iced::{ - button, container, progress_bar, radio, scrollable, slider, - text_input, Background, Color, + button, checkbox, container, progress_bar, radio, scrollable, + slider, text_input, Background, Color, }; const SURFACE: Color = Color::from_rgb( @@ -432,5 +468,26 @@ mod style { } } } + + pub struct Checkbox; + + impl checkbox::StyleSheet for Checkbox { + fn active(&self) -> checkbox::Style { + checkbox::Style { + background: Background::Color(SURFACE), + checkmark_color: Color::WHITE, + border_radius: 2, + border_width: 0, + border_color: Color::TRANSPARENT, + } + } + + fn hovered(&self) -> checkbox::Style { + checkbox::Style { + background: Background::Color(Color { a: 0.5, ..SURFACE }), + ..self.active() + } + } + } } } -- cgit From 3e3f426af882d9b19815cb3a8cf7ac6fe65c88ea Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 03:19:00 +0100 Subject: Add `Scrollable` to `styling` example --- examples/styling.rs | 81 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 51 insertions(+), 30 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index 97095cff..a11bf155 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -1,7 +1,7 @@ use iced::{ - button, scrollable, slider, text_input, Button, Checkbox, Column, + button, scrollable, slider, text_input, Align, Button, Checkbox, Column, Container, Element, Length, ProgressBar, Radio, Row, Sandbox, Scrollable, - Settings, Slider, Text, TextInput, + Settings, Slider, Space, Text, TextInput, }; pub fn main() { @@ -17,7 +17,7 @@ struct Styling { button: button::State, slider: slider::State, slider_value: f32, - debug: bool, + toggle_value: bool, } #[derive(Debug, Clone)] @@ -26,7 +26,7 @@ enum Message { InputChanged(String), ButtonPressed, SliderChanged(f32), - DebugToggled(bool), + CheckboxToggled(bool), } impl Sandbox for Styling { @@ -46,7 +46,7 @@ impl Sandbox for Styling { Message::InputChanged(value) => self.input_value = value, Message::ButtonPressed => (), Message::SliderChanged(value) => self.slider_value = value, - Message::DebugToggled(debug) => self.debug = debug, + Message::CheckboxToggled(value) => self.toggle_value = value, } } @@ -92,14 +92,21 @@ impl Sandbox for Styling { let progress_bar = ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme); + let scrollable = Scrollable::new(&mut self.scroll) + .height(Length::Units(100)) + .style(self.theme) + .push(Text::new("Scroll me!")) + .push(Space::with_height(Length::Units(800))) + .push(Text::new("You did it!")); + let checkbox = Checkbox::new( - self.debug, - "Enable layout debugger", - Message::DebugToggled, + self.toggle_value, + "Toggle me!", + Message::CheckboxToggled, ) .style(self.theme); - let content: Element<_> = Column::new() + let content = Column::new() .spacing(20) .padding(20) .max_width(600) @@ -107,23 +114,18 @@ impl Sandbox for Styling { .push(Row::new().spacing(10).push(text_input).push(button)) .push(slider) .push(progress_bar) - .push(checkbox) - .into(); - - let scrollable = - Scrollable::new(&mut self.scroll).style(self.theme).push( - Container::new(if self.debug { - content.explain(self.theme.debug_color()) - } else { - content - }) - .width(Length::Fill) - .center_x(), + .push( + Row::new() + .spacing(10) + .align_items(Align::Center) + .push(scrollable) + .push(checkbox), ); - Container::new(scrollable) + Container::new(content) .width(Length::Fill) .height(Length::Fill) + .center_x() .center_y() .style(self.theme) .into() @@ -394,25 +396,44 @@ mod style { impl scrollable::StyleSheet for Scrollable { fn active(&self) -> scrollable::Scrollbar { scrollable::Scrollbar { - background: None, + background: Some(Background::Color(SURFACE)), border_radius: 2, border_width: 0, border_color: Color::TRANSPARENT, scroller: scrollable::Scroller { - color: [1.0, 1.0, 1.0, 0.7].into(), + color: ACTIVE, border_radius: 2, - border_width: 1, - border_color: Color::WHITE, + border_width: 0, + border_color: Color::TRANSPARENT, }, } } fn hovered(&self) -> scrollable::Scrollbar { + let active = self.active(); + scrollable::Scrollbar { - background: Some(Background::Color( - [1.0, 1.0, 1.0, 0.3].into(), - )), - ..self.active() + background: Some(Background::Color(Color { + a: 0.5, + ..SURFACE + })), + scroller: scrollable::Scroller { + color: HOVERED, + ..active.scroller + }, + ..active + } + } + + fn dragging(&self) -> scrollable::Scrollbar { + let hovered = self.hovered(); + + scrollable::Scrollbar { + scroller: scrollable::Scroller { + color: Color::from_rgb(0.85, 0.85, 0.85), + ..hovered.scroller + }, + ..hovered } } } -- cgit From 08faaaf6234e93acb3b0dc8e10bf9c4cb266f21c Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jan 2020 05:19:01 +0100 Subject: Color borders of `Checkbox` and `Radio` in `styling` example --- examples/styling.rs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index a11bf155..f0edfd82 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -311,9 +311,9 @@ mod style { fn active(&self) -> radio::Style { radio::Style { background: Background::Color(SURFACE), - dot_color: Color::WHITE, - border_width: 0, - border_color: Color::TRANSPARENT, + dot_color: ACTIVE, + border_width: 1, + border_color: ACTIVE, } } @@ -496,10 +496,10 @@ mod style { fn active(&self) -> checkbox::Style { checkbox::Style { background: Background::Color(SURFACE), - checkmark_color: Color::WHITE, + checkmark_color: ACTIVE, border_radius: 2, - border_width: 0, - border_color: Color::TRANSPARENT, + border_width: 1, + border_color: ACTIVE, } } -- cgit From cae4463e8379cddefbd8322a40ad8957bce07215 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 8 Jan 2020 03:30:15 +0100 Subject: Allow `Checkbox` style to change based on its state --- examples/styling.rs | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index f0edfd82..59c9c734 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -493,20 +493,27 @@ mod style { pub struct Checkbox; impl checkbox::StyleSheet for Checkbox { - fn active(&self) -> checkbox::Style { + fn active(&self, is_checked: bool) -> checkbox::Style { checkbox::Style { - background: Background::Color(SURFACE), - checkmark_color: ACTIVE, + background: Background::Color(if is_checked { + ACTIVE + } else { + SURFACE + }), + checkmark_color: Color::WHITE, border_radius: 2, border_width: 1, border_color: ACTIVE, } } - fn hovered(&self) -> checkbox::Style { + fn hovered(&self, is_checked: bool) -> checkbox::Style { checkbox::Style { - background: Background::Color(Color { a: 0.5, ..SURFACE }), - ..self.active() + background: Background::Color(Color { + a: 0.8, + ..if is_checked { ACTIVE } else { SURFACE } + }), + ..self.active(is_checked) } } } -- cgit From 775500cf1f5a14afacdc0bb6875136a4fd3369a4 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 9 Jan 2020 06:05:26 +0100 Subject: Remove leftover `debug_color` in `styling` example --- examples/styling.rs | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) (limited to 'examples') diff --git a/examples/styling.rs b/examples/styling.rs index 59c9c734..50095ec7 100644 --- a/examples/styling.rs +++ b/examples/styling.rs @@ -135,7 +135,7 @@ impl Sandbox for Styling { mod style { use iced::{ button, checkbox, container, progress_bar, radio, scrollable, slider, - text_input, Color, + text_input, }; #[derive(Debug, Clone, Copy, PartialEq, Eq)] @@ -146,13 +146,6 @@ mod style { impl Theme { pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark]; - - pub fn debug_color(&self) -> Color { - match self { - Theme::Light => Color::BLACK, - Theme::Dark => Color::WHITE, - } - } } impl Default for Theme { -- cgit