Draft Style and StyleSheet for Button

This commit is contained in:
Héctor Ramón Jiménez 2019-12-29 10:57:01 +01:00
parent 4b86c2ff98
commit c7b170da6d
15 changed files with 275 additions and 114 deletions

View file

@ -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,
}
}
}
}