Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve slider widget styling. #2444

Merged
merged 4 commits into from
Sep 10, 2024
Merged

Improve slider widget styling. #2444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ae4bed
Overhaul slider styling
B0ney May 17, 2024
583a7c6
Replace `colors` with `backgrounds` for the Rail.
B0ney May 17, 2024
f177a96
code consistency
B0ney May 17, 2024
85b30c7
remove unused import
B0ney Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions widget/src/slider.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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(
Expand All @@ -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(
Expand All @@ -443,7 +443,7 @@ where
},
..renderer::Quad::default()
},
style.handle.color,
style.handle.background,
);
}

Expand Down Expand Up @@ -524,21 +524,21 @@ 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.
#[derive(Debug, Clone, Copy)]
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.
Expand Down Expand Up @@ -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,
},
Expand Down
12 changes: 6 additions & 6 deletions widget/src/vertical_slider.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -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(
Expand All @@ -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(
Expand All @@ -448,7 +448,7 @@ where
},
..renderer::Quad::default()
},
style.handle.color,
style.handle.background,
);
}

Expand Down
Loading