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/todos.rs | 51 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 9 deletions(-) (limited to 'examples/todos.rs') 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, + }, + } + } + } +} -- 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/todos.rs | 86 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 33 deletions(-) (limited to 'examples/todos.rs') 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 } } } -- 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/todos.rs | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) (limited to 'examples/todos.rs') 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 } } -- cgit