reivilibre/iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add border and shadow styling to Button

Browse Source
This commit is contained in:
Héctor Ramón Jiménez 2020-01-05 19:29:12 +01:00
parent 2116fbb3c2
commit 1a0effa961
8 changed files with 58 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/vector.rs
View File

@ -31,3 +31,15 @@ where
Self::new(self.x + b.x, self.y + b.y) Self::new(self.x + b.x, self.y + b.y)
} }
} }
impl<T> Default for Vector<T>
where
T: Default,
{
fn default() -> Self {
Self {
x: T::default(),
y: T::default(),
}
}
}

5
examples/pokedex.rs
View File

@ -225,7 +225,7 @@ fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
} }
mod style { mod style {
use iced::{button, Background, Color}; use iced::{button, Background, Color, Vector};
pub enum Button { pub enum Button {
Primary, Primary,
@ -238,8 +238,9 @@ mod style {
Button::Primary => Color::from_rgb(0.11, 0.42, 0.87), Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
})), })),
border_radius: 12, border_radius: 12,
shadow_offset: 1.0, shadow_offset: Vector::new(1.0, 1.0),
text_color: Color::WHITE, text_color: Color::WHITE,
..button::Style::default()
} }
} }
} }

5
examples/stopwatch.rs
View File

@ -180,7 +180,7 @@ mod time {
} }
mod style { mod style {
use iced::{button, Background, Color}; use iced::{button, Background, Color, Vector};
pub enum Button { pub enum Button {
Primary, Primary,
@ -197,8 +197,9 @@ mod style {
Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2), Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2),
})), })),
border_radius: 12, border_radius: 12,
shadow_offset: 1.0, shadow_offset: Vector::new(1.0, 1.0),
text_color: Color::WHITE, text_color: Color::WHITE,
..button::Style::default()
} }
} }
} }

20
examples/todos.rs
View File

@ -551,7 +551,7 @@ impl SavedState {
} }
mod style { mod style {
use iced::{button, Background, Color}; use iced::{button, Background, Color, Vector};
pub enum Button { pub enum Button {
Filter { selected: bool }, Filter { selected: bool },
@ -569,31 +569,25 @@ mod style {
Color::from_rgb(0.2, 0.2, 0.7), Color::from_rgb(0.2, 0.2, 0.7),
)), )),
border_radius: 10, border_radius: 10,
shadow_offset: 0.0,
text_color: Color::WHITE, text_color: Color::WHITE,
..button::Style::default()
} }
} else { } else {
button::Style { button::Style::default()
background: None,
border_radius: 0,
shadow_offset: 0.0,
text_color: Color::BLACK,
}
} }
} }
Button::Icon => button::Style { Button::Icon => button::Style {
background: None,
border_radius: 0,
shadow_offset: 0.0,
text_color: Color::from_rgb(0.5, 0.5, 0.5), text_color: Color::from_rgb(0.5, 0.5, 0.5),
..button::Style::default()
}, },
Button::Destructive => button::Style { Button::Destructive => button::Style {
background: Some(Background::Color(Color::from_rgb( background: Some(Background::Color(Color::from_rgb(
0.8, 0.2, 0.2, 0.8, 0.2, 0.2,
))), ))),
border_radius: 5, border_radius: 5,
shadow_offset: 1.0,
text_color: Color::WHITE, text_color: Color::WHITE,
shadow_offset: Vector::new(1.0, 1.0),
..button::Style::default()
}, },
} }
} }
@ -609,7 +603,7 @@ mod style {
} }
_ => active.text_color, _ => active.text_color,
}, },
shadow_offset: active.shadow_offset + 1.0, shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
..active ..active
} }
} }

9
examples/tour.rs
View File

@ -27,7 +27,7 @@ impl Sandbox for Tour {
scroll: scrollable::State::new(), scroll: scrollable::State::new(),
back_button: button::State::new(), back_button: button::State::new(),
next_button: button::State::new(), next_button: button::State::new(),
debug: true, debug: false,
} }
} }
@ -743,7 +743,7 @@ pub enum Layout {
} }
mod style { mod style {
use iced::{button, Background, Color}; use iced::{button, Background, Color, Vector};
pub enum Button { pub enum Button {
Primary, Primary,
@ -758,15 +758,16 @@ mod style {
Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5), Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
})), })),
border_radius: 12, border_radius: 12,
shadow_offset: 1.0, shadow_offset: Vector::new(1.0, 1.0),
text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE), text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
..button::Style::default()
} }
} }
fn hovered(&self) -> button::Style { fn hovered(&self) -> button::Style {
button::Style { button::Style {
text_color: Color::WHITE, text_color: Color::WHITE,
shadow_offset: 2.0, shadow_offset: Vector::new(1.0, 2.0),
..self.active() ..self.active()
} }
} }

