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

Simplify scrollable styling API

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2024-02-12 19:24:09 +01:00
parent 0f920e0435
commit 0eaaeaa517
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
4 changed files with 82 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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(),

55
style/src/scrollable.rs
View file

@ -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<Background>,
}
/// 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<Background>,
/// The [`Background`] of the gap between a horizontal and vertical scrollbar.
pub gap: Option<Background>,
}
/// 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 [`Appearance`] of an active scrollable.
fn active(&self, style: &Self::Style) -> Appearance;
/// Produces the style of an active scrollbar.
fn active(&self, style: &Self::Style) -> Scrollbar;
/// 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)
}
}

77
style/src/theme.rs
View file

@ -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.

76
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;
@ -880,18 +881,23 @@ pub fn draw<Theme, Renderer>(
_ => 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<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()
@ -936,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
@ -961,35 +965,37 @@ 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, 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(