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/stopwatch.rs | 43 +++++++++++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 10 deletions(-) (limited to 'examples/stopwatch.rs') 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, + } + } + } +} -- 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/stopwatch.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'examples/stopwatch.rs') 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, } } } -- 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/stopwatch.rs | 3 --- 1 file changed, 3 deletions(-) (limited to 'examples/stopwatch.rs') diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs index 7a7f0793..f4d485e2 100644 --- a/examples/stopwatch.rs +++ b/examples/stopwatch.rs @@ -96,7 +96,6 @@ impl Application for Stopwatch { seconds % MINUTE, self.duration.subsec_millis() / 10, )) - .width(Length::Shrink) .size(40); let button = |state, label, color: [f32; 3]| { @@ -125,13 +124,11 @@ impl Application for Stopwatch { .on_press(Message::Reset); let controls = Row::new() - .width(Length::Shrink) .spacing(20) .push(toggle_button) .push(reset_button); let content = Column::new() - .width(Length::Shrink) .align_items(Align::Center) .spacing(20) .push(duration) -- 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/stopwatch.rs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'examples/stopwatch.rs') 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() } } } -- cgit