From 0f920e0435932c0b6927c771424b2ba495ddb46e Mon Sep 17 00:00:00 2001 From: dtzxporter Date: Tue, 6 Feb 2024 13:55:42 -0500 Subject: Introduce an appearance for a scrollable, ability to customize the scrollbar gap. Update scrollable.rs --- examples/scrollable/src/main.rs | 6 +++++- style/src/scrollable.rs | 20 ++++++++++++++++---- style/src/theme.rs | 14 ++++++++++++++ widget/src/scrollable.rs | 37 ++++++++++++++++++++++++++++++++++++- 4 files changed, 71 insertions(+), 6 deletions(-) diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs index ff691917..5f5cfdc6 100644 --- a/examples/scrollable/src/main.rs +++ b/examples/scrollable/src/main.rs @@ -1,6 +1,6 @@ use iced::executor; use iced::theme; -use iced::widget::scrollable::{Properties, Scrollbar, Scroller}; +use iced::widget::scrollable::{Appearance, Properties, Scrollbar, Scroller}; use iced::widget::{ button, column, container, horizontal_space, progress_bar, radio, row, scrollable, slider, text, vertical_space, @@ -355,6 +355,10 @@ struct ScrollbarCustomStyle; impl scrollable::StyleSheet for ScrollbarCustomStyle { type Style = Theme; + fn appearance(&self, style: &Self::Style) -> Appearance { + style.appearance(&theme::Scrollable::Default) + } + fn active(&self, style: &Self::Style) -> Scrollbar { style.active(&theme::Scrollable::Default) } diff --git a/style/src/scrollable.rs b/style/src/scrollable.rs index 6f37305f..3daa8886 100644 --- a/style/src/scrollable.rs +++ b/style/src/scrollable.rs @@ -1,14 +1,14 @@ //! Change the appearance of a scrollable. use crate::core::{Background, Border, Color}; -/// The appearance of a scrollable. +/// The appearance of the scrollbar of a scrollable. #[derive(Debug, Clone, Copy)] pub struct Scrollbar { - /// The [`Background`] of a scrollable. + /// The [`Background`] of a scrollbar. pub background: Option, - /// The [`Border`] of a scrollable. + /// The [`Border`] of a scrollbar. pub border: Border, - /// The appearance of the [`Scroller`] of a scrollable. + /// The appearance of the [`Scroller`] of a scrollbar. pub scroller: Scroller, } @@ -21,11 +21,23 @@ pub struct Scroller { pub border: Border, } +/// The appearance of a scrolable. +#[derive(Debug, Clone, Copy)] +pub struct Appearance { + /// The [`Background`] of a scrollable. + pub background: Option, + /// The [`Background`] of the gap between a horizontal and vertical scrollbar. + pub gap: Option, +} + /// A set of rules that dictate the style of a scrollable. pub trait StyleSheet { /// The supported style of the [`StyleSheet`]. type Style: Default; + /// Produces the style of the scrollable container. + fn appearance(&self, style: &Self::Style) -> Appearance; + /// Produces the style of an active scrollbar. fn active(&self, style: &Self::Style) -> Scrollbar; diff --git a/style/src/theme.rs b/style/src/theme.rs index 5909498f..4579181b 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -1188,6 +1188,20 @@ impl Scrollable { impl scrollable::StyleSheet for Theme { type Style = Scrollable; + fn appearance(&self, style: &Self::Style) -> scrollable::Appearance { + match style { + Scrollable::Default => { + let palette = self.extended_palette(); + + scrollable::Appearance { + background: None, + gap: Some(palette.background.weak.color.into()), + } + } + Scrollable::Custom(custom) => custom.appearance(self), + } + } + fn active(&self, style: &Self::Style) -> scrollable::Scrollbar { match style { Scrollable::Default => { diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs index 207b2539..5c986757 100644 --- a/widget/src/scrollable.rs +++ b/widget/src/scrollable.rs @@ -15,7 +15,9 @@ use crate::core::{ }; use crate::runtime::Command; -pub use crate::style::scrollable::{Scrollbar, Scroller, StyleSheet}; +pub use crate::style::scrollable::{ + Appearance, Scrollbar, Scroller, StyleSheet, +}; pub use operation::scrollable::{AbsoluteOffset, RelativeOffset}; /// A widget that can vertically display an infinite amount of content with a @@ -878,6 +880,19 @@ pub fn draw( _ => mouse::Cursor::Unavailable, }; + // Draw background. + let appearence = theme.appearance(style); + + if let Some(background) = appearence.background { + renderer.fill_quad( + renderer::Quad { + bounds, + ..Default::default() + }, + background, + ); + } + // Draw inner content if scrollbars.active() { renderer.with_layer(bounds, |renderer| { @@ -971,6 +986,26 @@ pub fn draw( draw_scrollbar(renderer, style, &scrollbar); } + + //draw filler quad + if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) { + let background = appearence.gap.or(appearence.background); + + if let Some(background) = background { + renderer.fill_quad( + renderer::Quad { + bounds: Rectangle { + x: y.bounds.x, + y: x.bounds.y, + width: y.bounds.width, + height: x.bounds.height, + }, + ..renderer::Quad::default() + }, + background, + ); + } + } }, ); } else { -- cgit From 0eaaeaa517a00765045de155bb1de01c2d8f553f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 12 Feb 2024 19:24:09 +0100 Subject: Simplify `scrollable` styling API --- examples/scrollable/src/main.rs | 53 ++-------------------------- style/src/scrollable.rs | 55 ++++++++++------------------- style/src/theme.rs | 77 +++++++++++------------------------------ widget/src/scrollable.rs | 76 +++++++++++++++++++++------------------- 4 files changed, 82 insertions(+), 179 deletions(-) diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs index 5f5cfdc6..29c39c36 100644 --- a/examples/scrollable/src/main.rs +++ b/examples/scrollable/src/main.rs @@ -1,13 +1,11 @@ use iced::executor; -use iced::theme; -use iced::widget::scrollable::{Appearance, Properties, Scrollbar, Scroller}; +use iced::widget::scrollable::Properties; use iced::widget::{ button, column, container, horizontal_space, progress_bar, radio, row, scrollable, slider, text, vertical_space, }; use iced::{ - Alignment, Application, Border, Color, Command, Element, Length, Settings, - Theme, + Alignment, Application, Color, Command, Element, Length, Settings, Theme, }; use once_cell::sync::Lazy; @@ -263,7 +261,6 @@ impl Application for ScrollableDemo { .scroller_width(self.scroller_width) .alignment(self.alignment), )) - .style(theme::Scrollable::custom(ScrollbarCustomStyle)) .id(SCROLLABLE_ID.clone()) .on_scroll(Message::Scrolled), Direction::Multi => scrollable( @@ -311,9 +308,6 @@ impl Application for ScrollableDemo { vertical: properties, } }) - .style(theme::Scrollable::Custom(Box::new( - ScrollbarCustomStyle, - ))) .id(SCROLLABLE_ID.clone()) .on_scroll(Message::Scrolled), }); @@ -350,49 +344,6 @@ impl Application for ScrollableDemo { } } -struct ScrollbarCustomStyle; - -impl scrollable::StyleSheet for ScrollbarCustomStyle { - type Style = Theme; - - fn appearance(&self, style: &Self::Style) -> Appearance { - style.appearance(&theme::Scrollable::Default) - } - - fn active(&self, style: &Self::Style) -> Scrollbar { - style.active(&theme::Scrollable::Default) - } - - fn hovered( - &self, - style: &Self::Style, - is_mouse_over_scrollbar: bool, - ) -> Scrollbar { - style.hovered(&theme::Scrollable::Default, is_mouse_over_scrollbar) - } - - fn hovered_horizontal( - &self, - style: &Self::Style, - is_mouse_over_scrollbar: bool, - ) -> Scrollbar { - if is_mouse_over_scrollbar { - Scrollbar { - background: style - .active(&theme::Scrollable::default()) - .background, - border: Border::with_radius(2), - scroller: Scroller { - color: Color::from_rgb8(250, 85, 134), - border: Border::with_radius(2), - }, - } - } else { - self.active(style) - } - } -} - fn progress_bar_custom_style(theme: &Theme) -> progress_bar::Appearance { progress_bar::Appearance { background: theme.extended_palette().background.strong.color.into(), diff --git a/style/src/scrollable.rs b/style/src/scrollable.rs index 3daa8886..d2348510 100644 --- a/style/src/scrollable.rs +++ b/style/src/scrollable.rs @@ -1,6 +1,18 @@ //! Change the appearance of a scrollable. +use crate::container; use crate::core::{Background, Border, Color}; +/// The appearance of a scrolable. +#[derive(Debug, Clone, Copy)] +pub struct Appearance { + /// The [`container::Appearance`] of a scrollable. + pub container: container::Appearance, + /// The [`Scrollbar`] appearance. + pub scrollbar: Scrollbar, + /// The [`Background`] of the gap between a horizontal and vertical scrollbar. + pub gap: Option, +} + /// The appearance of the scrollbar of a scrollable. #[derive(Debug, Clone, Copy)] pub struct Scrollbar { @@ -21,54 +33,23 @@ pub struct Scroller { pub border: Border, } -/// The appearance of a scrolable. -#[derive(Debug, Clone, Copy)] -pub struct Appearance { - /// The [`Background`] of a scrollable. - pub background: Option, - /// The [`Background`] of the gap between a horizontal and vertical scrollbar. - pub gap: Option, -} - /// A set of rules that dictate the style of a scrollable. pub trait StyleSheet { /// The supported style of the [`StyleSheet`]. type Style: Default; - /// Produces the style of the scrollable container. - fn appearance(&self, style: &Self::Style) -> Appearance; - - /// Produces the style of an active scrollbar. - fn active(&self, style: &Self::Style) -> Scrollbar; + /// Produces the [`Appearance`] of an active scrollable. + fn active(&self, style: &Self::Style) -> Appearance; - /// Produces the style of a scrollbar when the scrollable is being hovered. + /// Produces the [`Appearance`] of a scrollable when it is being hovered. fn hovered( &self, style: &Self::Style, is_mouse_over_scrollbar: bool, - ) -> Scrollbar; + ) -> Appearance; - /// Produces the style of a scrollbar that is being dragged. - fn dragging(&self, style: &Self::Style) -> Scrollbar { + /// Produces the [`Appearance`] of a scrollable when it is being dragged. + fn dragging(&self, style: &Self::Style) -> Appearance { self.hovered(style, true) } - - /// Produces the style of an active horizontal scrollbar. - fn active_horizontal(&self, style: &Self::Style) -> Scrollbar { - self.active(style) - } - - /// Produces the style of a horizontal scrollbar when the scrollable is being hovered. - fn hovered_horizontal( - &self, - style: &Self::Style, - is_mouse_over_scrollbar: bool, - ) -> Scrollbar { - self.hovered(style, is_mouse_over_scrollbar) - } - - /// Produces the style of a horizontal scrollbar that is being dragged. - fn dragging_horizontal(&self, style: &Self::Style) -> Scrollbar { - self.hovered_horizontal(style, true) - } } diff --git a/style/src/theme.rs b/style/src/theme.rs index 4579181b..0b56e101 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -1188,32 +1188,22 @@ impl Scrollable { impl scrollable::StyleSheet for Theme { type Style = Scrollable; - fn appearance(&self, style: &Self::Style) -> scrollable::Appearance { + fn active(&self, style: &Self::Style) -> scrollable::Appearance { match style { Scrollable::Default => { let palette = self.extended_palette(); scrollable::Appearance { - background: None, - gap: Some(palette.background.weak.color.into()), - } - } - Scrollable::Custom(custom) => custom.appearance(self), - } - } - - fn active(&self, style: &Self::Style) -> scrollable::Scrollbar { - match style { - Scrollable::Default => { - let palette = self.extended_palette(); - - scrollable::Scrollbar { - background: Some(palette.background.weak.color.into()), - border: Border::with_radius(2), - scroller: scrollable::Scroller { - color: palette.background.strong.color, + container: container::Appearance::default(), + scrollbar: scrollable::Scrollbar { + background: Some(palette.background.weak.color.into()), border: Border::with_radius(2), + scroller: scrollable::Scroller { + color: palette.background.strong.color, + border: Border::with_radius(2), + }, }, + gap: None, } } Scrollable::Custom(custom) => custom.active(self), @@ -1224,19 +1214,24 @@ impl scrollable::StyleSheet for Theme { &self, style: &Self::Style, is_mouse_over_scrollbar: bool, - ) -> scrollable::Scrollbar { + ) -> scrollable::Appearance { match style { Scrollable::Default => { if is_mouse_over_scrollbar { let palette = self.extended_palette(); - scrollable::Scrollbar { - background: Some(palette.background.weak.color.into()), - border: Border::with_radius(2), - scroller: scrollable::Scroller { - color: palette.primary.strong.color, + scrollable::Appearance { + scrollbar: scrollable::Scrollbar { + background: Some( + palette.background.weak.color.into(), + ), border: Border::with_radius(2), + scroller: scrollable::Scroller { + color: palette.primary.strong.color, + border: Border::with_radius(2), + }, }, + ..self.active(style) } } else { self.active(style) @@ -1248,42 +1243,12 @@ impl scrollable::StyleSheet for Theme { } } - fn dragging(&self, style: &Self::Style) -> scrollable::Scrollbar { + fn dragging(&self, style: &Self::Style) -> scrollable::Appearance { match style { Scrollable::Default => self.hovered(style, true), Scrollable::Custom(custom) => custom.dragging(self), } } - - fn active_horizontal(&self, style: &Self::Style) -> scrollable::Scrollbar { - match style { - Scrollable::Default => self.active(style), - Scrollable::Custom(custom) => custom.active_horizontal(self), - } - } - - fn hovered_horizontal( - &self, - style: &Self::Style, - is_mouse_over_scrollbar: bool, - ) -> scrollable::Scrollbar { - match style { - Scrollable::Default => self.hovered(style, is_mouse_over_scrollbar), - Scrollable::Custom(custom) => { - custom.hovered_horizontal(self, is_mouse_over_scrollbar) - } - } - } - - fn dragging_horizontal( - &self, - style: &Self::Style, - ) -> scrollable::Scrollbar { - match style { - Scrollable::Default => self.hovered_horizontal(style, true), - Scrollable::Custom(custom) => custom.dragging_horizontal(self), - } - } } /// The style of text. diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs index 5c986757..3814c590 100644 --- a/widget/src/scrollable.rs +++ b/widget/src/scrollable.rs @@ -1,4 +1,5 @@ //! Navigate an endless amount of content with a scrollbar. +use crate::container; use crate::core::event::{self, Event}; use crate::core::keyboard; use crate::core::layout; @@ -880,18 +881,23 @@ pub fn draw( _ => mouse::Cursor::Unavailable, }; - // Draw background. - let appearence = theme.appearance(style); + let appearance = if state.y_scroller_grabbed_at.is_some() + || state.x_scroller_grabbed_at.is_some() + { + theme.dragging(style) + } else if cursor_over_scrollable.is_some() { + theme.hovered(style, mouse_over_y_scrollbar || mouse_over_x_scrollbar) + } else { + theme.active(style) + }; - if let Some(background) = appearence.background { - renderer.fill_quad( - renderer::Quad { - bounds, - ..Default::default() - }, - background, - ); - } + let idle_scrollbar = theme.active(style).scrollbar; + + container::draw_background( + renderer, + &appearance.container, + layout.bounds(), + ); // Draw inner content if scrollbars.active() { @@ -917,7 +923,6 @@ pub fn draw( |renderer: &mut Renderer, style: Scrollbar, scrollbar: &internals::Scrollbar| { - //track if scrollbar.bounds.width > 0.0 && scrollbar.bounds.height > 0.0 && (style.background.is_some() @@ -936,7 +941,6 @@ pub fn draw( ); } - //thumb if scrollbar.scroller.bounds.width > 0.0 && scrollbar.scroller.bounds.height > 0.0 && (style.scroller.color != Color::TRANSPARENT @@ -961,35 +965,37 @@ pub fn draw( ..bounds }, |renderer| { - //draw y scrollbar if let Some(scrollbar) = scrollbars.y { - let style = if state.y_scroller_grabbed_at.is_some() { - theme.dragging(style) - } else if cursor_over_scrollable.is_some() { - theme.hovered(style, mouse_over_y_scrollbar) - } else { - theme.active(style) - }; - - draw_scrollbar(renderer, style, &scrollbar); + draw_scrollbar( + renderer, + if mouse_over_y_scrollbar + || state.y_scroller_grabbed_at.is_some() + { + appearance.scrollbar + } else { + idle_scrollbar + }, + &scrollbar, + ); } - //draw x scrollbar if let Some(scrollbar) = scrollbars.x { - let style = if state.x_scroller_grabbed_at.is_some() { - theme.dragging_horizontal(style) - } else if cursor_over_scrollable.is_some() { - theme.hovered_horizontal(style, mouse_over_x_scrollbar) - } else { - theme.active_horizontal(style) - }; - - draw_scrollbar(renderer, style, &scrollbar); + draw_scrollbar( + renderer, + if mouse_over_x_scrollbar + || state.x_scroller_grabbed_at.is_some() + { + appearance.scrollbar + } else { + idle_scrollbar + }, + &scrollbar, + ); } - //draw filler quad if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) { - let background = appearence.gap.or(appearence.background); + let background = + appearance.gap.or(appearance.container.background); if let Some(background) = background { renderer.fill_quad( -- cgit From 88e2e26ef4517933442af3dbdca30db2a1bf7ace Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Mon, 12 Feb 2024 19:28:33 +0100 Subject: Update `CHANGELOG` --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 748bdfd0..317bfc8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,10 +40,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Mouse movement events for `MouseArea`. [#2147](https://github.com/iced-rs/iced/pull/2147) - Dracula, Nord, Solarized, and Gruvbox variants for `Theme`. [#2170](https://github.com/iced-rs/iced/pull/2170) - Catppuccin, Tokyo Night, Kanagawa, Moonfly, Nightfly and Oxocarbon variants for `Theme`. [#2233](https://github.com/iced-rs/iced/pull/2233) - - `From where T: Into` for `svg::Handle`. [#2235](https://github.com/iced-rs/iced/pull/2235) - `on_open` and `on_close` handlers for `PickList`. [#2174](https://github.com/iced-rs/iced/pull/2174) - Support for generic `Element` in `Tooltip`. [#2228](https://github.com/iced-rs/iced/pull/2228) +- Container and `gap` styling for `Scrollable`. [#2239](https://github.com/iced-rs/iced/pull/2239) ### Changed - Enable WebGPU backend in `wgpu` by default instead of WebGL. [#2068](https://github.com/iced-rs/iced/pull/2068) -- cgit