Merge pull request #1643 from Night-Hunter-NF/fix_slider_colors

Left and right colors for slider rails
This commit is contained in:
Héctor Ramón 2023-04-12 05:39:06 +02:00 committed by GitHub
commit 994d612239
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 120 additions and 79 deletions

View file

@ -8,13 +8,15 @@ use crate::renderer;
use crate::touch;
use crate::widget::tree::{self, Tree};
use crate::{
Background, Clipboard, Color, Element, Layout, Length, Pixels, Point,
Rectangle, Shell, Size, Widget,
Clipboard, Color, Element, Layout, Length, Pixels, Point, Rectangle, Shell,
Size, Widget,
};
use std::ops::RangeInclusive;
pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet};
pub use iced_style::slider::{
Appearance, Handle, HandleShape, Rail, StyleSheet,
};
/// An horizontal bar and a handle that selects a single value from a range of
/// values.
@ -368,38 +370,6 @@ pub fn draw<T, R>(
style_sheet.active(style)
};
let rail_y = bounds.y + (bounds.height / 2.0).round();
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: bounds.x,
y: rail_y - 1.0,
width: bounds.width,
height: 2.0,
},
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style.rail_colors.0,
);
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: bounds.x,
y: rail_y + 1.0,
width: bounds.width,
height: 2.0,
},
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
Background::Color(style.rail_colors.1),
);
let (handle_width, handle_height, handle_border_radius) = match style
.handle
.shape
@ -418,17 +388,61 @@ pub fn draw<T, R>(
(start.into() as f32, end.into() as f32)
};
let handle_offset = if range_start >= range_end {
let offset = if range_start >= range_end {
0.0
} else {
(bounds.width - handle_width) * (value - range_start)
/ (range_end - range_start)
};
let rail_y = bounds.y + bounds.height / 2.0;
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: bounds.x + handle_offset.round(),
x: bounds.x,
y: rail_y - style.rail.width / 2.0,
width: offset,
height: style.rail.width,
},
border_radius: [
style.rail.border_radius,
0.0,
0.0,
style.rail.border_radius,
]
.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style.rail.colors.0,
);
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: bounds.x + offset,
y: rail_y - style.rail.width / 2.0,
width: bounds.width - offset,
height: style.rail.width,
},
border_radius: [
0.0,
style.rail.border_radius,
style.rail.border_radius,
0.0,
]
.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style.rail.colors.1,
);
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: bounds.x + offset.round(),
y: rail_y - handle_height / 2.0,
width: handle_width,
height: handle_height,

View file

@ -8,8 +8,8 @@ pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet};
use crate::event::{self, Event};
use crate::widget::tree::{self, Tree};
use crate::{
layout, mouse, renderer, touch, Background, Clipboard, Color, Element,
Layout, Length, Pixels, Point, Rectangle, Shell, Size, Widget,
layout, mouse, renderer, touch, Clipboard, Color, Element, Layout, Length,
Pixels, Point, Rectangle, Shell, Size, Widget,
};
/// An vertical bar and a handle that selects a single value from a range of
@ -363,38 +363,6 @@ pub fn draw<T, R>(
style_sheet.active(style)
};
let rail_x = bounds.x + (bounds.width / 2.0).round();
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: rail_x - 1.0,
y: bounds.y,
width: 2.0,
height: bounds.height,
},
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style.rail_colors.0,
);
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: rail_x + 1.0,
y: bounds.y,
width: 2.0,
height: bounds.height,
},
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
Background::Color(style.rail_colors.1),
);
let (handle_width, handle_height, handle_border_radius) = match style
.handle
.shape
@ -413,18 +381,62 @@ pub fn draw<T, R>(
(start.into() as f32, end.into() as f32)
};
let handle_offset = if range_start >= range_end {
let offset = if range_start >= range_end {
0.0
} else {
(bounds.height - handle_width) * (value - range_end)
/ (range_start - range_end)
};
let rail_x = bounds.x + bounds.width / 2.0;
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: rail_x - (handle_height / 2.0),
y: bounds.y + handle_offset.round(),
x: rail_x - style.rail.width / 2.0,
y: bounds.y,
width: style.rail.width,
height: offset,
},
border_radius: [
style.rail.border_radius,
style.rail.border_radius,
0.0,
0.0,
]
.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style.rail.colors.1,
);
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: rail_x - style.rail.width / 2.0,
y: bounds.y + offset,
width: style.rail.width,
height: bounds.height - offset,
},
border_radius: [
0.0,
0.0,
style.rail.border_radius,
style.rail.border_radius,
]
.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style.rail.colors.0,
);
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle {
x: rail_x - handle_height / 2.0,
y: bounds.y + offset.round(),
width: handle_height,
height: handle_width,
},

View file

@ -5,11 +5,22 @@ use iced_core::Color;
#[derive(Debug, Clone, Copy)]
pub struct Appearance {
/// The colors of the rail of the slider.
pub rail_colors: (Color, Color),
pub rail: Rail,
/// The appearance of the [`Handle`] of the slider.
pub handle: Handle,
}
/// 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 width of the stroke of a slider rail.
pub width: f32,
/// The border radius of the slider.
pub border_radius: f32,
}
/// The appearance of the handle of a slider.
#[derive(Debug, Clone, Copy)]
pub struct Handle {

View file

@ -416,10 +416,14 @@ impl slider::StyleSheet for Theme {
};
slider::Appearance {
rail_colors: (
palette.primary.base.color,
Color::TRANSPARENT,
),
rail: slider::Rail {
colors: (
palette.primary.base.color,
palette.primary.base.color,
),
width: 2.0,
border_radius: 2.0,
},
handle: slider::Handle {
color: palette.background.base.color,
border_color: palette.primary.base.color,