Merge pull request gfx-rs#146 from hecrj/feature/custom-styling

Custom styling

Author: hecrj

Cargo.toml

@@ -24,6 +24,7 @@ maintenance = { status = "actively-developed" }
 members = [
     "core",
     "native",
+    "style",
     "web",
     "wgpu",
     "winit",

core/src/color.rs

@@ -25,6 +25,21 @@ impl Color {
         a: 1.0,
     };
 
+    /// A color with no opacity.
+    pub const TRANSPARENT: Color = Color {
+        r: 0.0,
+        g: 0.0,
+        b: 0.0,
+        a: 0.0,
+    };
+
+    /// Creates a [`Color`] from its RGB components.
+    ///
+    /// [`Color`]: struct.Color.html
+    pub const fn from_rgb(r: f32, g: f32, b: f32) -> Color {
+        Color { r, g, b, a: 1.0 }
+    }
+
     /// Creates a [`Color`] from its RGB8 components.
     ///
     /// [`Color`]: struct.Color.html
@@ -37,13 +52,6 @@ impl Color {
         }
     }
 
-    /// Creates a [`Color`] from its RGB components.
-    ///
-    /// [`Color`]: struct.Color.html
-    pub fn from_rgb(r: f32, g: f32, b: f32) -> Color {
-        Color { r, g, b, a: 1.0 }
-    }
-
     /// Converts the [`Color`] into its linear values.
     ///
     /// [`Color`]: struct.Color.html

core/src/vector.rs

@@ -31,3 +31,15 @@ where
         Self::new(self.x + b.x, self.y + b.y)
     }
 }
+
+impl<T> Default for Vector<T>
+where
+    T: Default,
+{
+    fn default() -> Self {
+        Self {
+            x: T::default(),
+            y: T::default(),
+        }
+    }
+}

examples/custom_widget.rs

@@ -13,7 +13,7 @@ mod circle {
         layout, Background, Color, Element, Hasher, Layout, Length,
         MouseCursor, Point, Size, Widget,
     };
