diff options
| author |  Héctor Ramón Jiménez <hector0193@gmail.com> | 2019-10-12 02:32:16 +0200 |
|---|---|---|
| committer | Héctor Ramón Jiménez <hector0193@gmail.com> | 2019-10-12 02:32:16 +0200 |
| commit | e74f1179769cc4dc3e91cb0b5794526b3a8c0dcd (patch) | |
| tree | 55506a568791ee213fb120befbc0d1faa74c3065 | |
| parent | c63bdacaad7d923358863e3b6b2524893788d91c (diff) | |
| download | iced-e74f1179769cc4dc3e91cb0b5794526b3a8c0dcd.tar.gz iced-e74f1179769cc4dc3e91cb0b5794526b3a8c0dcd.tar.bz2 iced-e74f1179769cc4dc3e91cb0b5794526b3a8c0dcd.zip | |
Add a slight shadow to buttons for feedback
| -rw-r--r-- | examples/tour.rs | 16 | ||||
| -rw-r--r-- | wgpu/src/renderer/button.rs | 30 |
2 files changed, 36 insertions, 10 deletions
diff --git a/examples/tour.rs b/examples/tour.rs index 6ce1e9f1..f77dc241 100644 --- a/examples/tour.rs +++ b/examples/tour.rs @@ -556,8 +556,8 @@ fn button<'a, Message>( .color(Color::WHITE) .horizontal_alignment(HorizontalAlignment::Center), ) - .padding(10) - .border_radius(10) + .padding(12) + .border_radius(12) } fn primary_button<'a, Message>( @@ -565,9 +565,9 @@ fn primary_button<'a, Message>( label: &str, ) -> Button<'a, Message> { button(state, label).background(Background::Color(Color { - r: 0.3, - g: 0.3, - b: 0.8, + r: 0.11, + g: 0.42, + b: 0.87, a: 1.0, })) } @@ -577,9 +577,9 @@ fn secondary_button<'a, Message>( label: &str, ) -> Button<'a, Message> { button(state, label).background(Background::Color(Color { - r: 0.8, - g: 0.8, - b: 0.8, + r: 0.4, + g: 0.4, + b: 0.4, a: 1.0, })) } diff --git a/wgpu/src/renderer/button.rs b/wgpu/src/renderer/button.rs index 275c870f..aa48da93 100644 --- a/wgpu/src/renderer/button.rs +++ b/wgpu/src/renderer/button.rs @@ -1,7 +1,7 @@ use crate::{Primitive, Renderer}; use iced_native::{ button, Align, Background, Button, Color, Layout, Length, MouseCursor, - Node, Point, Style, + Node, Point, Rectangle, Style, }; impl button::Renderer for Renderer { @@ -30,10 +30,36 @@ impl button::Renderer for Renderer { cursor_position, ); + let is_hover = bounds.contains(cursor_position); + + // TODO: Render proper shadows + // TODO: Make hovering and pressed styles configurable + let shadow_offset = if button.state.is_pressed { + 0.0 + } else if is_hover { + 2.0 + } else { + 1.0 + }; + ( Primitive::Group { primitives: vec![ Primitive::Quad { + bounds: Rectangle { + x: bounds.x + 1.0, + y: bounds.y + shadow_offset, + ..bounds + }, + background: Background::Color(Color { + r: 0.0, + b: 0.0, + g: 0.0, + a: 0.5, + }), + border_radius: button.border_radius, + }, + Primitive::Quad { bounds, background: button.background.unwrap_or( Background::Color(Color { @@ -48,7 +74,7 @@ impl button::Renderer for Renderer { content, ], }, - if bounds.contains(cursor_position) { + if is_hover { MouseCursor::Pointer } else { MouseCursor::OutOfBounds |