me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Draft Style and StyleSheet for Button

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

23
examples/pokedex.rs
View file

@ -220,7 +220,26 @@ impl From<surf::Exception> 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,
}
}
}
}

43
examples/stopwatch.rs
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,
}
}
}
}

51
examples/todos.rs
View file

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

47
examples/tour.rs
View file

@ -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.