From de51bc3f41752634c0ccce8484d0a9bade62a45a Mon Sep 17 00:00:00 2001 From: Night_Hunter Date: Fri, 6 Jan 2023 14:55:09 +1300 Subject: Introduce left and right colors for slider rails --- native/src/widget/slider.rs | 92 +++++++++++++++++++++--------------- native/src/widget/vertical_slider.rs | 87 +++++++++++++++++++--------------- style/src/slider.rs | 17 ++++++- style/src/theme.rs | 14 ++++-- 4 files changed, 130 insertions(+), 80 deletions(-) diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index d3715b1c..b3f3306c 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -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, 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,37 +370,7 @@ pub fn draw( 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 value = value.into() as f32; let (handle_width, handle_height, handle_border_radius) = match style .handle @@ -411,25 +383,69 @@ pub fn draw( } => (f32::from(width), bounds.height, border_radius), }; - let value = value.into() as f32; let (range_start, range_end) = { let (start, end) = range.clone().into_inner(); (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 line_y = bounds.y + bounds.height / 2.0 - style.rail.size / 2.0; + let line_offset = offset + handle_width / 2.0; + + renderer.fill_quad( + renderer::Quad { + bounds: Rectangle { + x: bounds.x, + y: line_y, + width: line_offset, + height: style.rail.size, + }, + border_radius: [ + style.rail.border_radius, + 0.0, + 0.0, + style.rail.border_radius, + ] + .into(), + border_width: style.rail.border_width, + border_color: style.rail.border_color, + }, + style.rail.colors.0, + ); + + renderer.fill_quad( + renderer::Quad { + bounds: Rectangle { + x: bounds.x + line_offset.round(), + y: line_y, + width: bounds.width - line_offset, + height: style.rail.size, + }, + border_radius: [ + 0.0, + style.rail.border_radius, + style.rail.border_radius, + 0.0, + ] + .into(), + border_width: style.rail.border_width, + border_color: style.rail.border_color, + }, + style.rail.colors.1, + ); + renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: bounds.x + handle_offset.round(), - y: rail_y - handle_height / 2.0, + x: bounds.x + offset.round(), + y: bounds.y + bounds.height / 2.0 - handle_height / 2.0, width: handle_width, height: handle_height, }, diff --git a/native/src/widget/vertical_slider.rs b/native/src/widget/vertical_slider.rs index f1687e38..3a8c30b6 100644 --- a/native/src/widget/vertical_slider.rs +++ b/native/src/widget/vertical_slider.rs @@ -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, 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( 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,63 @@ pub fn draw( (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 line_x = bounds.x + bounds.width / 2.0 - style.rail.size / 2.0; + let line_offset = offset + handle_width / 2.0; + + renderer.fill_quad( + renderer::Quad { + bounds: Rectangle { + x: line_x, + y: bounds.y, + width: style.rail.size, + height: line_offset, + }, + border_radius: [ + style.rail.border_radius, + style.rail.border_radius, + 0.0, + 0.0, + ] + .into(), + border_width: style.rail.border_width, + border_color: style.rail.border_color, + }, + style.rail.colors.1, + ); + + renderer.fill_quad( + renderer::Quad { + bounds: Rectangle { + x: line_x, + y: bounds.y + line_offset.round(), + width: style.rail.size, + height: bounds.height - line_offset, + }, + border_radius: [ + 0.0, + 0.0, + style.rail.border_radius, + style.rail.border_radius, + ] + .into(), + border_width: style.rail.border_width, + border_color: style.rail.border_color, + }, + style.rail.colors.0, + ); + renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: rail_x - (handle_height / 2.0), - y: bounds.y + handle_offset.round(), + x: bounds.x + bounds.width / 2.0 - handle_height / 2.0, + y: bounds.y + offset.round(), width: handle_height, height: handle_width, }, diff --git a/style/src/slider.rs b/style/src/slider.rs index 4b52fad3..c143915e 100644 --- a/style/src/slider.rs +++ b/style/src/slider.rs @@ -5,11 +5,26 @@ 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 height of a slider rail and the width of a vertical slider. + pub size: f32, + /// The border radius of the slider. + pub border_radius: f32, + /// The border width of the slider. + pub border_width: f32, + /// The border [`Color`] of the slider. + pub border_color: Color, +} + /// The appearance of the handle of a slider. #[derive(Debug, Clone, Copy)] pub struct Handle { diff --git a/style/src/theme.rs b/style/src/theme.rs index 6bd82a96..417680a1 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -416,10 +416,16 @@ 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, + ), + size: 2.0, + border_radius: 0.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + }, handle: slider::Handle { color: palette.background.base.color, border_color: palette.primary.base.color, -- cgit From 45cfce3f6dcf2773bc8ccc7e356906cb778f2f27 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 12 Apr 2023 05:19:01 +0200 Subject: Simplify `draw` logic of sliders --- native/src/widget/slider.rs | 18 ++++++++---------- native/src/widget/vertical_slider.rs | 15 +++++++-------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index b3f3306c..2f946a8a 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -370,8 +370,6 @@ pub fn draw( style_sheet.active(style) }; - let value = value.into() as f32; - let (handle_width, handle_height, handle_border_radius) = match style .handle .shape @@ -383,6 +381,7 @@ pub fn draw( } => (f32::from(width), bounds.height, border_radius), }; + let value = value.into() as f32; let (range_start, range_end) = { let (start, end) = range.clone().into_inner(); @@ -396,15 +395,14 @@ pub fn draw( / (range_end - range_start) }; - let line_y = bounds.y + bounds.height / 2.0 - style.rail.size / 2.0; - let line_offset = offset + handle_width / 2.0; + let rail_y = bounds.y + bounds.height / 2.0; renderer.fill_quad( renderer::Quad { bounds: Rectangle { x: bounds.x, - y: line_y, - width: line_offset, + y: rail_y - style.rail.size / 2.0, + width: offset, height: style.rail.size, }, border_radius: [ @@ -423,9 +421,9 @@ pub fn draw( renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: bounds.x + line_offset.round(), - y: line_y, - width: bounds.width - line_offset, + x: bounds.x + offset, + y: rail_y - style.rail.size / 2.0, + width: bounds.width - offset, height: style.rail.size, }, border_radius: [ @@ -445,7 +443,7 @@ pub fn draw( renderer::Quad { bounds: Rectangle { x: bounds.x + offset.round(), - y: bounds.y + bounds.height / 2.0 - handle_height / 2.0, + y: rail_y - handle_height / 2.0, width: handle_width, height: handle_height, }, diff --git a/native/src/widget/vertical_slider.rs b/native/src/widget/vertical_slider.rs index 3a8c30b6..8c6d1e5d 100644 --- a/native/src/widget/vertical_slider.rs +++ b/native/src/widget/vertical_slider.rs @@ -388,16 +388,15 @@ pub fn draw( / (range_start - range_end) }; - let line_x = bounds.x + bounds.width / 2.0 - style.rail.size / 2.0; - let line_offset = offset + handle_width / 2.0; + let rail_x = bounds.x + bounds.width / 2.0; renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: line_x, + x: rail_x - style.rail.size / 2.0, y: bounds.y, width: style.rail.size, - height: line_offset, + height: offset, }, border_radius: [ style.rail.border_radius, @@ -415,10 +414,10 @@ pub fn draw( renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: line_x, - y: bounds.y + line_offset.round(), + x: rail_x - style.rail.size / 2.0, + y: bounds.y + offset, width: style.rail.size, - height: bounds.height - line_offset, + height: bounds.height - offset, }, border_radius: [ 0.0, @@ -436,7 +435,7 @@ pub fn draw( renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: bounds.x + bounds.width / 2.0 - handle_height / 2.0, + x: rail_x - handle_height / 2.0, y: bounds.y + offset.round(), width: handle_height, height: handle_width, -- cgit From c2cc9a835d8281c1d26c861ecac7991a924c3785 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 12 Apr 2023 05:21:46 +0200 Subject: Remove `border_width` support in `slider::Rail` --- native/src/widget/slider.rs | 12 ++++++------ native/src/widget/vertical_slider.rs | 12 ++++++------ style/src/slider.rs | 4 ---- style/src/theme.rs | 2 -- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index 2f946a8a..5b26ae01 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -8,8 +8,8 @@ use crate::renderer; use crate::touch; use crate::widget::tree::{self, Tree}; use crate::{ - Clipboard, Element, Layout, Length, Pixels, Point, Rectangle, Shell, Size, - Widget, + Clipboard, Color, Element, Layout, Length, Pixels, Point, Rectangle, Shell, + Size, Widget, }; use std::ops::RangeInclusive; @@ -412,8 +412,8 @@ pub fn draw( style.rail.border_radius, ] .into(), - border_width: style.rail.border_width, - border_color: style.rail.border_color, + border_width: 0.0, + border_color: Color::TRANSPARENT, }, style.rail.colors.0, ); @@ -433,8 +433,8 @@ pub fn draw( 0.0, ] .into(), - border_width: style.rail.border_width, - border_color: style.rail.border_color, + border_width: 0.0, + border_color: Color::TRANSPARENT, }, style.rail.colors.1, ); diff --git a/native/src/widget/vertical_slider.rs b/native/src/widget/vertical_slider.rs index 8c6d1e5d..5fb6022a 100644 --- a/native/src/widget/vertical_slider.rs +++ b/native/src/widget/vertical_slider.rs @@ -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, Clipboard, 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 @@ -405,8 +405,8 @@ pub fn draw( 0.0, ] .into(), - border_width: style.rail.border_width, - border_color: style.rail.border_color, + border_width: 0.0, + border_color: Color::TRANSPARENT, }, style.rail.colors.1, ); @@ -426,8 +426,8 @@ pub fn draw( style.rail.border_radius, ] .into(), - border_width: style.rail.border_width, - border_color: style.rail.border_color, + border_width: 0.0, + border_color: Color::TRANSPARENT, }, style.rail.colors.0, ); diff --git a/style/src/slider.rs b/style/src/slider.rs index c143915e..bb36a176 100644 --- a/style/src/slider.rs +++ b/style/src/slider.rs @@ -19,10 +19,6 @@ pub struct Rail { pub size: f32, /// The border radius of the slider. pub border_radius: f32, - /// The border width of the slider. - pub border_width: f32, - /// The border [`Color`] of the slider. - pub border_color: Color, } /// The appearance of the handle of a slider. diff --git a/style/src/theme.rs b/style/src/theme.rs index 417680a1..669d9157 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -423,8 +423,6 @@ impl slider::StyleSheet for Theme { ), size: 2.0, border_radius: 0.0, - border_width: 0.0, - border_color: Color::TRANSPARENT, }, handle: slider::Handle { color: palette.background.base.color, -- cgit From 6e6804c5c9d0dba921f2e25d2c888b136d22d35e Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 12 Apr 2023 05:25:27 +0200 Subject: Use a `border_radius` of `2.0` for slider rails in built-in theme --- style/src/theme.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/src/theme.rs b/style/src/theme.rs index 669d9157..2eb825e6 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -422,7 +422,7 @@ impl slider::StyleSheet for Theme { palette.primary.base.color, ), size: 2.0, - border_radius: 0.0, + border_radius: 2.0, }, handle: slider::Handle { color: palette.background.base.color, -- cgit From 9b39a17628e92b66ac3649e879478ed23635fa76 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 12 Apr 2023 05:27:32 +0200 Subject: Rename `Rail::size` to `width` --- native/src/widget/slider.rs | 8 ++++---- native/src/widget/vertical_slider.rs | 8 ++++---- style/src/slider.rs | 4 ++-- style/src/theme.rs | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs index 5b26ae01..69c06140 100644 --- a/native/src/widget/slider.rs +++ b/native/src/widget/slider.rs @@ -401,9 +401,9 @@ pub fn draw( renderer::Quad { bounds: Rectangle { x: bounds.x, - y: rail_y - style.rail.size / 2.0, + y: rail_y - style.rail.width / 2.0, width: offset, - height: style.rail.size, + height: style.rail.width, }, border_radius: [ style.rail.border_radius, @@ -422,9 +422,9 @@ pub fn draw( renderer::Quad { bounds: Rectangle { x: bounds.x + offset, - y: rail_y - style.rail.size / 2.0, + y: rail_y - style.rail.width / 2.0, width: bounds.width - offset, - height: style.rail.size, + height: style.rail.width, }, border_radius: [ 0.0, diff --git a/native/src/widget/vertical_slider.rs b/native/src/widget/vertical_slider.rs index 5fb6022a..a06a200f 100644 --- a/native/src/widget/vertical_slider.rs +++ b/native/src/widget/vertical_slider.rs @@ -393,9 +393,9 @@ pub fn draw( renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: rail_x - style.rail.size / 2.0, + x: rail_x - style.rail.width / 2.0, y: bounds.y, - width: style.rail.size, + width: style.rail.width, height: offset, }, border_radius: [ @@ -414,9 +414,9 @@ pub fn draw( renderer.fill_quad( renderer::Quad { bounds: Rectangle { - x: rail_x - style.rail.size / 2.0, + x: rail_x - style.rail.width / 2.0, y: bounds.y + offset, - width: style.rail.size, + width: style.rail.width, height: bounds.height - offset, }, border_radius: [ diff --git a/style/src/slider.rs b/style/src/slider.rs index bb36a176..d5db1853 100644 --- a/style/src/slider.rs +++ b/style/src/slider.rs @@ -15,8 +15,8 @@ pub struct Appearance { pub struct Rail { /// The colors of the rail of the slider. pub colors: (Color, Color), - /// The height of a slider rail and the width of a vertical slider. - pub size: f32, + /// The width of the stroke of a slider rail. + pub width: f32, /// The border radius of the slider. pub border_radius: f32, } diff --git a/style/src/theme.rs b/style/src/theme.rs index 2eb825e6..b195940e 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -421,7 +421,7 @@ impl slider::StyleSheet for Theme { palette.primary.base.color, palette.primary.base.color, ), - size: 2.0, + width: 2.0, border_radius: 2.0, }, handle: slider::Handle { -- cgit