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 2ff0e48142c302cb93130164d083589bb2ac4979 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 30 Dec 2019 20:54:04 +0100 Subject: Make `Row`, `Column`, and `Checkbox` shrink by default --- examples/todos.rs | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'examples/todos.rs') diff --git a/examples/todos.rs b/examples/todos.rs index 42e88f65..f5f2f459 100644 --- a/examples/todos.rs +++ b/examples/todos.rs @@ -146,6 +146,7 @@ impl Application for Todos { .. }) => { let title = Text::new("todos") + .width(Length::Fill) .size(100) .color([0.5, 0.5, 0.5]) .horizontal_alignment(HorizontalAlignment::Center); @@ -284,7 +285,8 @@ impl Task { self.completed, &self.description, TaskMessage::Completed, - ); + ) + .width(Length::Fill); Row::new() .spacing(20) @@ -323,11 +325,7 @@ impl Task { Row::new() .spacing(10) .push(delete_icon().color(Color::WHITE)) - .push( - Text::new("Delete") - .width(Length::Shrink) - .color(Color::WHITE), - ), + .push(Text::new("Delete").color(Color::WHITE)), ) .on_press(TaskMessage::Delete) .padding(10) @@ -358,7 +356,7 @@ impl Controls { let tasks_left = tasks.iter().filter(|task| !task.completed).count(); let filter_button = |state, label, filter, current_filter| { - let label = Text::new(label).size(16).width(Length::Shrink); + let label = Text::new(label).size(16); let button = if filter == current_filter { Button::new(state, label.color(Color::WHITE)) .background(Color::from_rgb(0.2, 0.2, 0.7)) @@ -381,11 +379,11 @@ impl Controls { tasks_left, if tasks_left == 1 { "task" } else { "tasks" } )) + .width(Length::Fill) .size(16), ) .push( Row::new() - .width(Length::Shrink) .spacing(10) .push(filter_button( all_button, -- 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