Simplify theming for Scrollable widget
This commit is contained in:
parent
29326215cc
commit
d681aaa57e
9 changed files with 342 additions and 422 deletions
|
|
@ -1,51 +0,0 @@
|
|||
//! Change the appearance of a container.
|
||||
use crate::core::{Background, Border, Color, Pixels, Shadow};
|
||||
|
||||
/// The appearance of a container.
|
||||
#[derive(Debug, Clone, Copy, Default)]
|
||||
pub struct Appearance {
|
||||
/// The text [`Color`] of the container.
|
||||
pub text_color: Option<Color>,
|
||||
/// The [`Background`] of the container.
|
||||
pub background: Option<Background>,
|
||||
/// The [`Border`] of the container.
|
||||
pub border: Border,
|
||||
/// The [`Shadow`] of the container.
|
||||
pub shadow: Shadow,
|
||||
}
|
||||
|
||||
impl Appearance {
|
||||
/// Derives a new [`Appearance`] with a border of the given [`Color`] and
|
||||
/// `width`.
|
||||
pub fn with_border(
|
||||
self,
|
||||
color: impl Into<Color>,
|
||||
width: impl Into<Pixels>,
|
||||
) -> Self {
|
||||
Self {
|
||||
border: Border {
|
||||
color: color.into(),
|
||||
width: width.into().0,
|
||||
..Border::default()
|
||||
},
|
||||
..self
|
||||
}
|
||||
}
|
||||
|
||||
/// Derives a new [`Appearance`] with the given [`Background`].
|
||||
pub fn with_background(self, background: impl Into<Background>) -> Self {
|
||||
Self {
|
||||
background: Some(background.into()),
|
||||
..self
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A set of rules that dictate the [`Appearance`] of a container.
|
||||
pub trait StyleSheet {
|
||||
/// The supported style of the [`StyleSheet`].
|
||||
type Style: Default;
|
||||
|
||||
/// Produces the [`Appearance`] of a container.
|
||||
fn appearance(&self, style: &Self::Style) -> Appearance;
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
pub use iced_core as core;
|
||||
|
||||
pub mod application;
|
||||
pub mod container;
|
||||
pub mod menu;
|
||||
pub mod pane_grid;
|
||||
pub mod pick_list;
|
||||
|
|
@ -25,7 +24,6 @@ pub mod progress_bar;
|
|||
pub mod qr_code;
|
||||
pub mod radio;
|
||||
pub mod rule;
|
||||
pub mod scrollable;
|
||||
pub mod slider;
|
||||
pub mod svg;
|
||||
pub mod text_editor;
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
//! 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 {
|
||||
/// The [`Background`] of a scrollbar.
|
||||
pub background: Option<Background>,
|
||||
/// The [`Border`] of a scrollbar.
|
||||
pub border: Border,
|
||||
/// The appearance of the [`Scroller`] of a scrollbar.
|
||||
pub scroller: Scroller,
|
||||
}
|
||||
|
||||
/// The appearance of the scroller of a scrollable.
|
||||
#[derive(Debug, Clone, Copy)]
|
||||
pub struct Scroller {
|
||||
/// The [`Color`] of the scroller.
|
||||
pub color: Color,
|
||||
/// The [`Border`] of the scroller.
|
||||
pub border: Border,
|
||||
}
|
||||
|
||||
/// 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 [`Appearance`] of an active scrollable.
|
||||
fn active(&self, style: &Self::Style) -> Appearance;
|
||||
|
||||
/// Produces the [`Appearance`] of a scrollable when it is being hovered.
|
||||
fn hovered(
|
||||
&self,
|
||||
style: &Self::Style,
|
||||
is_mouse_over_scrollbar: bool,
|
||||
) -> Appearance;
|
||||
|
||||
/// Produces the [`Appearance`] of a scrollable when it is being dragged.
|
||||
fn dragging(&self, style: &Self::Style) -> Appearance {
|
||||
self.hovered(style, true)
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@ pub mod palette;
|
|||
pub use palette::Palette;
|
||||
|
||||
use crate::application;
|
||||
use crate::container;
|
||||
use crate::core::widget::text;
|
||||
use crate::menu;
|
||||
use crate::pane_grid;
|
||||
|
|
@ -13,7 +12,6 @@ use crate::progress_bar;
|
|||
use crate::qr_code;
|
||||
use crate::radio;
|
||||
use crate::rule;
|
||||
use crate::scrollable;
|
||||
use crate::slider;
|
||||
use crate::svg;
|
||||
use crate::text_editor;
|
||||
|
|
@ -793,91 +791,6 @@ impl svg::StyleSheet for fn(&Theme) -> svg::Appearance {
|
|||
}
|
||||
}
|
||||
|
||||
/// The style of a scrollable.
|
||||
#[derive(Default)]
|
||||
pub enum Scrollable {
|
||||
/// The default style.
|
||||
#[default]
|
||||
Default,
|
||||
/// A custom style.
|
||||
Custom(Box<dyn scrollable::StyleSheet<Style = Theme>>),
|
||||
}
|
||||
|
||||
impl Scrollable {
|
||||
/// Creates a custom [`Scrollable`] theme.
|
||||
pub fn custom<T: scrollable::StyleSheet<Style = Theme> + 'static>(
|
||||
style: T,
|
||||
) -> Self {
|
||||
Self::Custom(Box::new(style))
|
||||
}
|
||||
}
|
||||
|
||||
impl scrollable::StyleSheet for Theme {
|
||||
type Style = Scrollable;
|
||||
|
||||
fn active(&self, style: &Self::Style) -> scrollable::Appearance {
|
||||
match style {
|
||||
Scrollable::Default => {
|
||||
let palette = self.extended_palette();
|
||||
|
||||
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),
|
||||
}
|
||||
}
|
||||
|
||||
fn hovered(
|
||||
&self,
|
||||
style: &Self::Style,
|
||||
is_mouse_over_scrollbar: bool,
|
||||
) -> scrollable::Appearance {
|
||||
match style {
|
||||
Scrollable::Default => {
|
||||
if is_mouse_over_scrollbar {
|
||||
let palette = self.extended_palette();
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
Scrollable::Custom(custom) => {
|
||||
custom.hovered(self, is_mouse_over_scrollbar)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn dragging(&self, style: &Self::Style) -> scrollable::Appearance {
|
||||
match style {
|
||||
Scrollable::Default => self.hovered(style, true),
|
||||
Scrollable::Custom(custom) => custom.dragging(self),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl text::StyleSheet for Theme {}
|
||||
|
||||
/// The style of a text input.
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@ where
|
|||
Message: Clone,
|
||||
Theme: container::Style
|
||||
+ text_input::StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ menu::StyleSheet,
|
||||
Renderer: text::Renderer,
|
||||
{
|
||||
|
|
@ -721,7 +721,7 @@ where
|
|||
Message: Clone + 'a,
|
||||
Theme: container::Style
|
||||
+ text_input::StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ menu::StyleSheet
|
||||
+ 'a,
|
||||
Renderer: text::Renderer + 'a,
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ pub fn scrollable<'a, Message, Theme, Renderer>(
|
|||
content: impl Into<Element<'a, Message, Theme, Renderer>>,
|
||||
) -> Scrollable<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Theme: scrollable::StyleSheet,
|
||||
Theme: scrollable::Tradition,
|
||||
Renderer: core::Renderer,
|
||||
{
|
||||
Scrollable::new(content)
|
||||
|
|
@ -276,7 +276,7 @@ where
|
|||
Message: Clone,
|
||||
Renderer: core::text::Renderer,
|
||||
Theme: pick_list::StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ overlay::menu::StyleSheet
|
||||
+ container::Style,
|
||||
<Theme as overlay::menu::StyleSheet>::Style:
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ impl<'a, T, Message, Theme, Renderer> Menu<'a, T, Message, Theme, Renderer>
|
|||
where
|
||||
T: ToString + Clone,
|
||||
Message: 'a,
|
||||
Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
|
||||
Theme: StyleSheet + container::Style + scrollable::Tradition + 'a,
|
||||
Renderer: text::Renderer + 'a,
|
||||
{
|
||||
/// Creates a new [`Menu`] with the given [`State`], a list of options, and
|
||||
|
|
@ -179,7 +179,7 @@ where
|
|||
impl<'a, Message, Theme, Renderer> Overlay<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Message: 'a,
|
||||
Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
|
||||
Theme: StyleSheet + container::Style + scrollable::Tradition + 'a,
|
||||
Renderer: text::Renderer + 'a,
|
||||
{
|
||||
pub fn new<T>(
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ where
|
|||
V: Borrow<T> + 'a,
|
||||
Message: Clone,
|
||||
Theme: StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ menu::StyleSheet
|
||||
+ container::Style,
|
||||
<Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
|
||||
|
|
@ -177,7 +177,7 @@ where
|
|||
V: Borrow<T>,
|
||||
Message: Clone + 'a,
|
||||
Theme: StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ menu::StyleSheet
|
||||
+ container::Style,
|
||||
<Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
|
||||
|
|
@ -318,7 +318,7 @@ where
|
|||
V: Borrow<T> + 'a,
|
||||
Message: Clone + 'a,
|
||||
Theme: StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ menu::StyleSheet
|
||||
+ container::Style
|
||||
+ 'a,
|
||||
|
|
@ -628,7 +628,7 @@ where
|
|||
T: Clone + ToString,
|
||||
Message: 'a,
|
||||
Theme: StyleSheet
|
||||
+ scrollable::StyleSheet
|
||||
+ scrollable::Tradition
|
||||
+ menu::StyleSheet
|
||||
+ container::Style
|
||||
+ 'a,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
//! Navigate an endless amount of content with a scrollbar.
|
||||
// use crate::container;
|
||||
use crate::container;
|
||||
use crate::core::event::{self, Event};
|
||||
use crate::core::keyboard;
|
||||
use crate::core::layout;
|
||||
|
|
@ -11,14 +12,12 @@ use crate::core::widget;
|
|||
use crate::core::widget::operation::{self, Operation};
|
||||
use crate::core::widget::tree::{self, Tree};
|
||||
use crate::core::{
|
||||
Background, Clipboard, Color, Element, Layout, Length, Pixels, Point,
|
||||
Rectangle, Shell, Size, Vector, Widget,
|
||||
Background, Border, Clipboard, Color, Element, Layout, Length, Pixels,
|
||||
Point, Rectangle, Shell, Size, Vector, Widget,
|
||||
};
|
||||
use crate::runtime::Command;
|
||||
use crate::style::Theme;
|
||||
|
||||
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
|
||||
|
|
@ -30,7 +29,6 @@ pub struct Scrollable<
|
|||
Theme = crate::Theme,
|
||||
Renderer = crate::Renderer,
|
||||
> where
|
||||
Theme: StyleSheet,
|
||||
Renderer: crate::core::Renderer,
|
||||
{
|
||||
id: Option<Id>,
|
||||
|
|
@ -39,18 +37,20 @@ pub struct Scrollable<
|
|||
direction: Direction,
|
||||
content: Element<'a, Message, Theme, Renderer>,
|
||||
on_scroll: Option<Box<dyn Fn(Viewport) -> Message + 'a>>,
|
||||
style: Theme::Style,
|
||||
style: fn(&Theme, Status) -> Appearance,
|
||||
}
|
||||
|
||||
impl<'a, Message, Theme, Renderer> Scrollable<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Theme: StyleSheet,
|
||||
Renderer: crate::core::Renderer,
|
||||
{
|
||||
/// Creates a new vertical [`Scrollable`].
|
||||
pub fn new(
|
||||
content: impl Into<Element<'a, Message, Theme, Renderer>>,
|
||||
) -> Self {
|
||||
) -> Self
|
||||
where
|
||||
Theme: Tradition,
|
||||
{
|
||||
Self::with_direction(content, Direction::default())
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,10 @@ where
|
|||
pub fn with_direction(
|
||||
content: impl Into<Element<'a, Message, Theme, Renderer>>,
|
||||
direction: Direction,
|
||||
) -> Self {
|
||||
) -> Self
|
||||
where
|
||||
Theme: Tradition,
|
||||
{
|
||||
let content = content.into();
|
||||
|
||||
debug_assert!(
|
||||
|
|
@ -80,7 +83,7 @@ where
|
|||
direction,
|
||||
content,
|
||||
on_scroll: None,
|
||||
style: Default::default(),
|
||||
style: Theme::tradition(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,8 +114,8 @@ where
|
|||
}
|
||||
|
||||
/// Sets the style of the [`Scrollable`] .
|
||||
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
|
||||
self.style = style.into();
|
||||
pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self {
|
||||
self.style = style;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
|
@ -223,7 +226,6 @@ pub enum Alignment {
|
|||
impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
|
||||
for Scrollable<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Theme: StyleSheet,
|
||||
Renderer: crate::core::Renderer,
|
||||
{
|
||||
fn tag(&self) -> tree::Tag {
|
||||
|
|
@ -352,26 +354,181 @@ where
|
|||
cursor: mouse::Cursor,
|
||||
_viewport: &Rectangle,
|
||||
) {
|
||||
draw(
|
||||
tree.state.downcast_ref::<State>(),
|
||||
let state = tree.state.downcast_ref::<State>();
|
||||
|
||||
let bounds = layout.bounds();
|
||||
let content_layout = layout.children().next().unwrap();
|
||||
let content_bounds = content_layout.bounds();
|
||||
|
||||
let scrollbars =
|
||||
Scrollbars::new(state, self.direction, bounds, content_bounds);
|
||||
|
||||
let cursor_over_scrollable = cursor.position_over(bounds);
|
||||
let (mouse_over_y_scrollbar, mouse_over_x_scrollbar) =
|
||||
scrollbars.is_mouse_over(cursor);
|
||||
|
||||
let translation =
|
||||
state.translation(self.direction, bounds, content_bounds);
|
||||
|
||||
let cursor = match cursor_over_scrollable {
|
||||
Some(cursor_position)
|
||||
if !(mouse_over_x_scrollbar || mouse_over_y_scrollbar) =>
|
||||
{
|
||||
mouse::Cursor::Available(cursor_position + translation)
|
||||
}
|
||||
_ => mouse::Cursor::Unavailable,
|
||||
};
|
||||
|
||||
let status = if state.y_scroller_grabbed_at.is_some()
|
||||
|| state.x_scroller_grabbed_at.is_some()
|
||||
{
|
||||
Status::Dragged {
|
||||
is_horizontal_scrollbar_dragged: state
|
||||
.x_scroller_grabbed_at
|
||||
.is_some(),
|
||||
is_vertical_scrollbar_dragged: state
|
||||
.y_scroller_grabbed_at
|
||||
.is_some(),
|
||||
}
|
||||
} else if cursor_over_scrollable.is_some() {
|
||||
Status::Hovered {
|
||||
is_horizontal_scrollbar_hovered: mouse_over_x_scrollbar,
|
||||
is_vertical_scrollbar_hovered: mouse_over_y_scrollbar,
|
||||
}
|
||||
} else {
|
||||
Status::Active
|
||||
};
|
||||
|
||||
let appearance = (self.style)(theme, status);
|
||||
|
||||
container::draw_background(
|
||||
renderer,
|
||||
theme,
|
||||
layout,
|
||||
cursor,
|
||||
self.direction,
|
||||
&self.style,
|
||||
|renderer, layout, cursor, viewport| {
|
||||
self.content.as_widget().draw(
|
||||
&tree.children[0],
|
||||
renderer,
|
||||
theme,
|
||||
style,
|
||||
layout,
|
||||
cursor,
|
||||
viewport,
|
||||
);
|
||||
},
|
||||
&appearance.container,
|
||||
layout.bounds(),
|
||||
);
|
||||
|
||||
// Draw inner content
|
||||
if scrollbars.active() {
|
||||
renderer.with_layer(bounds, |renderer| {
|
||||
renderer.with_translation(
|
||||
Vector::new(-translation.x, -translation.y),
|
||||
|renderer| {
|
||||
self.content.as_widget().draw(
|
||||
&tree.children[0],
|
||||
renderer,
|
||||
theme,
|
||||
style,
|
||||
content_layout,
|
||||
cursor,
|
||||
&Rectangle {
|
||||
y: bounds.y + translation.y,
|
||||
x: bounds.x + translation.x,
|
||||
..bounds
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
let draw_scrollbar =
|
||||
|renderer: &mut Renderer,
|
||||
style: Scrollbar,
|
||||
scrollbar: &internals::Scrollbar| {
|
||||
if scrollbar.bounds.width > 0.0
|
||||
&& scrollbar.bounds.height > 0.0
|
||||
&& (style.background.is_some()
|
||||
|| (style.border.color != Color::TRANSPARENT
|
||||
&& style.border.width > 0.0))
|
||||
{
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: scrollbar.bounds,
|
||||
border: style.border,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
style.background.unwrap_or(Background::Color(
|
||||
Color::TRANSPARENT,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
if scrollbar.scroller.bounds.width > 0.0
|
||||
&& scrollbar.scroller.bounds.height > 0.0
|
||||
&& (style.scroller.color != Color::TRANSPARENT
|
||||
|| (style.scroller.border.color
|
||||
!= Color::TRANSPARENT
|
||||
&& style.scroller.border.width > 0.0))
|
||||
{
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: scrollbar.scroller.bounds,
|
||||
border: style.scroller.border,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
style.scroller.color,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
renderer.with_layer(
|
||||
Rectangle {
|
||||
width: bounds.width + 2.0,
|
||||
height: bounds.height + 2.0,
|
||||
..bounds
|
||||
},
|
||||
|renderer| {
|
||||
if let Some(scrollbar) = scrollbars.y {
|
||||
draw_scrollbar(
|
||||
renderer,
|
||||
appearance.vertical_scrollbar,
|
||||
&scrollbar,
|
||||
);
|
||||
}
|
||||
|
||||
if let Some(scrollbar) = scrollbars.x {
|
||||
draw_scrollbar(
|
||||
renderer,
|
||||
appearance.horizontal_scrollbar,
|
||||
&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,
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
} else {
|
||||
self.content.as_widget().draw(
|
||||
&tree.children[0],
|
||||
renderer,
|
||||
theme,
|
||||
style,
|
||||
content_layout,
|
||||
cursor,
|
||||
&Rectangle {
|
||||
x: bounds.x + translation.x,
|
||||
y: bounds.y + translation.y,
|
||||
..bounds
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
fn mouse_interaction(
|
||||
|
|
@ -430,7 +587,7 @@ impl<'a, Message, Theme, Renderer>
|
|||
for Element<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Message: 'a,
|
||||
Theme: StyleSheet + 'a,
|
||||
Theme: 'a,
|
||||
Renderer: 'a + crate::core::Renderer,
|
||||
{
|
||||
fn from(
|
||||
|
|
@ -862,190 +1019,6 @@ pub fn mouse_interaction(
|
|||
}
|
||||
}
|
||||
|
||||
/// Draws a [`Scrollable`].
|
||||
pub fn draw<Theme, Renderer>(
|
||||
state: &State,
|
||||
renderer: &mut Renderer,
|
||||
theme: &Theme,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
direction: Direction,
|
||||
style: &Theme::Style,
|
||||
draw_content: impl FnOnce(&mut Renderer, Layout<'_>, mouse::Cursor, &Rectangle),
|
||||
) where
|
||||
Theme: StyleSheet,
|
||||
Renderer: crate::core::Renderer,
|
||||
{
|
||||
let bounds = layout.bounds();
|
||||
let content_layout = layout.children().next().unwrap();
|
||||
let content_bounds = content_layout.bounds();
|
||||
|
||||
let scrollbars = Scrollbars::new(state, direction, bounds, content_bounds);
|
||||
|
||||
let cursor_over_scrollable = cursor.position_over(bounds);
|
||||
let (mouse_over_y_scrollbar, mouse_over_x_scrollbar) =
|
||||
scrollbars.is_mouse_over(cursor);
|
||||
|
||||
let translation = state.translation(direction, bounds, content_bounds);
|
||||
|
||||
let cursor = match cursor_over_scrollable {
|
||||
Some(cursor_position)
|
||||
if !(mouse_over_x_scrollbar || mouse_over_y_scrollbar) =>
|
||||
{
|
||||
mouse::Cursor::Available(cursor_position + translation)
|
||||
}
|
||||
_ => 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 scrollbar_style = |is_dragging: bool, mouse_over_scrollbar: bool| {
|
||||
if is_dragging {
|
||||
theme.dragging(style).scrollbar
|
||||
} else if cursor_over_scrollable.is_some() {
|
||||
theme.hovered(style, mouse_over_scrollbar).scrollbar
|
||||
} else {
|
||||
theme.active(style).scrollbar
|
||||
}
|
||||
};
|
||||
|
||||
// container::draw_background(
|
||||
// renderer,
|
||||
// &appearance.container,
|
||||
// layout.bounds(),
|
||||
// );
|
||||
|
||||
// Draw inner content
|
||||
if scrollbars.active() {
|
||||
renderer.with_layer(bounds, |renderer| {
|
||||
renderer.with_translation(
|
||||
Vector::new(-translation.x, -translation.y),
|
||||
|renderer| {
|
||||
draw_content(
|
||||
renderer,
|
||||
content_layout,
|
||||
cursor,
|
||||
&Rectangle {
|
||||
y: bounds.y + translation.y,
|
||||
x: bounds.x + translation.x,
|
||||
..bounds
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
let draw_scrollbar =
|
||||
|renderer: &mut Renderer,
|
||||
style: Scrollbar,
|
||||
scrollbar: &internals::Scrollbar| {
|
||||
if scrollbar.bounds.width > 0.0
|
||||
&& scrollbar.bounds.height > 0.0
|
||||
&& (style.background.is_some()
|
||||
|| (style.border.color != Color::TRANSPARENT
|
||||
&& style.border.width > 0.0))
|
||||
{
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: scrollbar.bounds,
|
||||
border: style.border,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
style
|
||||
.background
|
||||
.unwrap_or(Background::Color(Color::TRANSPARENT)),
|
||||
);
|
||||
}
|
||||
|
||||
if scrollbar.scroller.bounds.width > 0.0
|
||||
&& scrollbar.scroller.bounds.height > 0.0
|
||||
&& (style.scroller.color != Color::TRANSPARENT
|
||||
|| (style.scroller.border.color != Color::TRANSPARENT
|
||||
&& style.scroller.border.width > 0.0))
|
||||
{
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: scrollbar.scroller.bounds,
|
||||
border: style.scroller.border,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
style.scroller.color,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
renderer.with_layer(
|
||||
Rectangle {
|
||||
width: bounds.width + 2.0,
|
||||
height: bounds.height + 2.0,
|
||||
..bounds
|
||||
},
|
||||
|renderer| {
|
||||
if let Some(scrollbar) = scrollbars.y {
|
||||
draw_scrollbar(
|
||||
renderer,
|
||||
scrollbar_style(
|
||||
state.y_scroller_grabbed_at.is_some(),
|
||||
mouse_over_y_scrollbar,
|
||||
),
|
||||
&scrollbar,
|
||||
);
|
||||
}
|
||||
|
||||
if let Some(scrollbar) = scrollbars.x {
|
||||
draw_scrollbar(
|
||||
renderer,
|
||||
scrollbar_style(
|
||||
state.x_scroller_grabbed_at.is_some(),
|
||||
mouse_over_x_scrollbar,
|
||||
),
|
||||
&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,
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
} else {
|
||||
draw_content(
|
||||
renderer,
|
||||
content_layout,
|
||||
cursor,
|
||||
&Rectangle {
|
||||
x: bounds.x + translation.x,
|
||||
y: bounds.y + translation.y,
|
||||
..bounds
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
fn notify_on_scroll<Message>(
|
||||
state: &mut State,
|
||||
on_scroll: &Option<Box<dyn Fn(Viewport) -> Message + '_>>,
|
||||
|
|
@ -1625,3 +1598,145 @@ pub(super) mod internals {
|
|||
pub bounds: Rectangle,
|
||||
}
|
||||
}
|
||||
|
||||
/// The possible status of a [`Scrollable`].
|
||||
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
|
||||
pub enum Status {
|
||||
/// The [`Scrollable`] can be interacted with.
|
||||
Active,
|
||||
/// The [`Scrollable`] is being hovered.
|
||||
Hovered {
|
||||
/// Indicates if the horizontal scrollbar is being hovered.
|
||||
is_horizontal_scrollbar_hovered: bool,
|
||||
/// Indicates if the vertical scrollbar is being hovered.
|
||||
is_vertical_scrollbar_hovered: bool,
|
||||
},
|
||||
/// The [`Scrollable`] is being dragged.
|
||||
Dragged {
|
||||
/// Indicates if the horizontal scrollbar is being dragged.
|
||||
is_horizontal_scrollbar_dragged: bool,
|
||||
/// Indicates if the vertical scrollbar is being dragged.
|
||||
is_vertical_scrollbar_dragged: bool,
|
||||
},
|
||||
}
|
||||
|
||||
/// The appearance of a scrolable.
|
||||
#[derive(Debug, Clone, Copy)]
|
||||
pub struct Appearance {
|
||||
/// The [`container::Appearance`] of a scrollable.
|
||||
pub container: container::Appearance,
|
||||
/// The vertical [`Scrollbar`] appearance.
|
||||
pub vertical_scrollbar: Scrollbar,
|
||||
/// The horizontal [`Scrollbar`] appearance.
|
||||
pub horizontal_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 scrollbar.
|
||||
pub background: Option<Background>,
|
||||
/// The [`Border`] of a scrollbar.
|
||||
pub border: Border,
|
||||
/// The appearance of the [`Scroller`] of a scrollbar.
|
||||
pub scroller: Scroller,
|
||||
}
|
||||
|
||||
/// The appearance of the scroller of a scrollable.
|
||||
#[derive(Debug, Clone, Copy)]
|
||||
pub struct Scroller {
|
||||
/// The [`Color`] of the scroller.
|
||||
pub color: Color,
|
||||
/// The [`Border`] of the scroller.
|
||||
pub border: Border,
|
||||
}
|
||||
|
||||
/// The definition of the traditional style of a [`Scrollable`].
|
||||
pub trait Tradition {
|
||||
/// Returns the traditional style of a [`Scrollable`].
|
||||
fn tradition() -> fn(&Self, Status) -> Appearance;
|
||||
}
|
||||
|
||||
impl Tradition for Theme {
|
||||
fn tradition() -> fn(&Self, Status) -> Appearance {
|
||||
default
|
||||
}
|
||||
}
|
||||
|
||||
fn default(theme: &Theme, status: Status) -> Appearance {
|
||||
let palette = theme.extended_palette();
|
||||
|
||||
let scrollbar = Scrollbar {
|
||||
background: Some(palette.background.weak.color.into()),
|
||||
border: Border::with_radius(2),
|
||||
scroller: Scroller {
|
||||
color: palette.background.strong.color,
|
||||
border: Border::with_radius(2),
|
||||
},
|
||||
};
|
||||
|
||||
match status {
|
||||
Status::Active => Appearance {
|
||||
container: container::Appearance::default(),
|
||||
vertical_scrollbar: scrollbar,
|
||||
horizontal_scrollbar: scrollbar,
|
||||
gap: None,
|
||||
},
|
||||
Status::Hovered {
|
||||
is_horizontal_scrollbar_hovered,
|
||||
is_vertical_scrollbar_hovered,
|
||||
} => {
|
||||
let hovered_scrollbar = Scrollbar {
|
||||
scroller: Scroller {
|
||||
color: palette.primary.strong.color,
|
||||
..scrollbar.scroller
|
||||
},
|
||||
..scrollbar
|
||||
};
|
||||
|
||||
Appearance {
|
||||
container: container::Appearance::default(),
|
||||
vertical_scrollbar: if is_vertical_scrollbar_hovered {
|
||||
hovered_scrollbar
|
||||
} else {
|
||||
scrollbar
|
||||
},
|
||||
horizontal_scrollbar: if is_horizontal_scrollbar_hovered {
|
||||
hovered_scrollbar
|
||||
} else {
|
||||
scrollbar
|
||||
},
|
||||
gap: None,
|
||||
}
|
||||
}
|
||||
Status::Dragged {
|
||||
is_horizontal_scrollbar_dragged,
|
||||
is_vertical_scrollbar_dragged,
|
||||
} => {
|
||||
let dragged_scrollbar = Scrollbar {
|
||||
scroller: Scroller {
|
||||
color: palette.primary.base.color,
|
||||
..scrollbar.scroller
|
||||
},
|
||||
..scrollbar
|
||||
};
|
||||
|
||||
Appearance {
|
||||
container: container::Appearance::default(),
|
||||
vertical_scrollbar: if is_vertical_scrollbar_dragged {
|
||||
dragged_scrollbar
|
||||
} else {
|
||||
scrollbar
|
||||
},
|
||||
horizontal_scrollbar: if is_horizontal_scrollbar_dragged {
|
||||
dragged_scrollbar
|
||||
} else {
|
||||
scrollbar
|
||||
},
|
||||
gap: None,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue