feat(widget): Add SpinButtonModel

Enables convenient handling of spin messages, and specifying steppings, minimum, and maximum values

examples/cosmic/src/window.rs

@@ -10,7 +10,7 @@ use cosmic::{
     iced_lazy::responsive,
     iced_winit::window::{drag, toggle_maximize, minimize},
     theme::{self, Theme},
-    widget::{button, nav_button, nav_bar, nav_bar_page, nav_bar_section, header_bar, settings, scrollable, toggler, spin_button},
+    widget::{button, nav_button, nav_bar, nav_bar_page, nav_bar_section, header_bar, settings, scrollable, toggler, SpinButtonModel, SpinMessage},
     Element,
     ElementExt,
 };
@@ -24,7 +24,7 @@ pub struct Window {
     debug: bool,
     theme: Theme,
     slider_value: f32,
-    spin_value: i32,
+    spin_button: SpinButtonModel<i32>,
     checkbox_value: bool,
     toggler_value: bool,
     pick_list_selected: Option<&'static str>,
@@ -72,12 +72,6 @@ pub enum Message {
     SpinButton(SpinMessage)
 }
 
-#[derive(Clone, Copy, Debug, Hash)]
-pub enum SpinMessage {
-    Increment,
-    Decrement,
-}
-
 impl Application for Window {
     type Executor = iced::executor::Default;
     type Flags = ();
@@ -93,6 +87,8 @@ impl Application for Window {
         //        window.theme = Theme::Light;
         window.pick_list_selected = Some("Option 1");
         window.title = String::from("COSMIC Design System - Iced");
+        window.spin_button.min = -10;
+        window.spin_button.max = 10;
         (window, Command::none())
     }
 
@@ -119,8 +115,7 @@ impl Application for Window {
             Message::Maximize => return toggle_maximize(window::Id::new(0)),
             Message::RowSelected(row) => println!("Selected row {row}"),
             Message::InputChanged => {},
-            Message::SpinButton(SpinMessage::Decrement) => self.spin_value -= 1,
+            Message::SpinButton(msg) => self.spin_button.update(msg),
-            Message::SpinButton(SpinMessage::Increment) => self.spin_value += 1,
 
         }
 
@@ -304,10 +299,8 @@ impl Application for Window {
                         checkbox("Checkbox", self.checkbox_value, Message::CheckboxToggled).into()
                     ]))
                     .add(settings::item(
-                        "Spin Button",
+                        format!("Spin Button (Range {}:{})", self.spin_button.min, self.spin_button.max),
-                        spin_button(self.spin_value, SpinMessage::Increment, SpinMessage::Decrement)
+                        self.spin_button.view().map(Message::SpinButton)
-                            .into_element()
-                            .map(Message::SpinButton)
                     ))
                     .into()
             ])

src/widget/settings/item.rs

@@ -6,11 +6,14 @@ use crate::{Element, Renderer};
 /// A setting within a settings view section.
 #[must_use]
 #[allow(clippy::module_name_repetitions)]
-pub fn item<'a, Message: 'static>(title: &'a str, widget: impl Into<Element<'a, Message>>) -> iced::widget::Row<'a, Message, Renderer> {
+pub fn item<'a, Message: 'static>(
+    title: impl ToString,
+    widget: impl Into<Element<'a, Message>>,
+) -> iced::widget::Row<'a, Message, Renderer> {
     item_row(vec![
         iced::widget::text(title).into(),
         iced::widget::horizontal_space(iced::Length::Fill).into(),
-        widget.into()
+        widget.into(),
     ])
 }
 
@@ -23,4 +26,3 @@ pub fn item_row<Message>(children: Vec<Element<Message>>) -> iced::widget::Row<M
         .padding([0, 8])
         .spacing(12)
 }
-

src/widget/settings/mod.rs

@@ -5,10 +5,10 @@ mod item;
 mod section;
 
 pub use self::item::{item, item_row};
-pub use self::section::{Section, view_section};
+pub use self::section::{view_section, Section};
 
 use crate::{Element, Renderer};
-use iced::widget::{Column, column};
+use iced::widget::{column, Column};
 
 /// A column with a predefined style for creating a settings panel
 #[must_use]

src/widget/settings/section.rs

@@ -1,21 +1,23 @@
 // Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
-use crate::{Element};
+use crate::widget::ListColumn;
-use crate::widget::{ListColumn};
+use crate::Element;
 use iced::widget::{column, text};
+use std::borrow::Cow;
 
 /// A section within a settings view column.
 #[must_use]
-pub fn view_section<Message: 'static>(
+pub fn view_section<'a, Message: 'static>(title: impl Into<Cow<'a, str>>) -> Section<'a, Message> {
-    title: &str,
+    Section {
-) -> Section<Message> {
+        title: title.into(),
-    Section { title, children: ListColumn::default() }
+        children: ListColumn::default(),
+    }
 }
 
 pub struct Section<'a, Message> {
-    title: &'a str,
+    title: Cow<'a, str>,
-    children: ListColumn<'a, Message>
+    children: ListColumn<'a, Message>,
 }
 
 impl<'a, Message: 'static> Section<'a, Message> {
