Improve slider widget styling. (#2444)

* Overhaul slider styling

* Add `border`  attribute to `Rail`
* Replace `color` attribute with `background` for handle

* Replace `colors` with `backgrounds` for the Rail.

* code consistency

* remove unused import
This commit is contained in:
B0ney 2024-09-10 22:30:37 +01:00 committed by GitHub
parent ae58a40398
commit abd323181d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 22 deletions

View file

@ -9,8 +9,8 @@ use crate::core::renderer;
use crate::core::touch;
use crate::core::widget::tree::{self, Tree};
use crate::core::{
self, Clipboard, Color, Element, Layout, Length, Pixels, Point, Rectangle,
Shell, Size, Theme, Widget,
self, Background, Clipboard, Color, Element, Layout, Length, Pixels, Point,
Rectangle, Shell, Size, Theme, Widget,
};
use std::ops::RangeInclusive;
@ -408,10 +408,10 @@ where
width: offset + handle_width / 2.0,
height: style.rail.width,
},
border: border::rounded(style.rail.border_radius),
border: style.rail.border,
..renderer::Quad::default()
},
style.rail.colors.0,
style.rail.backgrounds.0,
);
renderer.fill_quad(
@ -422,10 +422,10 @@ where
width: bounds.width - offset - handle_width / 2.0,
height: style.rail.width,
},
border: border::rounded(style.rail.border_radius),
border: style.rail.border,
..renderer::Quad::default()
},
style.rail.colors.1,
style.rail.backgrounds.1,
);
renderer.fill_quad(
@ -443,7 +443,7 @@ where
},
..renderer::Quad::default()
},
style.handle.color,
style.handle.background,
);
}
@ -524,12 +524,12 @@ impl Style {
/// The appearance of a slider rail
#[derive(Debug, Clone, Copy)]
pub struct Rail {
/// The colors of the rail of the slider.
pub colors: (Color, Color),
/// The backgrounds of the rail of the slider.
pub backgrounds: (Background, Background),
/// The width of the stroke of a slider rail.
pub width: f32,
/// The border radius of the corners of the rail.
pub border_radius: border::Radius,
/// The border of the rail.
pub border: Border,
}
/// The appearance of the handle of a slider.
@ -537,8 +537,8 @@ pub struct Rail {
pub struct Handle {
/// The shape of the handle.
pub shape: HandleShape,
/// The [`Color`] of the handle.
pub color: Color,
/// The [`Background`] of the handle.
pub background: Background,
/// The border width of the handle.
pub border_width: f32,
/// The border [`Color`] of the handle.
@ -601,13 +601,17 @@ pub fn default(theme: &Theme, status: Status) -> Style {
Style {
rail: Rail {
colors: (color, palette.secondary.base.color),
backgrounds: (color.into(), palette.secondary.base.color.into()),
width: 4.0,
border_radius: 2.0.into(),
border: Border {
radius: 2.0.into(),
width: 0.0,
color: Color::TRANSPARENT,
},
},
handle: Handle {
shape: HandleShape::Circle { radius: 7.0 },
color,
background: color.into(),
border_color: Color::TRANSPARENT,
border_width: 0.0,
},

View file

@ -5,7 +5,7 @@ pub use crate::slider::{
default, Catalog, Handle, HandleShape, Status, Style, StyleFn,
};
use crate::core::border::{self, Border};
use crate::core::border::Border;
use crate::core::event::{self, Event};
use crate::core::keyboard;
use crate::core::keyboard::key::{self, Key};
@ -413,10 +413,10 @@ where
width: style.rail.width,
height: offset + handle_width / 2.0,
},
border: border::rounded(style.rail.border_radius),
border: style.rail.border,
..renderer::Quad::default()
},
style.rail.colors.1,
style.rail.backgrounds.1,
);
renderer.fill_quad(
@ -427,10 +427,10 @@ where
width: style.rail.width,
height: bounds.height - offset - handle_width / 2.0,
},
border: border::rounded(style.rail.border_radius),
border: style.rail.border,
..renderer::Quad::default()
},
style.rail.colors.0,
style.rail.backgrounds.0,
);
renderer.fill_quad(
@ -448,7 +448,7 @@ where
},
..renderer::Quad::default()
},
style.handle.color,
style.handle.background,
);
}