Add styling support for ComboBox and Menu

graphics/src/lib.rs

@@ -9,18 +9,18 @@
 #![forbid(rust_2018_idioms)]
 #![cfg_attr(docsrs, feature(doc_cfg))]
 mod antialiasing;
-mod overlay;
 mod primitive;
 mod renderer;
 mod transformation;
 mod viewport;
-mod widget;
 
 pub mod backend;
 pub mod defaults;
 pub mod font;
 pub mod layer;
+pub mod overlay;
 pub mod triangle;
+pub mod widget;
 pub mod window;
 
 #[doc(no_inline)]

graphics/src/overlay.rs

@@ -1 +1 @@
-mod menu;
+pub mod menu;

graphics/src/overlay/menu.rs

@@ -1,18 +1,23 @@
 use crate::backend::Backend;
 use crate::{Primitive, Renderer};
 use iced_native::{
-    mouse, overlay, Background, Color, Font, HorizontalAlignment, Point,
-    Rectangle, VerticalAlignment,
+    mouse, overlay, Color, Font, HorizontalAlignment, Point, Rectangle,
+    VerticalAlignment,
 };
 
+pub use iced_style::menu::Style;
+
 impl<B> overlay::menu::Renderer for Renderer<B>
 where
     B: Backend,
 {
+    type Style = Style;
+
     fn decorate(
         &mut self,
         bounds: Rectangle,
         _cursor_position: Point,
+        style: &Style,
         (primitives, mouse_cursor): Self::Output,
     ) -> Self::Output {
         (
@@ -20,11 +25,9 @@ where
                 primitives: vec![
                     Primitive::Quad {
                         bounds,
-                        background: Background::Color(
-                            [0.87, 0.87, 0.87].into(),
-                        ),
-                        border_color: [0.7, 0.7, 0.7].into(),
-                        border_width: 1,
+                        background: style.background,
+                        border_color: style.border_color,
+                        border_width: style.border_width,
                         border_radius: 0,
                     },
                     primitives,
@@ -42,6 +45,7 @@ where
         hovered_option: Option<usize>,
         text_size: u16,
         padding: u16,
+        style: &Style,
     ) -> Self::Output {
         use std::f32;
 
@@ -63,7 +67,7 @@ where
             if is_selected {
                 primitives.push(Primitive::Quad {
                     bounds,
-                    background: Background::Color([0.4, 0.4, 1.0].into()),
+                    background: style.selected_background,
                     border_color: Color::TRANSPARENT,
                     border_width: 0,
                     border_radius: 0,
@@ -81,9 +85,9 @@ where
                 size: f32::from(text_size),
                 font: Font::Default,
                 color: if is_selected {
-                    Color::WHITE
+                    style.selected_text_color
                 } else {
-                    Color::BLACK
+                    style.text_color
                 },
                 horizontal_alignment: HorizontalAlignment::Left,
                 vertical_alignment: VerticalAlignment::Center,

graphics/src/widget/combo_box.rs

@@ -1,18 +1,29 @@
 use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
 use iced_native::{
-    mouse, Background, Color, Font, HorizontalAlignment, Point, Rectangle,
-    VerticalAlignment,
+    mouse, Font, HorizontalAlignment, Point, Rectangle, VerticalAlignment,
 };
+use iced_style::menu;
 
-pub use iced_native::ComboBox;
+pub use iced_native::combo_box::State;
+pub use iced_style::combo_box::{Style, StyleSheet};
+
+/// A widget allowing the selection of a single value from a list of options.
+pub type ComboBox<'a, T, Message, Backend> =
+    iced_native::ComboBox<'a, T, Message, Renderer<Backend>>;
 
 impl<B> iced_native::combo_box::Renderer for Renderer<B>
 where
     B: Backend + backend::Text,
 {
+    type Style = Box<dyn StyleSheet>;
+
     const DEFAULT_PADDING: u16 = 5;
 
+    fn menu_style(style: &Box<dyn StyleSheet>) -> menu::Style {
+        style.menu()
+    }
+
     fn draw(
         &mut self,
         bounds: Rectangle,
@@ -20,31 +31,34 @@ where
         selected: Option<String>,
         text_size: u16,
         padding: u16,
+        style: &Box<dyn StyleSheet>,
     ) -> Self::Output {
         let is_mouse_over = bounds.contains(cursor_position);
 
+        let style = if is_mouse_over {
+            style.hovered()
+        } else {
+            style.active()
+        };
+
         let background = Primitive::Quad {
             bounds,
-            background: Background::Color([0.87, 0.87, 0.87].into()),
-            border_color: if is_mouse_over {
-                Color::BLACK
-            } else {
-                [0.7, 0.7, 0.7].into()
-            },
-            border_width: 1,
-            border_radius: 0,
+            background: style.background,
+            border_color: style.border_color,
+            border_width: style.border_width,
+            border_radius: style.border_radius,
         };
 
         let arrow_down = Primitive::Text {
             content: B::ARROW_DOWN_ICON.to_string(),
             font: B::ICON_FONT,
-            size: bounds.height * 0.7,
+            size: bounds.height * style.icon_size,
             bounds: Rectangle {
                 x: bounds.x + bounds.width - f32::from(padding) * 2.0,
                 y: bounds.center_y(),
                 ..bounds
             },
-            color: Color::BLACK,
+            color: style.text_color,
             horizontal_alignment: HorizontalAlignment::Right,
             vertical_alignment: VerticalAlignment::Center,
         };
@@ -56,7 +70,7 @@ where
                         content: label,
                         size: f32::from(text_size),
                         font: Font::Default,
-                        color: Color::BLACK,
+                        color: style.text_color,
                         bounds: Rectangle {
                             x: bounds.x + f32::from(padding),
                             y: bounds.center_y(),