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

Merge pull request #2239 from dtzxporter/scrollable-quad-fill

Browse source 
Introduce an appearance for a scrollable, ability to customize the scrollbar gap.
This commit is contained in:
Héctor Ramón 2024-02-12 19:36:45 +01:00 • committed by GitHub
commit 7615b2240c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 110 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -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<T> where T: Into<PathBuf>` 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)

49
examples/scrollable/src/main.rs
View file

@ -1,13 +1,11 @@
use iced::executor;
use iced::theme;
use iced::widget::scrollable::{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,45 +344,6 @@ impl Application for ScrollableDemo {
}
}
struct ScrollbarCustomStyle;
impl scrollable::StyleSheet for ScrollbarCustomStyle {
type Style = Theme;
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(),

51
style/src/scrollable.rs
View file

@ -1,14 +1,26 @@
//! Change the appearance of a scrollable.
use crate::container;
use crate::core::{Background, Border, Color};
/// The appearance of a scrollable.
/// 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<Background>,
}
/// 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<Background>,
/// 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,
}
@ -26,37 +38,18 @@ pub trait StyleSheet {
/// The supported style of the [`StyleSheet`].
type Style: Default;
/// 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)
}
}

65
style/src/theme.rs
View file

@ -1188,18 +1188,22 @@ impl Scrollable {
impl scrollable::StyleSheet for Theme {
type Style = Scrollable;
fn active(&self, style: &Self::Style) -> scrollable::Scrollbar {
fn active(&self, style: &Self::Style) -> scrollable::Appearance {
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,
scrollable::Appearance {
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),
@ -1210,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)
@ -1234,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.

85
widget/src/scrollable.rs
View file

@ -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;
@ -15,7 +16,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 +881,24 @@ pub fn draw<Theme, Renderer>(
_ => mouse::Cursor::Unavailable,
};
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)
};
let idle_scrollbar = theme.active(style).scrollbar;
container::draw_background(
renderer,
&appearance.container,
layout.bounds(),
);
// Draw inner content
if scrollbars.active() {
renderer.with_layer(bounds, |renderer| {
@ -902,7 +923,6 @@ pub fn draw<Theme, Renderer>(
|renderer: &mut Renderer,
style: Scrollbar,
scrollbar: &internals::Scrollbar| {
//track
if scrollbar.bounds.width > 0.0
&& scrollbar.bounds.height > 0.0
&& (style.background.is_some()
@ -921,7 +941,6 @@ pub fn draw<Theme, Renderer>(
);
}
//thumb
if scrollbar.scroller.bounds.width > 0.0
&& scrollbar.scroller.bounds.height > 0.0
&& (style.scroller.color != Color::TRANSPARENT
@ -946,30 +965,52 @@ pub fn draw<Theme, Renderer>(
..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,
if mouse_over_x_scrollbar
|| state.x_scroller_grabbed_at.is_some()
{
appearance.scrollbar
} else {
idle_scrollbar
},
&scrollbar,
);
}
draw_scrollbar(renderer, style, &scrollbar);
if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
let background =
appearance.gap.or(appearance.container.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,
);
}
}
},
);