@@ -28,12 +30,10 @@ impl<'a, Message: 'static> Section<'a, Message> {
 
 impl<'a, Message: 'static> From<Section<'a, Message>> for Element<'a, Message> {
     fn from(data: Section<'a, Message>) -> Self {
-        let title = text(data.title)
+        let title = text(data.title).font(crate::font::FONT_SEMIBOLD).into();
-            .font(crate::font::FONT_SEMIBOLD)
-            .into();
 
         column(vec![title, data.children.into_element()])
             .spacing(8)
             .into()
     }
-}
+}

src/widget/spin_button.rs

@@ -1,103 +0,0 @@
-// Copyright 2022 System76 <info@system76.com>
-// SPDX-License-Identifier: MPL-2.0
-
-use std::{hash::{Hash, Hasher}, collections::hash_map::DefaultHasher};
-
-use crate::{theme, Element};
-use iced::{
-    alignment::{Horizontal, Vertical},
-    widget::{button, container, row, text},
-    Alignment, Background, Length,
-};
-
-pub fn spin_button<T, Message>(value: T, on_increment: Message, on_decrement: Message) -> SpinButton<T, Message>
-where T: 'static + Clone + Hash + ToString,
-    Message: 'static + Clone + Hash
-{
-    SpinButton::new(value, on_increment, on_decrement)
-}
-
-#[derive(Hash)]
-pub struct SpinButton<T, Message> {
-    on_increment: Message,
-    on_decrement: Message,
-    value: T,
-}
-
-impl<T, Message: 'static + Clone + Hash> SpinButton<T, Message>
-where T: 'static + Clone + Hash + ToString,
-    Message: 'static + Clone + Hash
-{
-    pub fn new(value: T, on_increment: Message, on_decrement: Message) -> Self {
-        Self { on_increment, on_decrement, value }
-    }
-
-    pub fn into_element(self) -> Element<'static, Message> {
-        let mut hasher = DefaultHasher::new();
-        self.hash(&mut hasher);
-
-        iced_lazy::lazy(hasher.finish(), move || -> Element<'static, Message> {
-            container(
-                row![
-                    button(
-                        container(text("-").size(26).vertical_alignment(Vertical::Center))
-                            .width(Length::Fill)
-                            .height(Length::Fill)
-                            .align_x(Horizontal::Center)
-                            .align_y(Vertical::Center),
-                    )
-                    .width(Length::Fill)
-                    .height(Length::Fill)
-                    .style(theme::Button::Text)
-                    .on_press(self.on_decrement.clone()),
-                    container(text(self.value.clone()).vertical_alignment(Vertical::Center))
-                        .width(Length::Fill)
-                        .height(Length::Fill)
-                        .align_x(Horizontal::Center)
-                        .align_y(Vertical::Center),
-                    button(
-                        container(text("+").size(26).vertical_alignment(Vertical::Center))
-                            .width(Length::Fill)
-                            .height(Length::Fill)
-                            .align_x(Horizontal::Center)
-                            .align_y(Vertical::Center),
-                    )
-                    .width(Length::Fill)
-                    .height(Length::Fill)
-                    .style(theme::Button::Text)
-                    .on_press(self.on_increment.clone()),
-                ]
-                .width(Length::Fill)
-                .height(Length::Units(32))
-                .align_items(Alignment::Center),
-            )
-            .padding([4, 4])
-            .align_y(Vertical::Center)
-            .width(Length::Units(95))
-            .height(Length::Units(32))
-            .style(theme::Container::Custom(container_style))
-            .into()
-        }).into()
-    }
-}
-
-impl<'a, T, Message> From<SpinButton<T, Message>> for Element<'a, Message>
-where T: 'static + Clone + Hash + ToString,
-    Message: 'static + Clone + Hash
-{
-    fn from(spin_button: SpinButton<T, Message>) -> Self {
-        spin_button.into_element()
-    }
-}
-
-fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance {
-    let secondary = &theme.cosmic().secondary;
-    let accent = &theme.cosmic().accent;
-    iced_style::container::Appearance {
-        text_color: None,
-        background: Some(Background::Color(secondary.component.base.into())),
-        border_radius: 24.0,
-        border_width: 0.0,
-        border_color: accent.base.into(),
-    }
-}

src/widget/spin_button/mod.rs

