1 files changed, 47 insertions, 16 deletions

diff --git a/web/src/widget/checkbox.rs b/web/src/widget/checkbox.rs
index b81a0d52..0657ccfb 100644
--- a/web/src/widget/checkbox.rs
+++ b/web/src/widget/checkbox.rs
@@ -1,6 +1,10 @@
-use crate::{style, Bus, Color, Element, Widget};
+//! Show toggle controls using checkboxes.
+use crate::{css, Bus, Css, Element, Length, Widget};
+
+pub use iced_style::checkbox::{Style, StyleSheet};
 
 use dodrio::bumpalo;
+use std::rc::Rc;
 
 /// A box that can be checked.
 ///
@@ -22,9 +26,10 @@ use dodrio::bumpalo;
 #[allow(missing_debug_implementations)]
 pub struct Checkbox<Message> {
     is_checked: bool,
-    on_toggle: Box<dyn Fn(bool) -> Message>,
+    on_toggle: Rc<dyn Fn(bool) -> Message>,
     label: String,
-    label_color: Option<Color>,
+    width: Length,
+    style: Box<dyn StyleSheet>,
 }
 
 impl<Message> Checkbox<Message> {
@@ -44,51 +49,77 @@ impl<Message> Checkbox<Message> {
     {
         Checkbox {
             is_checked,
-            on_toggle: Box::new(f),
+            on_toggle: Rc::new(f),
             label: String::from(label),
-            label_color: None,
+            width: Length::Shrink,
+            style: Default::default(),
         }
     }
 
-    /// Sets the color of the label of the [`Checkbox`].
+    /// Sets the width of the [`Checkbox`].
+    ///
+    /// [`Checkbox`]: struct.Checkbox.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the style of the [`Checkbox`].
     ///
     /// [`Checkbox`]: struct.Checkbox.html
-    pub fn label_color<C: Into<Color>>(mut self, color: C) -> Self {
-        self.label_color = Some(color.into());
+    pub fn style(mut self, style: impl Into<Box<dyn StyleSheet>>) -> Self {
+        self.style = style.into();
         self
     }
 }
 
 impl<Message> Widget<Message> for Checkbox<Message>
 where
-    Message: 'static + Clone,
+    Message: 'static,
 {
     fn node<'b>(
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
-        _style_sheet: &mut style::Sheet<'b>,
+        style_sheet: &mut Css<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
         let checkbox_label = bumpalo::format!(in bump, "{}", self.label);
 
         let event_bus = bus.clone();
-        let msg = (self.on_toggle)(!self.is_checked);
+        let on_toggle = self.on_toggle.clone();
+        let is_checked = self.is_checked;
+
+        let row_class = style_sheet.insert(bump, css::Rule::Row);
+
+        let spacing_class = style_sheet.insert(bump, css::Rule::Spacing(5));
 
-        // TODO: Complete styling
         label(bump)
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{} {}", row_class, spacing_class)
+                    .into_bump_str(),
+            )
+            .attr(
+                "style",
+                bumpalo::format!(in bump, "width: {}; align-items: center", css::length(self.width))
+                    .into_bump_str(),
+            )
             .children(vec![
+                // TODO: Checkbox styling
                 input(bump)
                     .attr("type", "checkbox")
                     .bool_attr("checked", self.is_checked)
-                    .on("click", move |root, vdom, _event| {
-                        event_bus.publish(msg.clone(), root);
+                    .on("click", move |_root, vdom, _event| {
+                        let msg = on_toggle(!is_checked);
+                        event_bus.publish(msg);
 
                         vdom.schedule_render();
                     })
                     .finish(),
-                text(checkbox_label.into_bump_str()),
+                span(bump).children(vec![
+                text(checkbox_label.into_bump_str())]).finish(),
             ])
             .finish()
     }
@@ -96,7 +127,7 @@ where
 
 impl<'a, Message> From<Checkbox<Message>> for Element<'a, Message>
 where
-    Message: 'static + Clone,
+    Message: 'static,
 {
     fn from(checkbox: Checkbox<Message>) -> Element<'a, Message> {
         Element::new(checkbox)