Add round scroll bar option

src/app_handle.rs

@@ -302,6 +302,15 @@ impl<V: View> AppHandle<V> {
             saved_font_styles: Vec::new(),
             saved_line_heights: Vec::new(),
             saved_z_indexes: Vec::new(),
+            scroll_bar_color: None,
+            scroll_bar_rounded: None,
+            scroll_bar_thickness: None,
+            scroll_bar_edge_width: None,
+
+            saved_scroll_bar_colors: Vec::new(),
+            saved_scroll_bar_roundeds: Vec::new(),
+            saved_scroll_bar_thicknesses: Vec::new(),
+            saved_scroll_bar_edge_widths: Vec::new(),
         };
         cx.paint_state.renderer.as_mut().unwrap().begin();
         self.view.paint_main(&mut cx);

src/context.rs

@@ -681,6 +681,10 @@ pub struct LayoutCx<'a> {
     app_state: &'a mut AppState,
     pub(crate) viewport: Option<Rect>,
     pub(crate) color: Option<Color>,
+    pub(crate) scroll_bar_color: Option<Color>,
+    pub(crate) scroll_bar_rounded: Option<bool>,
+    pub(crate) scroll_bar_thickness: Option<f32>,
+    pub(crate) scroll_bar_edge_width: Option<f32>,
     pub(crate) font_size: Option<f32>,
     pub(crate) font_family: Option<String>,
     pub(crate) font_weight: Option<Weight>,
@@ -689,6 +693,10 @@ pub struct LayoutCx<'a> {
     pub(crate) window_origin: Point,
     pub(crate) saved_viewports: Vec<Option<Rect>>,
     pub(crate) saved_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_roundeds: Vec<Option<bool>>,
+    pub(crate) saved_scroll_bar_thicknesses: Vec<Option<f32>>,
+    pub(crate) saved_scroll_bar_edge_widths: Vec<Option<f32>>,
     pub(crate) saved_font_sizes: Vec<Option<f32>>,
     pub(crate) saved_font_families: Vec<Option<String>>,
     pub(crate) saved_font_weights: Vec<Option<Weight>>,
