me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve slider widget styling. (#2444)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

36
widget/src/slider.rs
View file

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

12
widget/src/vertical_slider.rs
View file

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