Merge pull request #2748 from iced-rs/vertical-progress-bar

Vertical support for `progress_bar`

examples/progress_bar/src/main.rs

@@ -1,4 +1,7 @@
-use iced::widget::{column, progress_bar, slider};
+use iced::widget::{
+    center, center_x, checkbox, column, progress_bar, row, slider,
+    vertical_slider,
+};
 use iced::Element;
 
 pub fn main() -> iced::Result {
@@ -8,25 +11,58 @@ pub fn main() -> iced::Result {
 #[derive(Default)]
 struct Progress {
     value: f32,
+    is_vertical: bool,
 }
 
 #[derive(Debug, Clone, Copy)]
 enum Message {
     SliderChanged(f32),
+    ToggleVertical(bool),
 }
 
 impl Progress {
     fn update(&mut self, message: Message) {
         match message {
             Message::SliderChanged(x) => self.value = x,
+            Message::ToggleVertical(is_vertical) => {
+                self.is_vertical = is_vertical
+            }
         }
     }
 
     fn view(&self) -> Element<Message> {
+        let bar = progress_bar(0.0..=100.0, self.value);
+
         column![
-            progress_bar(0.0..=100.0, self.value),
+            if self.is_vertical {
-            slider(0.0..=100.0, self.value, Message::SliderChanged).step(0.01)
+                center(
+                    row![
+                        bar.vertical(),
+                        vertical_slider(
+                            0.0..=100.0,
+                            self.value,
+                            Message::SliderChanged
+                        )
+                        .step(0.01)
+                    ]
+                    .spacing(20),
+                )
+            } else {
+                center(
+                    column![
+                        bar,
+                        slider(0.0..=100.0, self.value, Message::SliderChanged)
+                            .step(0.01)
+                    ]
+                    .spacing(20),
+                )
+            },
+            center_x(
+                checkbox("Vertical", self.is_vertical)
+                    .on_toggle(Message::ToggleVertical)
+            ),
         ]
+        .spacing(20)
         .padding(20)
         .into()
     }

widget/src/progress_bar.rs

@@ -59,8 +59,9 @@ where
 {
     range: RangeInclusive<f32>,
     value: f32,
-    width: Length,
+    length: Length,
-    height: Option<Length>,
+    girth: Length,
+    is_vertical: bool,
     class: Theme::Class<'a>,
 }
 
@@ -68,8 +69,8 @@ impl<'a, Theme> ProgressBar<'a, Theme>
 where
     Theme: Catalog,
 {
-    /// The default height of a [`ProgressBar`].
+    /// The default girth of a [`ProgressBar`].
-    pub const DEFAULT_HEIGHT: f32 = 30.0;
+    pub const DEFAULT_GIRTH: f32 = 30.0;
 
     /// Creates a new [`ProgressBar`].
     ///
@@ -80,21 +81,30 @@ where
         ProgressBar {
             value: value.clamp(*range.start(), *range.end()),
             range,
-            width: Length::Fill,
+            length: Length::Fill,
-            height: None,
+            girth: Length::from(Self::DEFAULT_GIRTH),
+            is_vertical: false,
             class: Theme::default(),
         }
     }
 
     /// Sets the width of the [`ProgressBar`].
-    pub fn width(mut self, width: impl Into<Length>) -> Self {
+    pub fn length(mut self, length: impl Into<Length>) -> Self {
-        self.width = width.into();
+        self.length = length.into();
         self
     }
 
     /// Sets the height of the [`ProgressBar`].
-    pub fn height(mut self, height: impl Into<Length>) -> Self {
+    pub fn girth(mut self, girth: impl Into<Length>) -> Self {
-        self.height = Some(height.into());
+        self.girth = girth.into();
+        self
+    }
+
+    /// Turns the [`ProgressBar`] into a vertical [`ProgressBar`].
+    ///
+    /// By default, a [`ProgressBar`] is horizontal.
+    pub fn vertical(mut self) -> Self {
+        self.is_vertical = true;
         self
     }
 
@@ -115,6 +125,22 @@ where
         self.class = class.into();
         self
     }
+
+    fn width(&self) -> Length {
+        if self.is_vertical {
+            self.girth
+        } else {
+            self.length
+        }
+    }
+
+    fn height(&self) -> Length {
+        if self.is_vertical {
+            self.length
+        } else {
+            self.girth
+        }
+    }
 }
 
 impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer>
@@ -125,8 +151,8 @@ where
 {
     fn size(&self) -> Size<Length> {
         Size {
-            width: self.width,
+            width: self.width(),
-            height: self.height.unwrap_or(Length::Fixed(Self::DEFAULT_HEIGHT)),
+            height: self.height(),
         }
     }
 
@@ -136,11 +162,7 @@ where
         _renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        layout::atomic(
+        layout::atomic(limits, self.width(), self.height())
-            limits,
-            self.width,
-            self.height.unwrap_or(Length::Fixed(Self::DEFAULT_HEIGHT)),
-        )
     }
 
     fn draw(
@@ -156,11 +178,16 @@ where
         let bounds = layout.bounds();
         let (range_start, range_end) = self.range.clone().into_inner();
 
-        let active_progress_width = if range_start >= range_end {
+        let length = if self.is_vertical {
+            bounds.height
+        } else {
+            bounds.width
+        };
+
+        let active_progress_length = if range_start >= range_end {
             0.0
         } else {
-            bounds.width * (self.value - range_start)
+            length * (self.value - range_start) / (range_end - range_start)
-                / (range_end - range_start)
         };
 
         let style = theme.style(&self.class);
@@ -174,13 +201,23 @@ where
             style.background,
         );
 
-        if active_progress_width > 0.0 {
+        if active_progress_length > 0.0 {
+            let bounds = if self.is_vertical {
+                Rectangle {
+                    y: bounds.y + bounds.height - active_progress_length,
+                    height: active_progress_length,
+                    ..bounds
+                }
+            } else {
+                Rectangle {
+                    width: active_progress_length,
+                    ..bounds
+                }
+            };
+
             renderer.fill_quad(
                 renderer::Quad {
-                    bounds: Rectangle {
+                    bounds,
-                        width: active_progress_width,
-                        ..bounds
-                    },
                     border: Border {
                         color: Color::TRANSPARENT,
                         ..style.border
@@ -274,6 +311,13 @@ pub fn success(theme: &Theme) -> Style {
     styled(palette.background.strong.color, palette.success.base.color)
 }
 
+/// The warning style of a [`ProgressBar`].
+pub fn warning(theme: &Theme) -> Style {
+    let palette = theme.extended_palette();
+
+    styled(palette.background.strong.color, palette.warning.base.color)
+}
+
 /// The danger style of a [`ProgressBar`].
 pub fn danger(theme: &Theme) -> Style {
     let palette = theme.extended_palette();

widget/src/vertical_slider.rs

@@ -42,6 +42,7 @@ use crate::core::mouse;
 use crate::core::renderer;
 use crate::core::touch;
 use crate::core::widget::tree::{self, Tree};
+use crate::core::window;
 use crate::core::{
     self, Clipboard, Element, Event, Length, Pixels, Point, Rectangle, Shell,
     Size, Widget,
@@ -98,6 +99,7 @@ where
     width: f32,
     height: Length,
     class: Theme::Class<'a>,
+    status: Option<Status>,
 }
 
 impl<'a, T, Message, Theme> VerticalSlider<'a, T, Message, Theme>
@@ -144,6 +146,7 @@ where
             width: Self::DEFAULT_WIDTH,
             height: Length::Fill,
             class: Theme::default(),
+            status: None,
         }
     }
 
@@ -390,7 +393,9 @@ where
                     shell.capture_event();
                 }
             }
-            Event::Keyboard(keyboard::Event::KeyPressed { key, .. }) => {
+            Event::Keyboard(keyboard::Event::KeyPressed {
+                ref key, ..
+            }) => {
                 if cursor.is_over(layout.bounds()) {
                     match key {
                         Key::Named(key::Named::ArrowUp) => {
@@ -410,32 +415,36 @@ where
             }
             _ => {}
         }
+
+        let current_status = if state.is_dragging {
+            Status::Dragged
+        } else if cursor.is_over(layout.bounds()) {
+            Status::Hovered
+        } else {
+            Status::Active
+        };
+
+        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
+            self.status = Some(current_status);
+        } else if self.status.is_some_and(|status| status != current_status) {
+            shell.request_redraw();
+        }
     }
 
     fn draw(
         &self,
-        tree: &Tree,
+        _tree: &Tree,
         renderer: &mut Renderer,
         theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
-        cursor: mouse::Cursor,
+        _cursor: mouse::Cursor,
         _viewport: &Rectangle,
     ) {
-        let state = tree.state.downcast_ref::<State>();
         let bounds = layout.bounds();
-        let is_mouse_over = cursor.is_over(bounds);
 
-        let style = theme.style(
+        let style =
-            &self.class,
+            theme.style(&self.class, self.status.unwrap_or(Status::Active));
-            if state.is_dragging {
-                Status::Dragged
-            } else if is_mouse_over {
-                Status::Hovered
-            } else {
-                Status::Active
-            },
-        );
 
         let (handle_width, handle_height, handle_border_radius) =
             match style.handle.shape {