reivilibre
/
iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve minor details in `scrollable` example 

- Rename `Config` to `Variant`
- Include `State` in `Variant` to avoid `zip`
- Break long string literal
- Split `style` module into its own file
This commit is contained in:
Héctor Ramón Jiménez 2020-10-24 10:00:49 +02:00
parent e43a46952a
commit 7f66345d5a
2 changed files with 260 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
examples/scrollable/src/main.rs
View File

@ -1,3 +1,5 @@
mod style;
use iced::{
scrollable, Column, Container, Element, Length, Radio, Row, Rule, Sandbox,
Scrollable, Settings, Space, Text,
@ -9,8 +11,7 @@ pub fn main() -> iced::Result {
struct ScrollableDemo {
theme: style::Theme,
scroll: Vec<scrollable::State>,
config: Vec<Config>,
variants: Vec<Variant>,
}
#[derive(Debug, Clone)]
@ -18,52 +19,13 @@ enum Message {
ThemeChanged(style::Theme),
}
/// Contains configuration for a single scrollbar
struct Config {
top_content: String,
scrollbar_width: Option<u16>,
scrollbar_margin: Option<u16>,
scroller_width: Option<u16>,
}
fn get_configs() -> Vec<Config> {
vec![
Config {
top_content: "Default Scrollbar".into(),
scrollbar_width: None,
scrollbar_margin: None,
scroller_width: None,
},
Config {
top_content: "Slimmed & Margin".into(),
scrollbar_width: Some(4),
scrollbar_margin: Some(3),
scroller_width: Some(4),
},
Config {
top_content: "Wide Scroller".into(),
scrollbar_width: Some(4),
scrollbar_margin: None,
scroller_width: Some(10),
},
Config {
top_content: "Narrow Scroller".into(),
scrollbar_width: Some(10),
scrollbar_margin: None,
scroller_width: Some(4),
},
]
}
impl Sandbox for ScrollableDemo {
type Message = Message;
fn new() -> Self {
let config = get_configs();
ScrollableDemo {
theme: Default::default(),
scroll: vec![scrollable::State::default(); config.len()],
config,
variants: Variant::all(),
}
}
@ -78,36 +40,37 @@ impl Sandbox for ScrollableDemo {
}
fn view(&mut self) -> Element<Message> {
let ScrollableDemo {
theme, variants, ..
} = self;
let choose_theme = style::Theme::ALL.iter().fold(
Column::new().spacing(10).push(Text::new("Choose a theme:")),
|column, theme| {
|column, option| {
column.push(
Radio::new(
*theme,
&format!("{:?}", theme),
Some(self.theme),
*option,
&format!("{:?}", option),
Some(*theme),
Message::ThemeChanged,
)
.style(self.theme),
.style(*theme),
)
},
);
let ScrollableDemo { scroll, theme, .. } = self;
let scrollable_row = Row::with_children(
scroll
variants
.iter_mut()
.zip(self.config.iter())
.map(|(state, config)| {
let mut scrollable = Scrollable::new(state)
.map(|variant| {
let mut scrollable = Scrollable::new(&mut variant.state)
.padding(10)
.width(Length::Fill)
.height(Length::Fill)
.style(*theme)
.push(Text::new(config.top_content.clone()));
.push(Text::new(variant.title));
if let Some(scrollbar_width) = config.scrollbar_width {
if let Some(scrollbar_width) = variant.scrollbar_width {
scrollable = scrollable
.scrollbar_width(scrollbar_width)
.push(Text::new(format!(
@ -115,7 +78,8 @@ impl Sandbox for ScrollableDemo {
scrollbar_width
)));
}
if let Some(scrollbar_margin) = config.scrollbar_margin {
if let Some(scrollbar_margin) = variant.scrollbar_margin {
scrollable = scrollable
.scrollbar_margin(scrollbar_margin)
.push(Text::new(format!(
@ -123,7 +87,8 @@ impl Sandbox for ScrollableDemo {
scrollbar_margin
)));
}
if let Some(scroller_width) = config.scroller_width {
if let Some(scroller_width) = variant.scroller_width {
scrollable = scrollable
.scroller_width(scroller_width)
.push(Text::new(format!(
@ -134,7 +99,12 @@ impl Sandbox for ScrollableDemo {
scrollable = scrollable
.push(Space::with_height(Length::Units(100)))
.push(Text::new("Some content that should wrap within the scrollable. Let's output a lot of short words, so that we'll make sure to see how wrapping works with these scrollbars."))
.push(Text::new(
"Some content that should wrap within the \
scrollable. Let's output a lot of short words, so \
that we'll make sure to see how wrapping works \
with these scrollbars.",
))
.push(Space::with_height(Length::Units(1200)))
.push(Text::new("Middle"))
.push(Space::with_height(Length::Units(1200)))
@ -169,197 +139,46 @@ impl Sandbox for ScrollableDemo {
}
}
mod style {
use iced::{container, radio, rule, scrollable};
/// A version of a scrollable
struct Variant {
title: &'static str,
state: scrollable::State,
scrollbar_width: Option<u16>,
scrollbar_margin: Option<u16>,
scroller_width: Option<u16>,
}
#[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 From<Theme> for Box<dyn container::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Container.into(),
}
}
}
impl From<Theme> for Box<dyn radio::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Radio.into(),
}
}
}
impl From<Theme> for Box<dyn scrollable::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Scrollable.into(),
}
}
}
impl From<Theme> for Box<dyn rule::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Rule.into(),
}
}
}
mod dark {
use iced::{container, radio, rule, scrollable, Color};
const BACKGROUND: Color = Color::from_rgb(
0x0f as f32 / 255.0,
0x14 as f32 / 255.0,
0x19 as f32 / 255.0,
);
const LIGHTER_BACKGROUND: Color = Color::from_rgb(
0x14 as f32 / 255.0,
0x19 as f32 / 255.0,
0x1f as f32 / 255.0,
);
const YELLOW: Color = Color::from_rgb(
0xff as f32 / 255.0,
0xb4 as f32 / 255.0,
0x54 as f32 / 255.0,
);
const CYAN: Color = Color::from_rgb(
0x39 as f32 / 255.0,
0xaf as f32 / 255.0,
0xd7 as f32 / 255.0,
);
const CYAN_LIGHT: Color = Color::from_rgb(
0x5d as f32 / 255.0,
0xb7 as f32 / 255.0,
0xd5 as f32 / 255.0,
);
const ORANGE: Color = Color::from_rgb(
0xff as f32 / 255.0,
0x77 as f32 / 255.0,
0x33 as f32 / 255.0,
);
const ORANGE_DARK: Color = Color::from_rgb(
0xe6 as f32 / 255.0,
0x5b as f32 / 255.0,
0x16 as f32 / 255.0,
);
pub struct Container;
impl container::StyleSheet for Container {
fn style(&self) -> container::Style {
container::Style {
background: Color {
a: 0.99,
..BACKGROUND
}
.into(),
text_color: Color::WHITE.into(),
..container::Style::default()
}
}
}
pub struct Radio;
impl radio::StyleSheet for Radio {
fn active(&self) -> radio::Style {
radio::Style {
background: BACKGROUND.into(),
dot_color: CYAN,
border_width: 1,
border_color: CYAN,
}
}
fn hovered(&self) -> radio::Style {
radio::Style {
background: LIGHTER_BACKGROUND.into(),
..self.active()
}
}
}
pub struct Scrollable;
impl scrollable::StyleSheet for Scrollable {
fn active(&self) -> scrollable::Scrollbar {
scrollable::Scrollbar {
background: CYAN.into(),
border_radius: 2,
border_width: 0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: YELLOW,
border_radius: 2,
border_width: 0,
border_color: Color::TRANSPARENT,
},
}
}
fn hovered(&self) -> scrollable::Scrollbar {
let active = self.active();
scrollable::Scrollbar {
background: CYAN_LIGHT.into(),
scroller: scrollable::Scroller {
color: ORANGE,
..active.scroller
},
..active
}
}
fn dragging(&self) -> scrollable::Scrollbar {
let hovered = self.hovered();
scrollable::Scrollbar {
scroller: scrollable::Scroller {
color: ORANGE_DARK,
..hovered.scroller
},
..hovered
}
}
}
pub struct Rule;
impl rule::StyleSheet for Rule {
fn style(&self) -> rule::Style {
rule::Style {
color: CYAN,
width: 2,
radius: 1,
fill_mode: rule::FillMode::Percent(15.0),
}
}
}
impl Variant {
pub fn all() -> Vec<Self> {
vec![
Self {
title: "Default Scrollbar",
state: scrollable::State::new(),
scrollbar_width: None,
scrollbar_margin: None,
scroller_width: None,
},
Self {
title: "Slimmed & Margin",
state: scrollable::State::new(),
scrollbar_width: Some(4),
scrollbar_margin: Some(3),
scroller_width: Some(4),
},
Self {
title: "Wide Scroller",
state: scrollable::State::new(),
scrollbar_width: Some(4),
scrollbar_margin: None,
scroller_width: Some(10),
},
Self {
title: "Narrow Scroller",
state: scrollable::State::new(),
scrollbar_width: Some(10),
scrollbar_margin: None,
scroller_width: Some(4),
},
]
}
}

192
examples/scrollable/src/style.rs Normal file
View File

@ -0,0 +1,192 @@
use iced::{container, radio, rule, 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 From<Theme> for Box<dyn container::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Container.into(),
}
}
}
impl From<Theme> for Box<dyn radio::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Radio.into(),
}
}
}
impl From<Theme> for Box<dyn scrollable::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Scrollable.into(),
}
}
}
impl From<Theme> for Box<dyn rule::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::Rule.into(),
}
}
}
mod dark {
use iced::{container, radio, rule, scrollable, Color};
const BACKGROUND: Color = Color::from_rgb(
0x0f as f32 / 255.0,
0x14 as f32 / 255.0,
0x19 as f32 / 255.0,
);
const LIGHTER_BACKGROUND: Color = Color::from_rgb(
0x14 as f32 / 255.0,
0x19 as f32 / 255.0,
0x1f as f32 / 255.0,
);
const YELLOW: Color = Color::from_rgb(
0xff as f32 / 255.0,
0xb4 as f32 / 255.0,
0x54 as f32 / 255.0,
);
const CYAN: Color = Color::from_rgb(
0x39 as f32 / 255.0,
0xaf as f32 / 255.0,
0xd7 as f32 / 255.0,
);
const CYAN_LIGHT: Color = Color::from_rgb(
0x5d as f32 / 255.0,
0xb7 as f32 / 255.0,
0xd5 as f32 / 255.0,
);
const ORANGE: Color = Color::from_rgb(
0xff as f32 / 255.0,
0x77 as f32 / 255.0,
0x33 as f32 / 255.0,
);
const ORANGE_DARK: Color = Color::from_rgb(
0xe6 as f32 / 255.0,
0x5b as f32 / 255.0,
0x16 as f32 / 255.0,
);
pub struct Container;
impl container::StyleSheet for Container {
fn style(&self) -> container::Style {
container::Style {
background: Color {
a: 0.99,
..BACKGROUND
}
.into(),
text_color: Color::WHITE.into(),
..container::Style::default()
}
}
}
pub struct Radio;
impl radio::StyleSheet for Radio {
fn active(&self) -> radio::Style {
radio::Style {
background: BACKGROUND.into(),
dot_color: CYAN,
border_width: 1,
border_color: CYAN,
}
}
fn hovered(&self) -> radio::Style {
radio::Style {
background: LIGHTER_BACKGROUND.into(),
..self.active()
}
}
}
pub struct Scrollable;
impl scrollable::StyleSheet for Scrollable {
fn active(&self) -> scrollable::Scrollbar {
scrollable::Scrollbar {
background: CYAN.into(),
border_radius: 2,
border_width: 0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: YELLOW,
border_radius: 2,
border_width: 0,
border_color: Color::TRANSPARENT,
},
}
}
fn hovered(&self) -> scrollable::Scrollbar {
let active = self.active();
scrollable::Scrollbar {
background: CYAN_LIGHT.into(),
scroller: scrollable::Scroller {
color: ORANGE,
..active.scroller
},
..active
}
}
fn dragging(&self) -> scrollable::Scrollbar {
let hovered = self.hovered();
scrollable::Scrollbar {
scroller: scrollable::Scroller {
color: ORANGE_DARK,
..hovered.scroller
},
..hovered
}
}
}
pub struct Rule;
impl rule::StyleSheet for Rule {
fn style(&self) -> rule::Style {
rule::Style {
color: CYAN,
width: 2,
radius: 1,
fill_mode: rule::FillMode::Percent(15.0),
}
}
}
}