Implement theme styling for ProgressBar

examples/styling/src/main.rs

@@ -91,8 +91,7 @@ impl Sandbox for Styling {
             Message::SliderChanged,
         );
 
-        let progress_bar =
-            ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme);
+        let progress_bar = ProgressBar::new(0.0..=100.0, self.slider_value);
 
         let scrollable = Scrollable::new(&mut self.scroll)
             .width(Length::Fill)
@@ -159,7 +158,7 @@ impl Sandbox for Styling {
 }
 
 mod style {
-    use iced::{checkbox, progress_bar, scrollable, text_input};
+    use iced::{checkbox, scrollable, text_input};
 
     #[derive(Debug, Clone, Copy, PartialEq, Eq)]
     pub enum Theme {
@@ -195,15 +194,6 @@ mod style {
         }
     }
 
-    impl From<Theme> for Box<dyn progress_bar::StyleSheet> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::ProgressBar.into(),
-            }
-        }
-    }
-
     impl<'a> From<Theme> for Box<dyn checkbox::StyleSheet + 'a> {
         fn from(theme: Theme) -> Self {
             match theme {
@@ -214,7 +204,7 @@ mod style {
     }
 
     mod dark {
-        use iced::{checkbox, progress_bar, scrollable, text_input, Color};
+        use iced::{checkbox, scrollable, text_input, Color};
 
         const SURFACE: Color = Color::from_rgb(
             0x40 as f32 / 255.0,
@@ -325,18 +315,6 @@ mod style {
             }
         }
 
-        pub struct ProgressBar;
-
-        impl progress_bar::StyleSheet for ProgressBar {
-            fn style(&self) -> progress_bar::Style {
-                progress_bar::Style {
-                    background: SURFACE.into(),
-                    bar: ACTIVE.into(),
-                    border_radius: 10.0,
-                }
-            }
-        }
-
         pub struct Checkbox;
 
         impl checkbox::StyleSheet for Checkbox {

native/src/widget/progress_bar.rs

@@ -5,13 +5,13 @@ use crate::{Color, Element, Layout, Length, Point, Rectangle, Size, Widget};
 
 use std::ops::RangeInclusive;
 
-pub use iced_style::progress_bar::{Style, StyleSheet};
+pub use iced_style::progress_bar::{Appearance, StyleSheet};
 
 /// A bar that displays progress.
 ///
 /// # Example
 /// ```
-/// # use iced_native::widget::ProgressBar;
+/// # type ProgressBar = iced_native::widget::ProgressBar<iced_native::renderer::Null>;
 /// let value = 50.0;
 ///
 /// ProgressBar::new(0.0..=100.0, value);
@@ -19,15 +19,23 @@ pub use iced_style::progress_bar::{Style, StyleSheet};
 ///
 /// ![Progress bar drawn with `iced_wgpu`](https://user-images.githubusercontent.com/18618951/71662391-a316c200-2d51-11ea-9cef-52758cab85e3.png)
 #[allow(missing_debug_implementations)]
-pub struct ProgressBar<'a> {
+pub struct ProgressBar<Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     range: RangeInclusive<f32>,
     value: f32,
     width: Length,
     height: Option<Length>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a> ProgressBar<'a> {
+impl<Renderer> ProgressBar<Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// The default height of a [`ProgressBar`].
     pub const DEFAULT_HEIGHT: u16 = 30;
 
@@ -42,7 +50,7 @@ impl<'a> ProgressBar<'a> {
             range,
             width: Length::Fill,
             height: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -61,16 +69,17 @@ impl<'a> ProgressBar<'a> {
     /// Sets the style of the [`ProgressBar`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<'a>
+impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -113,7 +122,7 @@ where
                 / (range_end - range_start)
         };
 
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
 
         renderer.fill_quad(
             renderer::Quad {
@@ -142,13 +151,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<ProgressBar<'a>>
+impl<'a, Message, Renderer> From<ProgressBar<Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
-    fn from(progress_bar: ProgressBar<'a>) -> Element<'a, Message, Renderer> {
+    fn from(
+        progress_bar: ProgressBar<Renderer>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(progress_bar)
     }
 }

pure/src/helpers.rs

@@ -228,9 +228,13 @@ where
 ///   * the current value of the [`ProgressBar`].
 ///
 /// [`ProgressBar`]: widget::ProgressBar
-pub fn progress_bar<'a>(
+pub fn progress_bar<Renderer>(
     range: RangeInclusive<f32>,
     value: f32,
-) -> widget::ProgressBar<'a> {
+) -> widget::ProgressBar<Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::progress_bar::StyleSheet,
+{
     widget::ProgressBar::new(range, value)
 }

pure/src/widget/progress_bar.rs

@@ -10,9 +10,10 @@ use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 
 pub use iced_native::widget::progress_bar::*;
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<'a>
+impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -93,9 +94,10 @@ where
 }
 
 impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
-    for ProgressBar<'a>
+    for ProgressBar<Renderer>
 where
     Renderer: iced_native::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)

style/src/progress_bar.rs

@@ -1,9 +1,9 @@
 //! Provide progress feedback to your users.
-use iced_core::{Background, Color};
+use iced_core::Background;
 
 /// The appearance of a progress bar.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub background: Background,
     pub bar: Background,
     pub border_radius: f32,
@@ -11,32 +11,7 @@ pub struct Style {
 
 /// A set of rules that dictate the style of a progress bar.
 pub trait StyleSheet {
-    fn style(&self) -> Style;
-}
+    type Style: Default + Copy;
 
-struct Default;
-
-impl StyleSheet for Default {
-    fn style(&self) -> Style {
-        Style {
-            background: Background::Color(Color::from_rgb(0.6, 0.6, 0.6)),
-            bar: Background::Color(Color::from_rgb(0.3, 0.9, 0.3)),
-            border_radius: 5.0,
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: 'a + StyleSheet,
-{
-    fn from(style: T) -> Self {
-        Box::new(style)
-    }
+    fn appearance(&self, style: Self::Style) -> Appearance;
 }

style/src/theme.rs

@@ -5,6 +5,7 @@ pub use self::palette::Palette;
 use crate::application;
 use crate::button;
 use crate::pane_grid;
+use crate::progress_bar;
 use crate::radio;
 use crate::rule;
 use crate::slider;
@@ -281,6 +282,44 @@ impl pane_grid::StyleSheet for Theme {
     }
 }
 
+/*
+ * Progress Bar
+ */
+#[derive(Clone, Copy)]
+pub enum ProgressBar {
+    Primary,
+    Success,
+    Danger,
+    Custom(fn(&Theme) -> progress_bar::Appearance),
+}
+
+impl Default for ProgressBar {
+    fn default() -> Self {
+        Self::Primary
+    }
+}
+
+impl progress_bar::StyleSheet for Theme {
+    type Style = ProgressBar;
+
+    fn appearance(&self, style: Self::Style) -> progress_bar::Appearance {
+        let palette = self.extended_palette();
+
+        let from_palette = |bar: Color| progress_bar::Appearance {
+            background: palette.background.weak.color.into(),
+            bar: bar.into(),
+            border_radius: 2.0,
+        };
+
+        match style {
+            ProgressBar::Primary => from_palette(palette.primary.base.color),
+            ProgressBar::Success => from_palette(palette.success.base.color),
+            ProgressBar::Danger => from_palette(palette.danger.base.color),
+            ProgressBar::Custom(f) => f(self),
+        }
+    }
+}
+
 /*
  * Rule
  */