@@ -717,15 +725,31 @@ impl<'a> LayoutCx<'a> {
             saved_font_styles: Vec::new(),
             saved_line_heights: Vec::new(),
             saved_window_origins: Vec::new(),
+            scroll_bar_color: None,
+            scroll_bar_rounded: None,
+            scroll_bar_thickness: None,
+            scroll_bar_edge_width: None,
+            saved_scroll_bar_colors: Vec::new(),
+            saved_scroll_bar_roundeds: Vec::new(),
+            saved_scroll_bar_thicknesses: Vec::new(),
+            saved_scroll_bar_edge_widths: Vec::new(),
         }
     }
 
     pub(crate) fn clear(&mut self) {
         self.viewport = None;
+        self.scroll_bar_color = None;
+        self.scroll_bar_rounded = None;
+        self.scroll_bar_thickness = None;
+        self.scroll_bar_edge_width = None;
         self.font_size = None;
         self.window_origin = Point::ZERO;
         self.saved_colors.clear();
         self.saved_viewports.clear();
+        self.saved_scroll_bar_colors.clear();
+        self.saved_scroll_bar_roundeds.clear();
+        self.saved_scroll_bar_thicknesses.clear();
+        self.saved_scroll_bar_edge_widths.clear();
         self.saved_font_sizes.clear();
         self.saved_font_families.clear();
         self.saved_font_weights.clear();
@@ -737,6 +761,12 @@ impl<'a> LayoutCx<'a> {
     pub fn save(&mut self) {
         self.saved_viewports.push(self.viewport);
         self.saved_colors.push(self.color);
+        self.saved_scroll_bar_colors.push(self.scroll_bar_color);
+        self.saved_scroll_bar_roundeds.push(self.scroll_bar_rounded);
+        self.saved_scroll_bar_thicknesses
+            .push(self.scroll_bar_thickness);
+        self.saved_scroll_bar_edge_widths
+            .push(self.scroll_bar_edge_width);
         self.saved_font_sizes.push(self.font_size);
         self.saved_font_families.push(self.font_family.clone());
         self.saved_font_weights.push(self.font_weight);
@@ -748,6 +778,10 @@ impl<'a> LayoutCx<'a> {
     pub fn restore(&mut self) {
         self.viewport = self.saved_viewports.pop().unwrap_or_default();
         self.color = self.saved_colors.pop().unwrap_or_default();
+        self.scroll_bar_color = self.saved_scroll_bar_colors.pop().unwrap_or_default();
+        self.scroll_bar_rounded = self.saved_scroll_bar_roundeds.pop().unwrap_or_default();
+        self.scroll_bar_thickness = self.saved_scroll_bar_thicknesses.pop().unwrap_or_default();
+        self.scroll_bar_edge_width = self.saved_scroll_bar_edge_widths.pop().unwrap_or_default();
         self.font_size = self.saved_font_sizes.pop().unwrap_or_default();
         self.font_family = self.saved_font_families.pop().unwrap_or_default();
         self.font_weight = self.saved_font_weights.pop().unwrap_or_default();
@@ -764,6 +798,22 @@ impl<'a> LayoutCx<'a> {
         self.app_state
     }
 
+    pub fn current_scroll_bar_color(&self) -> Option<Color> {
+        self.scroll_bar_color
+    }
+
+    pub fn current_scroll_bar_rounded(&self) -> Option<bool> {
+        self.scroll_bar_rounded
+    }
+
+    pub fn current_scroll_bar_thickness(&self) -> Option<f32> {
+        self.scroll_bar_thickness
+    }
+
+    pub fn current_scroll_bar_edge_width(&self) -> Option<f32> {
+        self.scroll_bar_edge_width
+    }
+
     pub fn current_font_size(&self) -> Option<f32> {
         self.font_size
     }
@@ -862,6 +912,10 @@ pub struct PaintCx<'a> {
     pub(crate) transform: Affine,
     pub(crate) clip: Option<Rect>,
     pub(crate) color: Option<Color>,
+    pub(crate) scroll_bar_color: Option<Color>,
+    pub(crate) scroll_bar_rounded: Option<bool>,
+    pub(crate) scroll_bar_thickness: Option<f32>,
+    pub(crate) scroll_bar_edge_width: Option<f32>,
     pub(crate) font_size: Option<f32>,
     pub(crate) font_family: Option<String>,
     pub(crate) font_weight: Option<Weight>,
@@ -871,6 +925,10 @@ pub struct PaintCx<'a> {
     pub(crate) saved_transforms: Vec<Affine>,
     pub(crate) saved_clips: Vec<Option<Rect>>,
     pub(crate) saved_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_roundeds: Vec<Option<bool>>,
+    pub(crate) saved_scroll_bar_thicknesses: Vec<Option<f32>>,
+    pub(crate) saved_scroll_bar_edge_widths: Vec<Option<f32>>,
     pub(crate) saved_font_sizes: Vec<Option<f32>>,
     pub(crate) saved_font_families: Vec<Option<String>>,
     pub(crate) saved_font_weights: Vec<Option<Weight>>,
@@ -884,6 +942,12 @@ impl<'a> PaintCx<'a> {
         self.saved_transforms.push(self.transform);
         self.saved_clips.push(self.clip);
         self.saved_colors.push(self.color);
+        self.saved_scroll_bar_colors.push(self.scroll_bar_color);
+        self.saved_scroll_bar_roundeds.push(self.scroll_bar_rounded);
+        self.saved_scroll_bar_thicknesses
+            .push(self.scroll_bar_thickness);
+        self.saved_scroll_bar_edge_widths
+            .push(self.scroll_bar_edge_width);
         self.saved_font_sizes.push(self.font_size);
         self.saved_font_families.push(self.font_family.clone());
         self.saved_font_weights.push(self.font_weight);
@@ -896,6 +960,10 @@ impl<'a> PaintCx<'a> {
         self.transform = self.saved_transforms.pop().unwrap_or_default();
         self.clip = self.saved_clips.pop().unwrap_or_default();
         self.color = self.saved_colors.pop().unwrap_or_default();
+        self.scroll_bar_color = self.saved_scroll_bar_colors.pop().unwrap_or_default();
+        self.scroll_bar_rounded = self.saved_scroll_bar_roundeds.pop().unwrap_or_default();
+        self.scroll_bar_thickness = self.saved_scroll_bar_thicknesses.pop().unwrap_or_default();
+        self.scroll_bar_edge_width = self.saved_scroll_bar_edge_widths.pop().unwrap_or_default();
         self.font_size = self.saved_font_sizes.pop().unwrap_or_default();
         self.font_family = self.saved_font_families.pop().unwrap_or_default();
         self.font_weight = self.saved_font_weights.pop().unwrap_or_default();
@@ -920,6 +988,22 @@ impl<'a> PaintCx<'a> {
         self.color
     }
 
+    pub fn current_scroll_bar_color(&self) -> Option<Color> {
+        self.scroll_bar_color
+    }
+
+    pub fn current_scroll_bar_rounded(&self) -> Option<bool> {
+        self.scroll_bar_rounded
+    }
+
+    pub fn current_scroll_bar_thickness(&self) -> Option<f32> {
+        self.scroll_bar_thickness
+    }
+
+    pub fn current_scroll_bar_edge_width(&self) -> Option<f32> {
+        self.scroll_bar_edge_width
+    }
+
     pub fn current_font_size(&self) -> Option<f32> {
         self.font_size
     }

src/style.rs

@@ -265,6 +265,10 @@ define_styles!(
     color nocb: Option<Color> = None,
     background nocb: Option<Color> = None,
     box_shadow nocb: Option<BoxShadow> = None,
+    scroll_bar_color nocb: Option<Color> = None,
+    scroll_bar_rounded nocb: Option<bool> = None,
+    scroll_bar_thickness nocb: Option<f32> = None,
+    scroll_bar_edge_width nocb: Option<f32> = None,
     font_size nocb: Option<f32> = None,
     font_family nocb: Option<String> = None,
     font_weight nocb: Option<Weight> = None,
@@ -612,6 +616,26 @@ impl Style {
         self
     }
 
+    pub fn scroll_bar_color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
+        self.scroll_bar_color = color.into().map(Some);
+        self
+    }
+
+    pub fn scroll_bar_rounded(mut self, rounded: impl Into<StyleValue<bool>>) -> Self {
+        self.scroll_bar_rounded = rounded.into().map(Some);
+        self
+    }
+
+    pub fn scroll_bar_thickness(mut self, thickness: impl Into<StyleValue<f32>>) -> Self {
+        self.scroll_bar_thickness = thickness.into().map(Some);
+        self
+    }
+
+    pub fn scroll_bar_edge_width(mut self, edge_width: impl Into<StyleValue<f32>>) -> Self {
+        self.scroll_bar_edge_width = edge_width.into().map(Some);
+        self
+    }
+
     pub fn font_size(mut self, size: impl Into<StyleValue<f32>>) -> Self {
         self.font_size = size.into().map(Some);
         self

src/view.rs

@@ -196,6 +196,18 @@ pub trait View {
         if style.color.is_some() {
             cx.color = style.color;
         }
+        if style.scroll_bar_color.is_some() {
+            cx.scroll_bar_color = style.scroll_bar_color;
+        }
+        if style.scroll_bar_rounded.is_some() {
+            cx.scroll_bar_rounded = style.scroll_bar_rounded;
+        }
+        if style.scroll_bar_thickness.is_some() {
+            cx.scroll_bar_thickness = style.scroll_bar_thickness;
+        }
+        if style.scroll_bar_edge_width.is_some() {
+            cx.scroll_bar_edge_width = style.scroll_bar_edge_width;
+        }
         if style.font_size.is_some() {
             cx.font_size = style.font_size;
         }
@@ -639,6 +651,18 @@ pub trait View {
             if style.color.is_some() {
                 cx.color = style.color;
             }
+            if style.scroll_bar_color.is_some() {
+                cx.scroll_bar_color = style.scroll_bar_color;
+            }
+            if style.scroll_bar_rounded.is_some() {
+                cx.scroll_bar_rounded = style.scroll_bar_rounded;
+            }
+            if style.scroll_bar_thickness.is_some() {
+                cx.scroll_bar_thickness = style.scroll_bar_thickness;
+            }
+            if style.scroll_bar_edge_width.is_some() {
+                cx.scroll_bar_edge_width = style.scroll_bar_edge_width;
+            }
             if style.font_size.is_some() {
                 cx.font_size = style.font_size;
             }

src/views/decorator.rs

@@ -35,10 +35,10 @@ pub trait Decorators: View + Sized {
     /// ```
     /// If you are returning from a function that produces a view, you may want
     /// to use `base_style` for the returned [`View`] instead.  
-    fn style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style(style);
         });
         self
@@ -61,49 +61,49 @@ pub trait Decorators: View + Sized {
     ///     ))
     /// }
     /// ```
-    fn base_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn base_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_base_style(style);
         });
         self
     }
 
     /// The visual style to apply when the mouse hovers over the element
-    fn hover_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn hover_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style_selector(style, StyleSelector::Hover);
         });
         self
     }
 
     /// The visual style to apply when the mouse hovers over the element
-    fn dragging_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn dragging_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style_selector(style, StyleSelector::Dragging);
         });
         self
     }
 
-    fn focus_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn focus_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style_selector(style, StyleSelector::Focus);
         });
         self
     }
 
     /// Similar to the `:focus-visible` css selector, this style only activates when tab navigation is used.
