change(widget): custom coloring for progressbar

examples/progressbar.rs

@@ -1,8 +1,17 @@
-use iced::{slider, Column, Element, Sandbox, Settings, Slider};
+use iced::{
+    settings::Window, slider, Background, Color, Column, Element, Sandbox,
+    Settings, Slider,
+};
 use iced_winit::Progressbar;
 
 pub fn main() {
-    Progress::run(Settings::default())
+    Progress::run(Settings {
+        window: Window {
+            size: (700, 300),
+            resizable: true,
+            decorations: true,
+        },
+    })
 }
 
 #[derive(Default)]
@@ -29,17 +38,20 @@ impl Sandbox for Progress {
 
     fn update(&mut self, message: Message) {
         match message {
-            Message::SliderChanged(x) => {
+            Message::SliderChanged(x) => self.value = x,
-                self.value = x;
-            }
         }
     }
 
     fn view(&mut self) -> Element<Message> {
         Column::new()
             .padding(20)
-            .push(Progressbar::new(0.0..=100.0, self.value))
+            .push(
-            .padding(20)
+                Progressbar::new(0.0..=100.0, self.value)
+                    .background(Background::Color(Color::from_rgb(
+                        0.6, 0.6, 0.6,
+                    )))
+                    .active_color(Color::from_rgb(0.0, 0.95, 0.0)),
+            )
             .push(Slider::new(
                 &mut self.progressbar_slider,
                 0.0..=100.0,

native/src/widget/progressbar.rs

@@ -3,7 +3,8 @@
 //!
 //! [`Progressbar`]: struct.Progressbar.html
 use crate::{
-    layout, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
+    layout, Background, Color, Element, Hasher, Layout, Length, Point,
+    Rectangle, Size, Widget,
 };
 
 use std::{hash::Hash, ops::RangeInclusive};
@@ -14,17 +15,19 @@ use std::{hash::Hash, ops::RangeInclusive};
 ///
 /// ```
 /// # use iced_native::Progressbar;
-///
+/// 
+/// let value = 50.0;
 /// Progressbar::new(0.0..=100.0, value);
 /// ```
 ///
-/// TODO: Get a progressbar render
+/// ![Default Progressbar](https://user-images.githubusercontent.com/18618951/71662391-a316c200-2d51-11ea-9cef-52758cab85e3.png)
-/// ![Slider drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/slider.png?raw=true)
 #[allow(missing_debug_implementations)]
 pub struct Progressbar {
     range: RangeInclusive<f32>,
     value: f32,
     width: Length,
+    background: Option<Background>,
+    active_color: Option<Color>,
 }
 
 impl Progressbar {
@@ -40,6 +43,8 @@ impl Progressbar {
             value: value.max(*range.start()).min(*range.end()),
             range,
             width: Length::Fill,
+            background: None,
+            active_color: None,
         }
     }
 
@@ -50,6 +55,22 @@ impl Progressbar {
         self.width = width;
         self
     }
+
+    /// Sets the background of the [`Progressbar`].
+    ///
+    /// [`Progressbar`]: struct.Progressbar.html
+    pub fn background(mut self, background: Background) -> Self {
+        self.background = Some(background);
+        self
+    }
+
+    /// Sets the active color of the [`Progressbar`].
+    ///
+    /// [`Progressbar`]: struct.Progressbar.html
+    pub fn active_color(mut self, active_color: Color) -> Self {
+        self.active_color = Some(active_color);
+        self
+    }
 }
 
 impl<Message, Renderer> Widget<Message, Renderer> for Progressbar
@@ -84,7 +105,13 @@ where
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Renderer::Output {
-        renderer.draw(layout.bounds(), self.range.clone(), self.value)
+        renderer.draw(
+            layout.bounds(),
+            self.range.clone(),
+            self.value,
+            self.background,
+            self.active_color,
+        )
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
@@ -112,6 +139,8 @@ pub trait Renderer: crate::Renderer {
     ///   * the bounds of the [`Progressbar`]
     ///   * the range of values of the [`Progressbar`]
     ///   * the current value of the [`Progressbar`]
+    ///   * maybe a specific background of the [`Progressbar`]
+    ///   * maybe a specific active color of the [`Progressbar`]
     ///
     /// [`Progressbar`]: struct.Progressbar.html
     /// [`State`]: struct.State.html
@@ -121,6 +150,8 @@ pub trait Renderer: crate::Renderer {
         bounds: Rectangle,
         range: RangeInclusive<f32>,
         value: f32,
+        background: Option<Background>,
+        active_color: Option<Color>,
     ) -> Self::Output;
 }
 

wgpu/src/renderer/widget/progressbar.rs

@@ -11,6 +11,8 @@ impl progressbar::Renderer for Renderer {
         bounds: Rectangle,
         range: std::ops::RangeInclusive<f32>,
         value: f32,
+        background: Option<Background>,
+        active_color: Option<Color>,
     ) -> Self::Output {
         let (range_start, range_end) = range.into_inner();
         let active_progress_width = bounds.width
@@ -19,7 +21,9 @@ impl progressbar::Renderer for Renderer {
         let background = Primitive::Group {
             primitives: vec![Primitive::Quad {
                 bounds: Rectangle { ..bounds },
-                background: Color::from_rgb(0.6, 0.6, 0.6).into(),
+                background: background
+                    .unwrap_or(Background::Color([0.6, 0.6, 0.6].into()))
+                    .into(),
                 border_radius: 5,
             }],
         };
@@ -29,8 +33,10 @@ impl progressbar::Renderer for Renderer {
                 width: active_progress_width,
                 ..bounds
             },
-            background: Background::Color([0.0, 0.95, 0.0].into()),
+            background: Background::Color(
-            border_radius: 4,
+                active_color.unwrap_or([0.0, 0.95, 0.0].into()),
+            ),
+            border_radius: 5,
         };
 
         (