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)
}
}
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 {
use iced::{button, Background, Color};
use iced::{button, Background, Color, Vector};
pub enum Button {
Primary,
@ -238,8 +238,9 @@ mod style {
Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
})),
border_radius: 12,
shadow_offset: 1.0,
shadow_offset: Vector::new(1.0, 1.0),
text_color: Color::WHITE,
..button::Style::default()
}
}
}

5
examples/stopwatch.rs
View File

@ -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()
}
}
}

20
examples/todos.rs
View File

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

9
examples/tour.rs
View File

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

2
src/native.rs
View File

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

29
style/src/button.rs
View File

@ -1,15 +1,30 @@
//! 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.
#[derive(Debug)]
pub struct Style {
pub shadow_offset: f32,
pub shadow_offset: Vector,
pub background: Option<Background>,
pub border_radius: u16,
pub border_width: u16,
pub border_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.
pub trait StyleSheet {
fn active(&self) -> Style;
@ -18,14 +33,14 @@ pub trait StyleSheet {
let active = self.active();
Style {
shadow_offset: active.shadow_offset + 1.0,
shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
..active
}
}
fn pressed(&self) -> Style {
Style {
shadow_offset: 0.0,
shadow_offset: Vector::default(),
..self.active()
}
}
@ -34,7 +49,7 @@ pub trait StyleSheet {
let active = self.active();
Style {
shadow_offset: 0.0,
shadow_offset: Vector::default(),
background: active.background.map(|background| match background {
Background::Color(color) => Background::Color(Color {
a: color.a * 0.5,
@ -55,9 +70,11 @@ struct Default;
impl StyleSheet for Default {
fn active(&self) -> 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())),
border_radius: 5,
border_width: 0,
border_color: Color::TRANSPARENT,
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![
Primitive::Quad {
bounds: Rectangle {
x: bounds.x + 1.0,
y: bounds.y + styling.shadow_offset,
x: bounds.x + styling.shadow_offset.x,
y: bounds.y + styling.shadow_offset.y,
..bounds
},
background: Background::Color(
@ -66,8 +66,8 @@ impl iced_native::button::Renderer for Renderer {
bounds,
background,
border_radius: styling.border_radius,
border_width: 0,
border_color: Color::TRANSPARENT,
border_width: styling.border_width,
border_color: styling.border_color,
},
content,
],