-    fn focus_visible_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn focus_visible_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style_selector(style, StyleSelector::FocusVisible);
         });
         self
@@ -122,28 +122,28 @@ pub trait Decorators: View + Sized {
         self
     }
 
-    fn active_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn active_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style_selector(style, StyleSelector::Active);
         });
         self
     }
 
-    fn disabled_style(self, style: impl Fn() -> Style + 'static) -> Self {
+    fn disabled_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_style_selector(style, StyleSelector::Disabled);
         });
         self
     }
 
-    fn responsive_style(self, size: ScreenSize, style: impl Fn() -> Style + 'static) -> Self {
+    fn responsive_style(self, size: ScreenSize, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style();
+            let style = style(Style::BASE);
             id.update_responsive_style(style, size);
         });
         self

src/views/label.rs

@@ -153,15 +153,15 @@ impl View for Label {
             } else {
                 let text_overflow = cx.app_state_mut().get_computed_style(self.id).text_overflow;
                 if self.color != cx.color
-                    || self.font_size != cx.current_font_size()
+                    || self.font_size != cx.font_size
                     || self.font_family.as_deref() != cx.current_font_family()
                     || self.font_weight != cx.font_weight
                     || self.font_style != cx.font_style
                     || self.line_height != cx.line_height
                     || self.text_overflow != text_overflow
                 {
                     self.color = cx.color;
-                    self.font_size = cx.current_font_size();
+                    self.font_size = cx.font_size;
                     self.font_family = cx.current_font_family().map(|s| s.to_string());
                     self.font_weight = cx.font_weight;
                     self.font_style = cx.font_style;