From cc906c83cdf896d94b7ccf91258466714be631f6 Mon Sep 17 00:00:00 2001 From: Nick Senger Date: Wed, 8 Nov 2023 19:12:53 -0800 Subject: feat: quad shadows --- examples/custom_quad/src/main.rs | 53 ++++++++++++++++++++++++++++++--- examples/custom_widget/src/main.rs | 1 + examples/loading_spinners/src/linear.rs | 3 ++ examples/modal/src/main.rs | 1 + 4 files changed, 54 insertions(+), 4 deletions(-) (limited to 'examples') diff --git a/examples/custom_quad/src/main.rs b/examples/custom_quad/src/main.rs index cc9ad528..01f4aa10 100644 --- a/examples/custom_quad/src/main.rs +++ b/examples/custom_quad/src/main.rs @@ -3,21 +3,28 @@ mod quad { use iced::advanced::layout::{self, Layout}; use iced::advanced::renderer; use iced::advanced::widget::{self, Widget}; - use iced::mouse; + use iced::{mouse, Shadow}; use iced::{Color, Element, Length, Rectangle, Size}; pub struct CustomQuad { size: f32, radius: [f32; 4], border_width: f32, + shadow: Shadow, } impl CustomQuad { - pub fn new(size: f32, radius: [f32; 4], border_width: f32) -> Self { + pub fn new( + size: f32, + radius: [f32; 4], + border_width: f32, + shadow: Shadow, + ) -> Self { Self { size, radius, border_width, + shadow, } } } @@ -58,6 +65,7 @@ mod quad { border_radius: self.radius.into(), border_width: self.border_width, border_color: Color::from_rgb(1.0, 0.0, 0.0), + shadow: self.shadow, }, Color::BLACK, ); @@ -75,7 +83,9 @@ mod quad { } use iced::widget::{column, container, slider, text}; -use iced::{Alignment, Element, Length, Sandbox, Settings}; +use iced::{ + Alignment, Color, Element, Length, Sandbox, Settings, Shadow, Vector, +}; pub fn main() -> iced::Result { Example::run(Settings::default()) @@ -84,6 +94,7 @@ pub fn main() -> iced::Result { struct Example { radius: [f32; 4], border_width: f32, + shadow: Shadow, } #[derive(Debug, Clone, Copy)] @@ -94,6 +105,9 @@ enum Message { RadiusBottomRightChanged(f32), RadiusBottomLeftChanged(f32), BorderWidthChanged(f32), + ShadowXOffsetChanged(f32), + ShadowYOffsetChanged(f32), + ShadowBlurRadiusChanged(f32), } impl Sandbox for Example { @@ -103,6 +117,11 @@ impl Sandbox for Example { Self { radius: [50.0; 4], border_width: 0.0, + shadow: Shadow { + color: Color::from_rgba(0.0, 0.0, 0.0, 0.8), + offset: Vector::new(0.0, 8.0), + blur_radius: 16.0, + }, } } @@ -128,14 +147,33 @@ impl Sandbox for Example { Message::BorderWidthChanged(width) => { self.border_width = width; } + Message::ShadowXOffsetChanged(x) => { + self.shadow.offset.x = x; + } + Message::ShadowYOffsetChanged(y) => { + self.shadow.offset.y = y; + } + Message::ShadowBlurRadiusChanged(s) => { + self.shadow.blur_radius = s; + } } } fn view(&self) -> Element { let [tl, tr, br, bl] = self.radius; + let Shadow { + offset: Vector { x: sx, y: sy }, + blur_radius: sr, + .. + } = self.shadow; let content = column![ - quad::CustomQuad::new(200.0, self.radius, self.border_width), + quad::CustomQuad::new( + 200.0, + self.radius, + self.border_width, + self.shadow + ), text(format!("Radius: {tl:.2}/{tr:.2}/{br:.2}/{bl:.2}")), slider(1.0..=100.0, tl, Message::RadiusTopLeftChanged).step(0.01), slider(1.0..=100.0, tr, Message::RadiusTopRightChanged).step(0.01), @@ -145,6 +183,13 @@ impl Sandbox for Example { .step(0.01), slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged) .step(0.01), + text(format!("Shadow: {sx:.2}x{sy:.2}, {sr:.2}")), + slider(-100.0..=100.0, sx, Message::ShadowXOffsetChanged) + .step(0.01), + slider(-100.0..=100.0, sy, Message::ShadowYOffsetChanged) + .step(0.01), + slider(0.0..=100.0, sr, Message::ShadowBlurRadiusChanged) + .step(0.01), ] .padding(20) .spacing(20) diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs index 7ffb4cd0..f5c34d6b 100644 --- a/examples/custom_widget/src/main.rs +++ b/examples/custom_widget/src/main.rs @@ -65,6 +65,7 @@ mod circle { border_radius: self.radius.into(), border_width: 0.0, border_color: Color::TRANSPARENT, + shadow: Default::default(), }, Color::BLACK, ); diff --git a/examples/loading_spinners/src/linear.rs b/examples/loading_spinners/src/linear.rs index 497e0834..86469681 100644 --- a/examples/loading_spinners/src/linear.rs +++ b/examples/loading_spinners/src/linear.rs @@ -228,6 +228,7 @@ where border_radius: 0.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, + shadow: Default::default(), }, Background::Color(custom_style.track_color), ); @@ -244,6 +245,7 @@ where border_radius: 0.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, + shadow: Default::default(), }, Background::Color(custom_style.bar_color), ), @@ -261,6 +263,7 @@ where border_radius: 0.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, + shadow: Default::default(), }, Background::Color(custom_style.bar_color), ), diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs index 963c839e..531a19b5 100644 --- a/examples/modal/src/main.rs +++ b/examples/modal/src/main.rs @@ -477,6 +477,7 @@ mod modal { border_radius: BorderRadius::default(), border_width: 0.0, border_color: Color::TRANSPARENT, + shadow: Default::default(), }, Color { a: 0.80, -- cgit From b7b457a575cdd103915994f640c50262ce30a7c5 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 20 Jan 2024 12:11:18 +0100 Subject: Make `shadow` optional in `renderer::Quad` --- examples/custom_quad/src/main.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'examples') diff --git a/examples/custom_quad/src/main.rs b/examples/custom_quad/src/main.rs index 01f4aa10..e3f110bb 100644 --- a/examples/custom_quad/src/main.rs +++ b/examples/custom_quad/src/main.rs @@ -65,7 +65,7 @@ mod quad { border_radius: self.radius.into(), border_width: self.border_width, border_color: Color::from_rgb(1.0, 0.0, 0.0), - shadow: self.shadow, + shadow: Some(self.shadow), }, Color::BLACK, ); -- cgit From 370b2f6df799c948188d3949e34112258b2a8498 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 20 Jan 2024 12:25:07 +0100 Subject: Use `Default` implementation of `renderer::Quad` --- examples/custom_widget/src/main.rs | 4 +--- examples/loading_spinners/src/linear.rs | 17 ++++------------- examples/modal/src/main.rs | 4 +--- 3 files changed, 6 insertions(+), 19 deletions(-) (limited to 'examples') diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs index f5c34d6b..6578183d 100644 --- a/examples/custom_widget/src/main.rs +++ b/examples/custom_widget/src/main.rs @@ -63,9 +63,7 @@ mod circle { renderer::Quad { bounds: layout.bounds(), border_radius: self.radius.into(), - border_width: 0.0, - border_color: Color::TRANSPARENT, - shadow: Default::default(), + ..renderer::Quad::default() }, Color::BLACK, ); diff --git a/examples/loading_spinners/src/linear.rs b/examples/loading_spinners/src/linear.rs index 86469681..03aee9b1 100644 --- a/examples/loading_spinners/src/linear.rs +++ b/examples/loading_spinners/src/linear.rs @@ -225,10 +225,7 @@ where width: bounds.width, height: bounds.height, }, - border_radius: 0.0.into(), - border_width: 0.0, - border_color: Color::TRANSPARENT, - shadow: Default::default(), + ..renderer::Quad::default() }, Background::Color(custom_style.track_color), ); @@ -242,10 +239,7 @@ where width: self.easing.y_at_x(*progress) * bounds.width, height: bounds.height, }, - border_radius: 0.0.into(), - border_width: 0.0, - border_color: Color::TRANSPARENT, - shadow: Default::default(), + ..renderer::Quad::default() }, Background::Color(custom_style.bar_color), ), @@ -260,10 +254,7 @@ where * bounds.width, height: bounds.height, }, - border_radius: 0.0.into(), - border_width: 0.0, - border_color: Color::TRANSPARENT, - shadow: Default::default(), + ..renderer::Quad::default() }, Background::Color(custom_style.bar_color), ), @@ -291,7 +282,7 @@ pub struct Appearance { pub bar_color: Color, } -impl std::default::Default for Appearance { +impl Default for Appearance { fn default() -> Self { Self { track_color: Color::TRANSPARENT, diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs index 531a19b5..59287c06 100644 --- a/examples/modal/src/main.rs +++ b/examples/modal/src/main.rs @@ -475,9 +475,7 @@ mod modal { renderer::Quad { bounds: layout.bounds(), border_radius: BorderRadius::default(), - border_width: 0.0, - border_color: Color::TRANSPARENT, - shadow: Default::default(), + ..renderer::Quad::default() }, Color { a: 0.80, -- cgit From 25f182f933ea6b7c112c8f9a450a98dc9b9eebdd Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 20 Jan 2024 13:29:25 +0100 Subject: Introduce `Border` struct analogous to `Shadow` --- examples/custom_quad/src/main.rs | 14 ++++++++------ examples/custom_widget/src/main.rs | 4 ++-- examples/modal/src/main.rs | 6 +----- examples/pane_grid/src/main.rs | 16 +++++++++++----- examples/scrollable/src/main.rs | 16 ++++++++-------- 5 files changed, 30 insertions(+), 26 deletions(-) (limited to 'examples') diff --git a/examples/custom_quad/src/main.rs b/examples/custom_quad/src/main.rs index e3f110bb..14f62caa 100644 --- a/examples/custom_quad/src/main.rs +++ b/examples/custom_quad/src/main.rs @@ -3,8 +3,8 @@ mod quad { use iced::advanced::layout::{self, Layout}; use iced::advanced::renderer; use iced::advanced::widget::{self, Widget}; - use iced::{mouse, Shadow}; - use iced::{Color, Element, Length, Rectangle, Size}; + use iced::mouse; + use iced::{Border, Color, Element, Length, Rectangle, Shadow, Size}; pub struct CustomQuad { size: f32, @@ -62,10 +62,12 @@ mod quad { renderer.fill_quad( renderer::Quad { bounds: layout.bounds(), - border_radius: self.radius.into(), - border_width: self.border_width, - border_color: Color::from_rgb(1.0, 0.0, 0.0), - shadow: Some(self.shadow), + border: Border { + radius: self.radius.into(), + width: self.border_width, + color: Color::from_rgb(1.0, 0.0, 0.0), + }, + shadow: self.shadow, }, Color::BLACK, ); diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs index 6578183d..d5ecebaf 100644 --- a/examples/custom_widget/src/main.rs +++ b/examples/custom_widget/src/main.rs @@ -13,7 +13,7 @@ mod circle { use iced::advanced::renderer; use iced::advanced::widget::{self, Widget}; use iced::mouse; - use iced::{Color, Element, Length, Rectangle, Size}; + use iced::{Border, Color, Element, Length, Rectangle, Size}; pub struct Circle { radius: f32, @@ -62,7 +62,7 @@ mod circle { renderer.fill_quad( renderer::Quad { bounds: layout.bounds(), - border_radius: self.radius.into(), + border: Border::with_radius(self.radius), ..renderer::Quad::default() }, Color::BLACK, diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs index 59287c06..c9d5df29 100644 --- a/examples/modal/src/main.rs +++ b/examples/modal/src/main.rs @@ -231,10 +231,7 @@ mod modal { use iced::alignment::Alignment; use iced::event; use iced::mouse; - use iced::{ - BorderRadius, Color, Element, Event, Length, Point, Rectangle, Size, - Vector, - }; + use iced::{Color, Element, Event, Length, Point, Rectangle, Size, Vector}; /// A widget that centers a modal element over some base element pub struct Modal<'a, Message, Renderer> { @@ -474,7 +471,6 @@ mod modal { renderer.fill_quad( renderer::Quad { bounds: layout.bounds(), - border_radius: BorderRadius::default(), ..renderer::Quad::default() }, Color { diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index d5e5bcbe..742dc344 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -348,7 +348,7 @@ fn view_controls<'a>( mod style { use iced::widget::container; - use iced::Theme; + use iced::{Border, Theme}; pub fn title_bar_active(theme: &Theme) -> container::Appearance { let palette = theme.extended_palette(); @@ -375,8 +375,11 @@ mod style { container::Appearance { background: Some(palette.background.weak.color.into()), - border_width: 2.0, - border_color: palette.background.strong.color, + border: Border { + width: 2.0, + color: palette.background.strong.color, + ..Border::default() + }, ..Default::default() } } @@ -386,8 +389,11 @@ mod style { container::Appearance { background: Some(palette.background.weak.color.into()), - border_width: 2.0, - border_color: palette.primary.strong.color, + border: Border { + width: 2.0, + color: palette.primary.strong.color, + ..Border::default() + }, ..Default::default() } } diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs index 4b57a5a4..ff691917 100644 --- a/examples/scrollable/src/main.rs +++ b/examples/scrollable/src/main.rs @@ -1,10 +1,14 @@ +use iced::executor; +use iced::theme; use iced::widget::scrollable::{Properties, Scrollbar, Scroller}; use iced::widget::{ button, column, container, horizontal_space, progress_bar, radio, row, scrollable, slider, text, vertical_space, }; -use iced::{executor, theme, Alignment, Color}; -use iced::{Application, Command, Element, Length, Settings, Theme}; +use iced::{ + Alignment, Application, Border, Color, Command, Element, Length, Settings, + Theme, +}; use once_cell::sync::Lazy; @@ -373,14 +377,10 @@ impl scrollable::StyleSheet for ScrollbarCustomStyle { background: style .active(&theme::Scrollable::default()) .background, - border_radius: 2.0.into(), - border_width: 0.0, - border_color: Color::default(), + border: Border::with_radius(2), scroller: Scroller { color: Color::from_rgb8(250, 85, 134), - border_radius: 2.0.into(), - border_width: 0.0, - border_color: Color::default(), + border: Border::with_radius(2), }, } } else { -- cgit