2
src/native.rs
View File

@ -1,6 +1,6 @@
pub use iced_winit::{ pub use iced_winit::{
Align, Background, Color, Command, Font, HorizontalAlignment, Length, Align, Background, Color, Command, Font, HorizontalAlignment, Length,
Space, Subscription, VerticalAlignment, Space, Subscription, Vector, VerticalAlignment,
}; };
pub mod widget { pub mod widget {

29
style/src/button.rs
View File

@ -1,15 +1,30 @@
//! Allow your users to perform actions by pressing a button. //! Allow your users to perform actions by pressing a button.
use iced_core::{Background, Color}; use iced_core::{Background, Color, Vector};
/// The appearance of a button. /// The appearance of a button.
#[derive(Debug)] #[derive(Debug)]
pub struct Style { pub struct Style {
pub shadow_offset: f32, pub shadow_offset: Vector,
pub background: Option<Background>, pub background: Option<Background>,
pub border_radius: u16, pub border_radius: u16,
pub border_width: u16,
pub border_color: Color,
pub text_color: Color, pub text_color: Color,
} }
impl std::default::Default for Style {
fn default() -> Self {
Style {
shadow_offset: Vector::default(),
background: None,
border_radius: 0,
border_width: 0,
border_color: Color::TRANSPARENT,
text_color: Color::BLACK,
}
}
}
/// A set of rules that dictate the style of a button. /// A set of rules that dictate the style of a button.
pub trait StyleSheet { pub trait StyleSheet {
fn active(&self) -> Style; fn active(&self) -> Style;
@ -18,14 +33,14 @@ pub trait StyleSheet {
let active = self.active(); let active = self.active();
Style { Style {
shadow_offset: active.shadow_offset + 1.0, shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
..active ..active
} }
} }
fn pressed(&self) -> Style { fn pressed(&self) -> Style {
Style { Style {
shadow_offset: 0.0, shadow_offset: Vector::default(),
..self.active() ..self.active()
} }
} }
@ -34,7 +49,7 @@ pub trait StyleSheet {
let active = self.active(); let active = self.active();
Style { Style {
shadow_offset: 0.0, shadow_offset: Vector::default(),
background: active.background.map(|background| match background { background: active.background.map(|background| match background {
Background::Color(color) => Background::Color(Color { Background::Color(color) => Background::Color(Color {
a: color.a * 0.5, a: color.a * 0.5,
@ -55,9 +70,11 @@ struct Default;
impl StyleSheet for Default { impl StyleSheet for Default {
fn active(&self) -> Style { fn active(&self) -> Style {
Style { Style {
shadow_offset: 1.0, shadow_offset: Vector::new(0.0, 1.0),
background: Some(Background::Color([0.5, 0.5, 0.5].into())), background: Some(Background::Color([0.5, 0.5, 0.5].into())),
border_radius: 5, border_radius: 5,
border_width: 0,
border_color: Color::TRANSPARENT,
text_color: Color::BLACK, text_color: Color::BLACK,
} }
} }

8
wgpu/src/renderer/widget/button.rs
View File

@ -51,8 +51,8 @@ impl iced_native::button::Renderer for Renderer {
primitives: vec![ primitives: vec![
Primitive::Quad { Primitive::Quad {
bounds: Rectangle { bounds: Rectangle {
x: bounds.x + 1.0, x: bounds.x + styling.shadow_offset.x,
y: bounds.y + styling.shadow_offset, y: bounds.y + styling.shadow_offset.y,
..bounds ..bounds
}, },
background: Background::Color( background: Background::Color(
@ -66,8 +66,8 @@ impl iced_native::button::Renderer for Renderer {
bounds, bounds,
background, background,
border_radius: styling.border_radius, border_radius: styling.border_radius,
border_width: 0, border_width: styling.border_width,
border_color: Color::TRANSPARENT, border_color: styling.border_color,
}, },
content, content,
], ],