From 7f66345d5a20c847db18893d1b8717cf1669d5b1 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 24 Oct 2020 10:00:49 +0200 Subject: 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 --- examples/scrollable/src/style.rs | 192 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 examples/scrollable/src/style.rs (limited to 'examples/scrollable/src/style.rs') diff --git a/examples/scrollable/src/style.rs b/examples/scrollable/src/style.rs new file mode 100644 index 00000000..c6a33192 --- /dev/null +++ b/examples/scrollable/src/style.rs @@ -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 for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Container.into(), + } + } +} + +impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Radio.into(), + } + } +} + +impl From for Box { + fn from(theme: Theme) -> Self { + match theme { + Theme::Light => Default::default(), + Theme::Dark => dark::Scrollable.into(), + } + } +} + +impl From for Box { + 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), + } + } + } +} -- cgit From ed458d33d9b280df136bb098e9a2ca749055b9b6 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 24 Oct 2020 10:29:19 +0200 Subject: Reduce contrast of dark theme in `scrollable` example --- examples/scrollable/src/style.rs | 76 +++++++++++++++++++--------------------- 1 file changed, 37 insertions(+), 39 deletions(-) (limited to 'examples/scrollable/src/style.rs') diff --git a/examples/scrollable/src/style.rs b/examples/scrollable/src/style.rs index c6a33192..24d711ac 100644 --- a/examples/scrollable/src/style.rs +++ b/examples/scrollable/src/style.rs @@ -56,45 +56,39 @@ 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, + 0x36 as f32 / 255.0, + 0x39 as f32 / 255.0, + 0x3F 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 SURFACE: Color = Color::from_rgb( + 0x40 as f32 / 255.0, + 0x44 as f32 / 255.0, + 0x4B 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 ACCENT: Color = Color::from_rgb( + 0x6F as f32 / 255.0, + 0xFF as f32 / 255.0, + 0xE9 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 ACTIVE: Color = Color::from_rgb( + 0x72 as f32 / 255.0, + 0x89 as f32 / 255.0, + 0xDA as f32 / 255.0, ); - const ORANGE: Color = Color::from_rgb( - 0xff as f32 / 255.0, - 0x77 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 ORANGE_DARK: Color = Color::from_rgb( - 0xe6 as f32 / 255.0, - 0x5b as f32 / 255.0, - 0x16 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; @@ -118,16 +112,16 @@ mod dark { impl radio::StyleSheet for Radio { fn active(&self) -> radio::Style { radio::Style { - background: BACKGROUND.into(), - dot_color: CYAN, + background: SURFACE.into(), + dot_color: ACTIVE, border_width: 1, - border_color: CYAN, + border_color: ACTIVE, } } fn hovered(&self) -> radio::Style { radio::Style { - background: LIGHTER_BACKGROUND.into(), + background: Color { a: 0.5, ..SURFACE }.into(), ..self.active() } } @@ -138,12 +132,16 @@ mod dark { impl scrollable::StyleSheet for Scrollable { fn active(&self) -> scrollable::Scrollbar { scrollable::Scrollbar { - background: CYAN.into(), + background: Color { + a: 0.8, + ..SCROLLBAR + } + .into(), border_radius: 2, border_width: 0, border_color: Color::TRANSPARENT, scroller: scrollable::Scroller { - color: YELLOW, + color: Color { a: 0.7, ..SCROLLER }, border_radius: 2, border_width: 0, border_color: Color::TRANSPARENT, @@ -155,9 +153,9 @@ mod dark { let active = self.active(); scrollable::Scrollbar { - background: CYAN_LIGHT.into(), + background: SCROLLBAR.into(), scroller: scrollable::Scroller { - color: ORANGE, + color: SCROLLER, ..active.scroller }, ..active @@ -169,7 +167,7 @@ mod dark { scrollable::Scrollbar { scroller: scrollable::Scroller { - color: ORANGE_DARK, + color: ACCENT, ..hovered.scroller }, ..hovered @@ -182,10 +180,10 @@ mod dark { impl rule::StyleSheet for Rule { fn style(&self) -> rule::Style { rule::Style { - color: CYAN, + color: SURFACE, width: 2, radius: 1, - fill_mode: rule::FillMode::Percent(15.0), + fill_mode: rule::FillMode::Percent(30.0), } } } -- cgit