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
}
}