Add support for embedded scrollbars for scrollable

Co-authored-by: dtzxporter <dtzxporter@users.noreply.github.com>
iced-rs · Jul 11, 2024 · 8ae4e09 · 8ae4e09
1 parent 3c55e07
commit 8ae4e09
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 211 deletions.
diff --git a/core/src/padding.rs b/core/src/padding.rs
@@ -1,4 +1,4 @@
-use crate::Size;
+use crate::{Pixels, Size};
 
 /// An amount of space to pad for each side of a box
 ///
@@ -54,7 +54,7 @@ impl Padding {
         left: 0.0,
     };
 
-    /// Create a Padding that is equal on all sides
+    /// Create a [`Padding`] that is equal on all sides.
     pub const fn new(padding: f32) -> Padding {
         Padding {
             top: padding,
@@ -64,6 +64,38 @@ impl Padding {
         }
     }
 
+    /// Create some top [`Padding`].
+    pub fn top(padding: impl Into<Pixels>) -> Self {
+        Self {
+            top: padding.into().0,
+            ..Self::ZERO
+        }
+    }
+
+    /// Create some right [`Padding`].
+    pub fn right(padding: impl Into<Pixels>) -> Self {
+        Self {
+            right: padding.into().0,
+            ..Self::ZERO
+        }
+    }
+
+    /// Create some bottom [`Padding`].
+    pub fn bottom(padding: impl Into<Pixels>) -> Self {
+        Self {
+            bottom: padding.into().0,
+            ..Self::ZERO
+        }
+    }
+
+    /// Create some left [`Padding`].
+    pub fn left(padding: impl Into<Pixels>) -> Self {
+        Self {
+            left: padding.into().0,
+            ..Self::ZERO
+        }
+    }
+
     /// Returns the total amount of vertical [`Padding`].
     pub fn vertical(self) -> f32 {
         self.top + self.bottom

diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
@@ -1,7 +1,6 @@
-use iced::widget::scrollable::Properties;
 use iced::widget::{
     button, column, container, horizontal_space, progress_bar, radio, row,
-    scrollable, slider, text, vertical_space, Scrollable,
+    scrollable, slider, text, vertical_space,
 };
 use iced::{Alignment, Border, Color, Element, Length, Task, Theme};
 
@@ -203,7 +202,7 @@ impl ScrollableDemo {
 
         let scrollable_content: Element<Message> =
             Element::from(match self.scrollable_direction {
-                Direction::Vertical => Scrollable::with_direction(
+                Direction::Vertical => scrollable(
                     column![
                         scroll_to_end_button(),
                         text("Beginning!"),
@@ -216,19 +215,19 @@ impl ScrollableDemo {
                     .align_items(Alignment::Center)
                     .padding([40, 0, 40, 0])
                     .spacing(40),
-                    scrollable::Direction::Vertical(
-                        Properties::new()
-                            .width(self.scrollbar_width)
-                            .margin(self.scrollbar_margin)
-                            .scroller_width(self.scroller_width)
-                            .alignment(self.alignment),
-                    ),
                 )
+                .direction(scrollable::Direction::Vertical(
+                    scrollable::Scrollbar::new()
+                        .width(self.scrollbar_width)
+                        .margin(self.scrollbar_margin)
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment),
+                ))
                 .width(Length::Fill)
                 .height(Length::Fill)
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
-                Direction::Horizontal => Scrollable::with_direction(
+                Direction::Horizontal => scrollable(
                     row![
                         scroll_to_end_button(),
                         text("Beginning!"),
@@ -242,19 +241,19 @@ impl ScrollableDemo {
                     .align_items(Alignment::Center)
                     .padding([0, 40, 0, 40])
                     .spacing(40),
-                    scrollable::Direction::Horizontal(
-                        Properties::new()
-                            .width(self.scrollbar_width)
-                            .margin(self.scrollbar_margin)
-                            .scroller_width(self.scroller_width)
-                            .alignment(self.alignment),
-                    ),
                 )
+                .direction(scrollable::Direction::Horizontal(
+                    scrollable::Scrollbar::new()
+                        .width(self.scrollbar_width)
+                        .margin(self.scrollbar_margin)
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment),
+                ))
                 .width(Length::Fill)
                 .height(Length::Fill)
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
-                Direction::Multi => Scrollable::with_direction(
+                Direction::Multi => scrollable(
                     //horizontal content
                     row![
                         column![
@@ -284,19 +283,19 @@ impl ScrollableDemo {
                     .align_items(Alignment::Center)
                     .padding([0, 40, 0, 40])
                     .spacing(40),
-                    {
-                        let properties = Properties::new()
-                            .width(self.scrollbar_width)
-                            .margin(self.scrollbar_margin)
-                            .scroller_width(self.scroller_width)
-                            .alignment(self.alignment);
-
-                        scrollable::Direction::Both {
-                            horizontal: properties,
-                            vertical: properties,
-                        }
-                    },
                 )
+                .direction({
+                    let scrollbar = scrollable::Scrollbar::new()
+                        .width(self.scrollbar_width)
+                        .margin(self.scrollbar_margin)
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment);
+
+                    scrollable::Direction::Both {
+                        horizontal: scrollbar,
+                        vertical: scrollbar,
+                    }
+                })
                 .width(Length::Fill)
                 .height(Length::Fill)
                 .id(SCROLLABLE_ID.clone())

diff --git a/widget/src/overlay/menu.rs b/widget/src/overlay/menu.rs
@@ -200,21 +200,18 @@ where
             class,
         } = menu;
 
-        let list = Scrollable::with_direction(
-            List {
-                options,
-                hovered_option,
-                on_selected,
-                on_option_hovered,
-                font,
-                text_size,
-                text_line_height,
-                text_shaping,
-                padding,
-                class,
-            },
-            scrollable::Direction::default(),
-        );
+        let list = Scrollable::new(List {
+            options,
+            hovered_option,
+            on_selected,
+            on_option_hovered,
+            font,
+            text_size,
+            text_line_height,
+            text_shaping,
+            padding,
+            class,
+        });
 
         state.tree.diff(&list as &dyn Widget<_, _, _>);