@@ -0,0 +1,101 @@
+// Copyright 2022 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+mod model;
+pub use self::model::SpinButtonModel;
+
+use crate::{theme, Element};
+use iced::{
+    alignment::{Horizontal, Vertical},
+    widget::{button, container, row, text},
+    Alignment, Background, Length,
+};
+use std::hash::Hash;
+
+pub struct SpinButton<T> {
+    value: T,
+}
+
+/// A message emitted by the [`SpinButton`] widget.
+#[derive(Clone, Copy, Debug, Hash)]
+pub enum SpinMessage {
+    Increment,
+    Decrement,
+}
+
+pub fn spin_button<T: 'static + Clone + Hash + ToString>(value: T) -> SpinButton<T> {
+    SpinButton::new(value)
+}
+
+impl<T: 'static + Clone + Hash + ToString> SpinButton<T> {
+    pub fn new(value: T) -> Self {
+        Self { value }
+    }
+
+    pub fn into_element(self) -> Element<'static, SpinMessage> {
+        let Self { value } = self;
+        Element::from(iced_lazy::lazy(
+            value.clone(),
+            move || -> Element<'static, SpinMessage> {
+                container(
+                    row![
+                        button(
+                            container(text("-").size(26).vertical_alignment(Vertical::Center))
+                                .width(Length::Fill)
+                                .height(Length::Fill)
+                                .align_x(Horizontal::Center)
+                                .align_y(Vertical::Center),
+                        )
+                        .width(Length::Fill)
+                        .height(Length::Fill)
+                        .style(theme::Button::Text)
+                        .on_press(SpinMessage::Decrement),
+                        container(text(value.clone()).vertical_alignment(Vertical::Center))
+                            .width(Length::Fill)
+                            .height(Length::Fill)
+                            .align_x(Horizontal::Center)
+                            .align_y(Vertical::Center),
+                        button(
+                            container(text("+").size(26).vertical_alignment(Vertical::Center))
+                                .width(Length::Fill)
+                                .height(Length::Fill)
+                                .align_x(Horizontal::Center)
+                                .align_y(Vertical::Center),
+                        )
+                        .width(Length::Fill)
+                        .height(Length::Fill)
+                        .style(theme::Button::Text)
+                        .on_press(SpinMessage::Increment),
+                    ]
+                    .width(Length::Fill)
+                    .height(Length::Units(32))
+                    .align_items(Alignment::Center),
+                )
+                .padding([4, 4])
+                .align_y(Vertical::Center)
+                .width(Length::Units(95))
+                .height(Length::Units(32))
+                .style(theme::Container::Custom(container_style))
+                .into()
+            },
+        ))
+    }
+}
+
+impl<'a, T: 'static + Clone + Hash + ToString> From<SpinButton<T>> for Element<'a, SpinMessage> {
+    fn from(spin_button: SpinButton<T>) -> Self {
+        spin_button.into_element()
+    }
+}
+
+fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance {
+    let secondary = &theme.cosmic().secondary;
+    let accent = &theme.cosmic().accent;
+    iced_style::container::Appearance {
+        text_color: None,
+        background: Some(Background::Color(secondary.component.base.into())),
+        border_radius: 24.0,
+        border_width: 0.0,
+        border_color: accent.base.into(),
+    }
+}

src/widget/spin_button/model.rs

@@ -0,0 +1,150 @@
+// Copyright 2022 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+use super::{SpinButton, SpinMessage};
+use crate::Element;
+use derive_setters::Setters;
+use std::hash::Hash;
+use std::ops::{Add, Sub};
+
+#[derive(Setters)]
+pub struct SpinButtonModel<T> {
+    /// The current value of the spin button.
+    pub value: T,
+    /// The amount to increment the value.
+    pub step: T,
+    /// The minimum value permitted.
+    pub min: T,
+    /// The maximum value permitted.
+    pub max: T,
+}
+
+impl<T: 'static> SpinButtonModel<T>
+where
+    T: Copy + Hash + ToString + Sub<Output = T> + Add<Output = T> + Ord,
+{
+    pub fn view(&self) -> Element<'static, SpinMessage> {
+        SpinButton::new(self.value).into_element()
+    }
+
+    pub fn update(&mut self, message: SpinMessage) {
+        self.value = match message {
+            SpinMessage::Increment => {
+                std::cmp::min(std::cmp::max(self.value + self.step, self.min), self.max)
+            }
+            SpinMessage::Decrement => {
+                std::cmp::max(std::cmp::min(self.value - self.step, self.max), self.min)
+            }
+        }
+    }
+}
+
+impl Default for SpinButtonModel<i8> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: i8::MIN,
+            max: i8::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<i16> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: i16::MIN,
+            max: i16::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<i32> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: i32::MIN,
+            max: i32::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<isize> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: isize::MIN,
+            max: isize::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<u8> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: u8::MIN,
+            max: u8::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<u16> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: u16::MIN,
+            max: u16::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<u32> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: u32::MIN,
+            max: u32::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<usize> {
+    fn default() -> Self {
+        Self {
+            value: 0,
+            step: 1,
+            min: usize::MIN,
+            max: usize::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<f32> {
+    fn default() -> Self {
+        Self {
+            value: 0.0,
+            step: 1.0,
+            min: f32::MIN,
+            max: f32::MAX,
+        }
+    }
+}
+
+impl Default for SpinButtonModel<f64> {
+    fn default() -> Self {
+        Self {
+            value: 0.0,
+            step: 1.0,
+            min: f64::MIN,
+            max: f64::MAX,
+        }
+    }
+}