Merge pull request #1669 from GyulyVGC/master

Added scrollable style `focused` to be displayed when mouse is over the scrollable area

Author: hecrj

examples/scrollable/src/main.rs

@@ -338,22 +338,36 @@ impl scrollable::StyleSheet for ScrollbarCustomStyle {
         style.active(&theme::Scrollable::Default)
     }
 
-    fn hovered(&self, style: &Self::Style) -> Scrollbar {
-        style.hovered(&theme::Scrollable::Default)
+    fn hovered(
+        &self,
+        style: &Self::Style,
+        is_mouse_over_scrollbar: bool,
+    ) -> Scrollbar {
+        style.hovered(&theme::Scrollable::Default, is_mouse_over_scrollbar)
     }
 
-    fn hovered_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        Scrollbar {
-            background: style.active(&theme::Scrollable::default()).background,
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Default::default(),
-            scroller: Scroller {
-                color: Color::from_rgb8(250, 85, 134),
+    fn hovered_horizontal(
+        &self,
+        style: &Self::Style,
+        is_mouse_over_scrollbar: bool,
+    ) -> Scrollbar {
+        if is_mouse_over_scrollbar {
+            Scrollbar {
+                background: style
+                    .active(&theme::Scrollable::default())
+                    .background,
                 border_radius: 0.0,
                 border_width: 0.0,
                 border_color: Default::default(),
-            },
+                scroller: Scroller {
+                    color: Color::from_rgb8(250, 85, 134),
+                    border_radius: 0.0,
+                    border_width: 0.0,
+                    border_color: Default::default(),
+                },
+            }
+        } else {
+            self.active(style)
         }
     }
 }

native/src/widget/scrollable.rs

@@ -857,8 +857,8 @@ pub fn draw<Renderer>(
                 if let Some(scrollbar) = scrollbars.y {
                     let style = if state.y_scroller_grabbed_at.is_some() {
                         theme.dragging(style)
-                    } else if mouse_over_y_scrollbar {
-                        theme.hovered(style)
+                    } else if mouse_over_scrollable {
+                        theme.hovered(style, mouse_over_y_scrollbar)
                     } else {
                         theme.active(style)
                     };
@@ -870,8 +870,8 @@ pub fn draw<Renderer>(
                 if let Some(scrollbar) = scrollbars.x {
                     let style = if state.x_scroller_grabbed_at.is_some() {
                         theme.dragging_horizontal(style)
-                    } else if mouse_over_x_scrollbar {
-                        theme.hovered_horizontal(style)
+                    } else if mouse_over_scrollable {
+                        theme.hovered_horizontal(style, mouse_over_x_scrollbar)
                     } else {
                         theme.active_horizontal(style)
                     };

style/src/scrollable.rs

@@ -37,26 +37,34 @@ pub trait StyleSheet {
     /// Produces the style of an active scrollbar.
     fn active(&self, style: &Self::Style) -> Scrollbar;
 
-    /// Produces the style of a hovered scrollbar.
-    fn hovered(&self, style: &Self::Style) -> Scrollbar;
+    /// Produces the style of a scrollbar when the scrollable is being hovered.
+    fn hovered(
+        &self,
+        style: &Self::Style,
+        is_mouse_over_scrollbar: bool,
+    ) -> Scrollbar;
 
     /// Produces the style of a scrollbar that is being dragged.
     fn dragging(&self, style: &Self::Style) -> Scrollbar {
-        self.hovered(style)
+        self.hovered(style, true)
     }
 
     /// Produces the style of an active horizontal scrollbar.
     fn active_horizontal(&self, style: &Self::Style) -> Scrollbar {
         self.active(style)
     }
 
-    /// Produces the style of a hovered horizontal scrollbar.
-    fn hovered_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        self.hovered(style)
+    /// Produces the style of a horizontal scrollbar when the scrollable is being hovered.
+    fn hovered_horizontal(
+        &self,
+        style: &Self::Style,
+        is_mouse_over_scrollbar: bool,
+    ) -> Scrollbar {
+        self.hovered(style, is_mouse_over_scrollbar)
     }
 
     /// Produces the style of a horizontal scrollbar that is being dragged.
     fn dragging_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        self.hovered_horizontal(style)
+        self.hovered_horizontal(style, true)
     }
 }

style/src/theme.rs

@@ -906,31 +906,41 @@ impl scrollable::StyleSheet for Theme {
         }
     }
 
-    fn hovered(&self, style: &Self::Style) -> scrollable::Scrollbar {
+    fn hovered(
+        &self,
+        style: &Self::Style,
+        is_mouse_over_scrollbar: bool,
+    ) -> scrollable::Scrollbar {
         match style {
             Scrollable::Default => {
-                let palette = self.extended_palette();
+                if is_mouse_over_scrollbar {
+                    let palette = self.extended_palette();
 
-                scrollable::Scrollbar {
-                    background: palette.background.weak.color.into(),
-                    border_radius: 2.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                    scroller: scrollable::Scroller {
-                        color: palette.primary.strong.color,
+                    scrollable::Scrollbar {
+                        background: palette.background.weak.color.into(),
                         border_radius: 2.0,
                         border_width: 0.0,
                         border_color: Color::TRANSPARENT,
-                    },
+                        scroller: scrollable::Scroller {
+                            color: palette.primary.strong.color,
+                            border_radius: 2.0,
+                            border_width: 0.0,
+                            border_color: Color::TRANSPARENT,
+                        },
+                    }
+                } else {
+                    self.active(style)
                 }
             }
-            Scrollable::Custom(custom) => custom.hovered(self),
+            Scrollable::Custom(custom) => {
+                custom.hovered(self, is_mouse_over_scrollbar)
+            }
         }
     }
 
     fn dragging(&self, style: &Self::Style) -> scrollable::Scrollbar {
         match style {
-            Scrollable::Default => self.hovered(style),
+            Scrollable::Default => self.hovered(style, true),
             Scrollable::Custom(custom) => custom.dragging(self),
         }
     }
@@ -942,10 +952,16 @@ impl scrollable::StyleSheet for Theme {
         }
     }
 
-    fn hovered_horizontal(&self, style: &Self::Style) -> scrollable::Scrollbar {
+    fn hovered_horizontal(
+        &self,
+        style: &Self::Style,
+        is_mouse_over_scrollbar: bool,
+    ) -> scrollable::Scrollbar {
         match style {
-            Scrollable::Default => self.hovered(style),
-            Scrollable::Custom(custom) => custom.hovered_horizontal(self),
+            Scrollable::Default => self.hovered(style, is_mouse_over_scrollbar),
+            Scrollable::Custom(custom) => {
+                custom.hovered_horizontal(self, is_mouse_over_scrollbar)
+            }
         }
     }
 
@@ -954,7 +970,7 @@ impl scrollable::StyleSheet for Theme {
         style: &Self::Style,
     ) -> scrollable::Scrollbar {
         match style {
-            Scrollable::Default => self.hovered_horizontal(style),
+            Scrollable::Default => self.hovered_horizontal(style, true),
             Scrollable::Custom(custom) => custom.dragging_horizontal(self),
         }
     }