QR Code Styling

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `hovered` styling for `Svg` widget. [#2163](https://github.com/iced-rs/iced/pull/2163)
 - `height` method for `TextEditor`. [#2221](https://github.com/iced-rs/iced/pull/2221)
 - Customizable style for `TextEditor`. [#2159](https://github.com/iced-rs/iced/pull/2159)
+- Customizable style for `QRCode`. [#2229](https://github.com/iced-rs/iced/pull/2229)
 - Border width styling for `Toggler`. [#2219](https://github.com/iced-rs/iced/pull/2219)
 - `RawText` variant for `Primitive` in `iced_graphics`. [#2158](https://github.com/iced-rs/iced/pull/2158)
 - `Stream` support for `Command`. [#2150](https://github.com/iced-rs/iced/pull/2150)
@@ -116,6 +117,7 @@ Many thanks to...
 - @Calastrophe
 - @casperstorm
 - @cfrenette
+- @clarkmoody
 - @Davidster
 - @Decodetalkers
 - @derezzedex

examples/qr_code/src/main.rs

@@ -1,6 +1,6 @@
 use iced::widget::qr_code::{self, QRCode};
-use iced::widget::{column, container, text, text_input};
-use iced::{Alignment, Color, Element, Length, Sandbox, Settings};
+use iced::widget::{column, container, pick_list, row, text, text_input};
+use iced::{Alignment, Element, Length, Sandbox, Settings, Theme};
 
 pub fn main() -> iced::Result {
     QRGenerator::run(Settings::default())
@@ -9,12 +9,14 @@ pub fn main() -> iced::Result {
 #[derive(Default)]
 struct QRGenerator {
     data: String,
-    qr_code: Option<qr_code::State>,
+    qr_code: Option<qr_code::Data>,
+    theme: Theme,
 }
 
 #[derive(Debug, Clone)]
 enum Message {
     DataChanged(String),
+    ThemeChanged(Theme),
 }
 
 impl Sandbox for QRGenerator {
@@ -36,26 +38,38 @@ impl Sandbox for QRGenerator {
                 self.qr_code = if data.is_empty() {
                     None
                 } else {
-                    qr_code::State::new(&data).ok()
+                    qr_code::Data::new(&data).ok()
                 };
 
                 self.data = data;
             }
+            Message::ThemeChanged(theme) => {
+                self.theme = theme;
+            }
         }
     }
 
     fn view(&self) -> Element<Message> {
-        let title = text("QR Code Generator")
-            .size(70)
-            .style(Color::from([0.5, 0.5, 0.5]));
+        let title = text("QR Code Generator").size(70);
 
         let input =
             text_input("Type the data of your QR code here...", &self.data)
                 .on_input(Message::DataChanged)
                 .size(30)
                 .padding(15);
 
-        let mut content = column![title, input]
+        let choose_theme = row![
+            text("Theme:"),
+            pick_list(
+                Theme::ALL,
+                Some(self.theme.clone()),
+                Message::ThemeChanged,
+            )
+        ]
+        .spacing(10)
+        .align_items(Alignment::Center);
+
+        let mut content = column![title, input, choose_theme]
             .width(700)
             .spacing(20)
             .align_items(Alignment::Center);
@@ -72,4 +86,8 @@ impl Sandbox for QRGenerator {
             .center_y()
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        self.theme.clone()
+    }
 }

style/src/lib.rs

@@ -24,6 +24,7 @@ pub mod menu;
 pub mod pane_grid;
 pub mod pick_list;
 pub mod progress_bar;
+pub mod qr_code;
 pub mod radio;
 pub mod rule;
 pub mod scrollable;

style/src/qr_code.rs

@@ -0,0 +1,20 @@
+//! Change the appearance of a QR code.
+use crate::core::Color;
+
+/// The appearance of a QR code.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Appearance {
+    /// The color of the QR code data cells
+    pub cell: Color,
+    /// The color of the QR code background
+    pub background: Color,
+}
+
+/// A set of rules that dictate the style of a QR code.
+pub trait StyleSheet {
+    /// The supported style of the [`StyleSheet`].
+    type Style: Default;
+
+    /// Produces the style of a QR code.
+    fn appearance(&self, style: &Self::Style) -> Appearance;
+}

style/src/theme.rs

@@ -12,6 +12,7 @@ use crate::menu;
 use crate::pane_grid;
 use crate::pick_list;
 use crate::progress_bar;
+use crate::qr_code;
 use crate::radio;
 use crate::rule;
 use crate::scrollable;
@@ -956,6 +957,46 @@ impl<T: Fn(&Theme) -> progress_bar::Appearance> progress_bar::StyleSheet for T {
     }
 }
 
+/// The style of a QR Code.
+#[derive(Default)]
+pub enum QRCode {
+    /// The default style.
+    #[default]
+    Default,
+    /// A custom style.
+    Custom(Box<dyn qr_code::StyleSheet<Style = Theme>>),
+}
+
+impl<T: Fn(&Theme) -> qr_code::Appearance + 'static> From<T> for QRCode {
+    fn from(f: T) -> Self {
+        Self::Custom(Box::new(f))
+    }
+}
+
+impl qr_code::StyleSheet for Theme {
+    type Style = QRCode;
+
+    fn appearance(&self, style: &Self::Style) -> qr_code::Appearance {
+        let palette = self.palette();
+
+        match style {
+            QRCode::Default => qr_code::Appearance {
+                cell: palette.text,
+                background: palette.background,
+            },
+            QRCode::Custom(custom) => custom.appearance(self),
+        }
+    }
+}
+
+impl<T: Fn(&Theme) -> qr_code::Appearance> qr_code::StyleSheet for T {
+    type Style = Theme;
+
+    fn appearance(&self, style: &Self::Style) -> qr_code::Appearance {
+        (self)(style)
+    }
+}
+
 /// The style of a rule.
 #[derive(Default)]
 pub enum Rule {