-    use iced_wgpu::{Primitive, Renderer};
+    use iced_wgpu::{Defaults, Primitive, Renderer};
 
     pub struct Circle {
         radius: u16,
@@ -54,6 +54,7 @@ mod circle {
         fn draw(
             &self,
             _renderer: &mut Renderer,
+            _defaults: &Defaults,
             layout: Layout<'_>,
             _cursor_position: Point,
         ) -> (Primitive, MouseCursor) {
@@ -62,6 +63,8 @@ mod circle {
                     bounds: layout.bounds(),
                     background: Background::Color(Color::BLACK),
                     border_radius: self.radius,
+                    border_width: 0,
+                    border_color: Color::TRANSPARENT,
                 },
                 MouseCursor::OutOfBounds,
             )

examples/geometry.rs

@@ -16,7 +16,7 @@ mod rainbow {
     };
     use iced_wgpu::{
         triangle::{Mesh2D, Vertex2D},
-        Primitive, Renderer,
+        Defaults, Primitive, Renderer,
     };
 
     pub struct Rainbow;
@@ -51,6 +51,7 @@ mod rainbow {
         fn draw(
             &self,
             _renderer: &mut Renderer,
+            _defaults: &Defaults,
             layout: Layout<'_>,
             cursor_position: Point,
         ) -> (Primitive, MouseCursor) {

examples/pokedex.rs

@@ -1,6 +1,6 @@
 use iced::{
-    button, image, Align, Application, Button, Color, Column, Command,
-    Container, Element, Image, Length, Row, Settings, Text,
+    button, image, Align, Application, Button, Column, Command, Container,
+    Element, Image, Length, Row, Settings, Text,
 };
 
 pub fn main() {
@@ -214,8 +214,29 @@ impl From<surf::Exception> for Error {
 }
 
 fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
-    Button::new(state, Text::new(text).color(Color::WHITE))
-        .background(Color::from_rgb(0.11, 0.42, 0.87))
-        .border_radius(10)
+    Button::new(state, Text::new(text))
         .padding(10)
+        .style(style::Button::Primary)
+}
+
+mod style {
+    use iced::{button, Background, Color, Vector};
+
+    pub enum Button {
+        Primary,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            button::Style {
+                background: Some(Background::Color(match self {
+                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+                })),
+                border_radius: 12,
+                shadow_offset: Vector::new(1.0, 1.0),
+                text_color: Color::WHITE,
+                ..button::Style::default()
+            }
+        }
+    }
 }

examples/progress_bar.rs

@@ -1,16 +1,7 @@
-use iced::{
-    settings::Window, slider, Background, Color, Column, Element, Length,
-    ProgressBar, Sandbox, Settings, Slider,
-};
+use iced::{slider, Column, Element, ProgressBar, Sandbox, Settings, Slider};
 
 pub fn main() {
-    Progress::run(Settings {
-        window: Window {
-            size: (700, 300),
-            resizable: true,
-            decorations: true,
-        },
-    })
+    Progress::run(Settings::default())
 }
 
 #[derive(Default)]
@@ -44,14 +35,7 @@ impl Sandbox for Progress {
     fn view(&mut self) -> Element<Message> {
         Column::new()
             .padding(20)
-            .push(
-                ProgressBar::new(0.0..=100.0, self.value)
-                    .background(Background::Color(Color::from_rgb(
-                        0.6, 0.6, 0.6,
-                    )))
-                    .active_color(Color::from_rgb(0.0, 0.95, 0.0))
-                    .height(Length::Units(30)),
-            )
+            .push(ProgressBar::new(0.0..=100.0, self.value))
             .push(Slider::new(
                 &mut self.progress_bar_slider,
                 0.0..=100.0,

examples/stopwatch.rs

@@ -1,7 +1,6 @@
 use iced::{
-    button, Align, Application, Background, Button, Color, Column, Command,
-    Container, Element, HorizontalAlignment, Length, Row, Settings,
-    Subscription, Text,
+    button, Align, Application, Button, Column, Command, Container, Element,
+    HorizontalAlignment, Length, Row, Settings, Subscription, Text,
 };
 use std::time::{Duration, Instant};
 
@@ -98,30 +97,29 @@ impl Application for Stopwatch {
         ))
         .size(40);
 
-        let button = |state, label, color: [f32; 3]| {
+        let button = |state, label, style| {
             Button::new(
                 state,
                 Text::new(label)
-                    .color(Color::WHITE)
                     .horizontal_alignment(HorizontalAlignment::Center),
             )
             .min_width(80)
-            .background(Background::Color(color.into()))
-            .border_radius(10)
             .padding(10)
+            .style(style)
         };
 
         let toggle_button = {
             let (label, color) = match self.state {
-                State::Idle => ("Start", [0.11, 0.42, 0.87]),
-                State::Ticking { .. } => ("Stop", [0.9, 0.4, 0.4]),
+                State::Idle => ("Start", style::Button::Primary),
+                State::Ticking { .. } => ("Stop", style::Button::Destructive),
             };
 
             button(&mut self.toggle, label, color).on_press(Message::Toggle)
         };
 
-        let reset_button = button(&mut self.reset, "Reset", [0.7, 0.7, 0.7])
-            .on_press(Message::Reset);
+        let reset_button =
+            button(&mut self.reset, "Reset", style::Button::Secondary)
+                .on_press(Message::Reset);
 
         let controls = Row::new()
             .spacing(20)
@@ -177,3 +175,29 @@ mod time {
         }
     }
 }
+
+mod style {
+    use iced::{button, Background, Color, Vector};
+
+    pub enum Button {
+        Primary,
+        Secondary,
+        Destructive,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            button::Style {
+                background: Some(Background::Color(match self {
+                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+                    Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
+                    Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2),
+                })),
+                border_radius: 12,
+                shadow_offset: Vector::new(1.0, 1.0),
+                text_color: Color::WHITE,
+                ..button::Style::default()
+            }
+        }
+    }
+}