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

Implement theme styling for Scrollable

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2022-06-07 03:26:48 +02:00
parent ce53d3933c
commit de21a651c0
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
11 changed files with 127 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
mod style;
use iced::button;
use iced::scrollable;
use iced::{
button, scrollable, Button, Column, Container, Element, Length,
ProgressBar, Radio, Row, Rule, Sandbox, Scrollable, Settings, Space, Text,
Button, Column, Container, Element, Length, ProgressBar, Radio, Row, Rule,
Sandbox, Scrollable, Settings, Space, Text, Theme,
};
pub fn main() -> iced::Result {
@ -10,13 +10,13 @@ pub fn main() -> iced::Result {
}
struct ScrollableDemo {
theme: style::Theme,
theme: Theme,
variants: Vec<Variant>,
}
#[derive(Debug, Clone)]
enum Message {
ThemeChanged(style::Theme),
ThemeChanged(Theme),
ScrollToTop(usize),
ScrollToBottom(usize),
Scrolled(usize, f32),
@ -66,7 +66,7 @@ impl Sandbox for ScrollableDemo {
theme, variants, ..
} = self;
let choose_theme = style::Theme::ALL.iter().fold(
let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
Column::new().spacing(10).push(Text::new("Choose a theme:")),
|column, option| {
column.push(Radio::new(
@ -92,7 +92,6 @@ impl Sandbox for ScrollableDemo {
.on_scroll(move |offset| {
Message::Scrolled(i, offset)
})
.style(*theme)
.push(Text::new(variant.title))
.push(
Button::new(
@ -157,12 +156,7 @@ impl Sandbox for ScrollableDemo {
.width(Length::Fill)
.height(Length::Fill)
.spacing(10)
.push(
Container::new(scrollable)
.width(Length::Fill)
.height(Length::Fill)
.style(*theme),
)
.push(scrollable)
.push(ProgressBar::new(
0.0..=1.0,
variant.latest_offset,
@ -187,9 +181,12 @@ impl Sandbox for ScrollableDemo {
.height(Length::Fill)
.center_x()
.center_y()
.style(self.theme)
.into()
}
fn theme(&self) -> Theme {
self.theme
}
}
/// A version of a scrollable

79
examples/scrollable/src/style.rs
View file

@ -1,4 +1,4 @@
use iced::{container, scrollable};
use iced::container;
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Theme {
@ -25,17 +25,8 @@ impl<'a> From<Theme> for Box<dyn container::StyleSheet + 'a> {
}
}
impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Scrollable.into(),
}
}
}
mod dark {
use iced::{container, scrollable, Color};
use iced::{container, Color};
const BACKGROUND: Color = Color::from_rgb(
0x36 as f32 / 255.0,
@ -43,24 +34,6 @@ mod dark {
0x3F as f32 / 255.0,
);
const ACCENT: Color = Color::from_rgb(
0x6F as f32 / 255.0,
0xFF as f32 / 255.0,
0xE9 as f32 / 255.0,
);
const SCROLLBAR: Color = Color::from_rgb(
0x2E as f32 / 255.0,
0x33 as f32 / 255.0,
0x38 as f32 / 255.0,
);
const SCROLLER: Color = Color::from_rgb(
0x20 as f32 / 255.0,
0x22 as f32 / 255.0,
0x25 as f32 / 255.0,
);
pub struct Container;
impl container::StyleSheet for Container {
@ -76,52 +49,4 @@ mod dark {
}
}
}
pub struct Scrollable;
impl scrollable::StyleSheet for Scrollable {
fn active(&self) -> scrollable::Scrollbar {
scrollable::Scrollbar {
background: Color {
a: 0.8,
..SCROLLBAR
}
.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: Color { a: 0.7, ..SCROLLER },
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
}
}
fn hovered(&self) -> scrollable::Scrollbar {
let active = self.active();
scrollable::Scrollbar {
background: SCROLLBAR.into(),
scroller: scrollable::Scroller {
color: SCROLLER,
..active.scroller
},
..active
}
}
fn dragging(&self) -> scrollable::Scrollbar {
let hovered = self.hovered();
scrollable::Scrollbar {
scroller: scrollable::Scroller {
color: ACCENT,
..hovered.scroller
},
..hovered
}
}
}
}

107
examples/styling/src/main.rs
View file

@ -14,7 +14,7 @@ pub fn main() -> iced::Result {
#[derive(Default)]
struct Styling {
theme: style::Theme,
theme: Theme,
scroll: scrollable::State,
input: text_input::State,
input_value: String,
@ -27,7 +27,7 @@ struct Styling {
#[derive(Debug, Clone)]
enum Message {
ThemeChanged(style::Theme),
ThemeChanged(Theme),
InputChanged(String),
ButtonPressed,
SliderChanged(f32),
@ -58,7 +58,7 @@ impl Sandbox for Styling {
}
fn view(&mut self) -> Element<Message> {
let choose_theme = style::Theme::ALL.iter().fold(
let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
Column::new().spacing(10).push(Text::new("Choose a theme:")),
|column, theme| {
column.push(Radio::new(
@ -95,7 +95,6 @@ impl Sandbox for Styling {
let scrollable = Scrollable::new(&mut self.scroll)
.width(Length::Fill)
.height(Length::Units(100))
.style(self.theme)
.push(Text::new("Scroll me!"))
.push(Space::with_height(Length::Units(800)))
.push(Text::new("You did it!"));
@ -148,104 +147,6 @@ impl Sandbox for Styling {
}
fn theme(&self) -> Theme {
match self.theme {
style::Theme::Light => Theme::Light,
style::Theme::Dark => Theme::Dark,
}
}
}
mod style {
use iced::scrollable;
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Theme {
Light,
Dark,
}
impl Theme {
pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark];
}
impl Default for Theme {
fn default() -> Theme {
Theme::Light
}
}
impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Scrollable.into(),
}
}
}
mod dark {
use iced::{scrollable, Color};
const SURFACE: Color = Color::from_rgb(
0x40 as f32 / 255.0,
0x44 as f32 / 255.0,
0x4B as f32 / 255.0,
);
const ACTIVE: Color = Color::from_rgb(
0x72 as f32 / 255.0,
0x89 as f32 / 255.0,
0xDA as f32 / 255.0,
);
const HOVERED: Color = Color::from_rgb(
0x67 as f32 / 255.0,
0x7B as f32 / 255.0,
0xC4 as f32 / 255.0,
);
pub struct Scrollable;
impl scrollable::StyleSheet for Scrollable {
fn active(&self) -> scrollable::Scrollbar {
scrollable::Scrollbar {
background: SURFACE.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: ACTIVE,
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
}
}
fn hovered(&self) -> scrollable::Scrollbar {
let active = self.active();
scrollable::Scrollbar {
background: Color { a: 0.5, ..SURFACE }.into(),
scroller: scrollable::Scroller {
color: HOVERED,
..active.scroller
},
..active
}
}
fn dragging(&self) -> scrollable::Scrollbar {
let hovered = self.hovered();
scrollable::Scrollbar {
scroller: scrollable::Scroller {
color: Color::from_rgb(0.85, 0.85, 0.85),
..hovered.scroller
},
..hovered
}
}
}
self.theme
}
}

7
native/src/overlay/menu.rs
View file

@ -34,6 +34,7 @@ impl<'a, T, Renderer> Menu<'a, T, Renderer>
where
T: ToString + Clone,
Renderer: text::Renderer + 'a,
Renderer::Theme: scrollable::StyleSheet,
{
/// Creates a new [`Menu`] with the given [`State`], a list of options, and
/// the message to produced when an option is selected.
@ -117,17 +118,19 @@ impl State {
}
}
struct Overlay<'a, Message, Renderer: text::Renderer> {
struct Overlay<'a, Message, Renderer> {
container: Container<'a, Message, Renderer>,
width: u16,
target_height: f32,
style: Style,
}
impl<'a, Message, Renderer: text::Renderer> Overlay<'a, Message, Renderer>
impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
where
Message: 'a,
Renderer: 'a,
Renderer: text::Renderer,
Renderer::Theme: scrollable::StyleSheet,
{
pub fn new<T>(menu: Menu<'a, T, Renderer>, target_height: f32) -> Self
where

8
native/src/widget/pick_list.rs
View file

@ -9,6 +9,7 @@ use crate::overlay::menu::{self, Menu};
use crate::renderer;
use crate::text::{self, Text};
use crate::touch;
use crate::widget::scrollable;
use crate::{
Clipboard, Element, Layout, Length, Padding, Point, Rectangle, Shell, Size,
Widget,
@ -322,6 +323,7 @@ pub fn overlay<'a, T, Message, Renderer>(
where
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: scrollable::StyleSheet,
T: Clone + ToString,
{
if state.is_open {
@ -430,6 +432,7 @@ where
[T]: ToOwned<Owned = Vec<T>>,
Message: 'static,
Renderer: text::Renderer + 'a,
Renderer::Theme: scrollable::StyleSheet,
{
fn width(&self) -> Length {
self.width
@ -490,7 +493,7 @@ where
fn draw(
&self,
renderer: &mut Renderer,
theme: &Renderer::Theme,
_theme: &Renderer::Theme,
_style: &renderer::Style,
layout: Layout<'_>,
cursor_position: Point,
@ -531,8 +534,9 @@ impl<'a, T: 'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
where
T: Clone + ToString + Eq,
[T]: ToOwned<Owned = Vec<T>>,
Renderer: text::Renderer + 'a,
Message: 'static,
Renderer: text::Renderer + 'a,
Renderer::Theme: scrollable::StyleSheet,
{
fn into(self) -> Element<'a, Message, Renderer> {
Element::new(self)

37
native/src/widget/scrollable.rs
View file

@ -25,7 +25,11 @@ pub mod style {
/// A widget that can vertically display an infinite amount of content with a
/// scrollbar.
#[allow(missing_debug_implementations)]
pub struct Scrollable<'a, Message, Renderer> {
pub struct Scrollable<'a, Message, Renderer>
where
Renderer: crate::Renderer,
Renderer::Theme: StyleSheet,
{
state: &'a mut State,
height: Length,
max_height: u32,
@ -34,10 +38,14 @@ pub struct Scrollable<'a, Message, Renderer> {
scroller_width: u16,
content: Column<'a, Message, Renderer>,
on_scroll: Option<Box<dyn Fn(f32) -> Message + 'a>>,
style_sheet: Box<dyn StyleSheet + 'a>,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer>
where
Renderer: crate::Renderer,
Renderer::Theme: StyleSheet,
{
/// Creates a new [`Scrollable`] with the given [`State`].
pub fn new(state: &'a mut State) -> Self {
Scrollable {
@ -49,7 +57,7 @@ impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
scroller_width: 10,
content: Column::new(),
on_scroll: None,
style_sheet: Default::default(),
style: Default::default(),
}
}
@ -132,9 +140,9 @@ impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
/// Sets the style of the [`Scrollable`] .
pub fn style(
mut self,
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style_sheet = style_sheet.into();
self.style = style.into();
self
}
@ -428,15 +436,17 @@ pub fn mouse_interaction(
pub fn draw<Renderer>(
state: &State,
renderer: &mut Renderer,
theme: &Renderer::Theme,
layout: Layout<'_>,
cursor_position: Point,
scrollbar_width: u16,
scrollbar_margin: u16,
scroller_width: u16,
style_sheet: &dyn StyleSheet,
style: <Renderer::Theme as StyleSheet>::Style,
draw_content: impl FnOnce(&mut Renderer, Layout<'_>, Point, &Rectangle),
) where
Renderer: crate::Renderer,
Renderer::Theme: StyleSheet,
{
let bounds = layout.bounds();
let content_layout = layout.children().next().unwrap();
@ -482,11 +492,11 @@ pub fn draw<Renderer>(
});
let style = if state.is_scroller_grabbed() {
style_sheet.dragging()
theme.dragging(style)
} else if is_mouse_over_scrollbar {
style_sheet.hovered()
theme.hovered(style)
} else {
style_sheet.active()
theme.active(style)
};
let is_scrollbar_visible =
@ -618,6 +628,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
for Scrollable<'a, Message, Renderer>
where
Renderer: crate::Renderer,
Renderer::Theme: StyleSheet,
{
fn width(&self) -> Length {
Widget::<Message, Renderer>::width(&self.content)
@ -711,12 +722,13 @@ where
draw(
&self.state,
renderer,
theme,
layout,
cursor_position,
self.scrollbar_width,
self.scrollbar_margin,
self.scroller_width,
self.style_sheet.as_ref(),
self.style,
|renderer, layout, cursor_position, viewport| {
self.content.draw(
renderer,
@ -916,8 +928,9 @@ struct Scroller {
impl<'a, Message, Renderer> From<Scrollable<'a, Message, Renderer>>
for Element<'a, Message, Renderer>
where
Renderer: 'a + crate::Renderer,
Message: 'a,
Renderer: 'a + crate::Renderer,
Renderer::Theme: StyleSheet,
{
fn from(
scrollable: Scrollable<'a, Message, Renderer>,

1
pure/src/helpers.rs
View file

@ -41,6 +41,7 @@ pub fn scrollable<'a, Message, Renderer>(
) -> widget::Scrollable<'a, Message, Renderer>
where
Renderer: iced_native::Renderer,
Renderer::Theme: widget::scrollable::StyleSheet,
{
widget::Scrollable::new(content)
}

5
pure/src/widget/pick_list.rs
View file

@ -1,4 +1,5 @@
//! Display a dropdown list of selectable values.
use crate::widget::scrollable;
use crate::widget::tree::{self, Tree};
use crate::{Element, Widget};
@ -110,6 +111,7 @@ where
[T]: ToOwned<Owned = Vec<T>>,
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: scrollable::StyleSheet,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<pick_list::State<T>>()
@ -225,8 +227,9 @@ impl<'a, T: 'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
where
T: Clone + ToString + Eq + 'static,
[T]: ToOwned<Owned = Vec<T>>,
Renderer: text::Renderer + 'a,
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: scrollable::StyleSheet,
{
fn into(self) -> Element<'a, Message, Renderer> {
Element::new(self)

29
pure/src/widget/scrollable.rs
View file

@ -15,18 +15,24 @@ pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
/// A widget that can vertically display an infinite amount of content with a
/// scrollbar.
#[allow(missing_debug_implementations)]
pub struct Scrollable<'a, Message, Renderer> {
pub struct Scrollable<'a, Message, Renderer>
where
Renderer: iced_native::Renderer,
Renderer::Theme: StyleSheet,
{
height: Length,
scrollbar_width: u16,
scrollbar_margin: u16,
scroller_width: u16,
on_scroll: Option<Box<dyn Fn(f32) -> Message + 'a>>,
style_sheet: Box<dyn StyleSheet + 'a>,
content: Element<'a, Message, Renderer>,
on_scroll: Option<Box<dyn Fn(f32) -> Message + 'a>>,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, Message, Renderer: iced_native::Renderer>
Scrollable<'a, Message, Renderer>
impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer>
where
Renderer: iced_native::Renderer,
Renderer::Theme: StyleSheet,
{
/// Creates a new [`Scrollable`].
pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
@ -35,9 +41,9 @@ impl<'a, Message, Renderer: iced_native::Renderer>
scrollbar_width: 10,
scrollbar_margin: 0,
scroller_width: 10,
on_scroll: None,
style_sheet: Default::default(),
content: content.into(),
on_scroll: None,
style: Default::default(),
}
}
@ -80,9 +86,9 @@ impl<'a, Message, Renderer: iced_native::Renderer>
/// Sets the style of the [`Scrollable`] .
pub fn style(
mut self,
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style_sheet = style_sheet.into();
self.style = style.into();
self
}
}
@ -91,6 +97,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
for Scrollable<'a, Message, Renderer>
where
Renderer: iced_native::Renderer,
Renderer::Theme: StyleSheet,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<scrollable::State>()
@ -180,12 +187,13 @@ where
scrollable::draw(
tree.state.downcast_ref::<scrollable::State>(),
renderer,
theme,
layout,
cursor_position,
self.scrollbar_width,
self.scrollbar_margin,
self.scroller_width,
self.style_sheet.as_ref(),
self.style,
|renderer, layout, cursor_position, viewport| {
self.content.as_widget().draw(
&tree.children[0],
@ -259,6 +267,7 @@ impl<'a, Message, Renderer> From<Scrollable<'a, Message, Renderer>>
where
Message: 'a + Clone,
Renderer: 'a + iced_native::Renderer,
Renderer::Theme: StyleSheet,
{
fn from(
text_input: Scrollable<'a, Message, Renderer>,

51
style/src/scrollable.rs
View file

@ -22,55 +22,16 @@ pub struct Scroller {
/// A set of rules that dictate the style of a scrollable.
pub trait StyleSheet {
type Style: Default + Copy;
/// Produces the style of an active scrollbar.
fn active(&self) -> Scrollbar;
fn active(&self, style: Self::Style) -> Scrollbar;
/// Produces the style of an hovered scrollbar.
fn hovered(&self) -> Scrollbar;
fn hovered(&self, style: Self::Style) -> Scrollbar;
/// Produces the style of a scrollbar that is being dragged.
fn dragging(&self) -> Scrollbar {
self.hovered()
}
}
struct Default;
impl StyleSheet for Default {
fn active(&self) -> Scrollbar {
Scrollbar {
background: None,
border_radius: 5.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: Scroller {
color: [0.0, 0.0, 0.0, 0.7].into(),
border_radius: 5.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
}
}
fn hovered(&self) -> Scrollbar {
Scrollbar {
background: Some(Background::Color([0.0, 0.0, 0.0, 0.3].into())),
..self.active()
}
}
}
impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
fn default() -> Self {
Box::new(Default)
}
}
impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
where
T: StyleSheet + 'a,
{
fn from(style_sheet: T) -> Self {
Box::new(style_sheet)
fn dragging(&self, style: Self::Style) -> Scrollbar {
self.hovered(style)
}
}

43
style/src/theme.rs
View file

@ -9,6 +9,7 @@ use crate::pane_grid;
use crate::progress_bar;
use crate::radio;
use crate::rule;
use crate::scrollable;
use crate::slider;
use crate::text_input;
use crate::toggler;
@ -458,6 +459,48 @@ impl rule::StyleSheet for Theme {
}
}
/*
* Scrollable
*/
impl scrollable::StyleSheet for Theme {
type Style = ();
fn active(&self, _style: Self::Style) -> scrollable::Scrollbar {
let palette = self.extended_palette();
scrollable::Scrollbar {
background: palette.background.weak.color.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: palette.background.strong.color.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
}
}
fn hovered(&self, _style: Self::Style) -> scrollable::Scrollbar {
let palette = self.extended_palette();
scrollable::Scrollbar {
background: palette.background.weak.color.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: palette.primary.strong.color.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
}
}
}
/*
* Text Input
*/