Styled toggle button

bugadani · Aug 23, 2021 · 600bddf · 600bddf
1 parent 543ba4b
commit 600bddf
Show file tree

Hide file tree

Showing 3 changed files with 411 additions and 0 deletions.
diff --git a/backend-embedded-graphics/src/themes/basic/mod.rs b/backend-embedded-graphics/src/themes/basic/mod.rs
@@ -2,12 +2,17 @@
 
 pub mod button;
 pub mod label;
+pub mod toggle_button;
 
 use crate::themes::basic::{
     button::{
         styled_button, styled_button_stretched, ButtonStyle, StyledButton, StyledButtonStretched,
     },
     label::{styled_label, LabelStyle, StyledLabel},
+    toggle_button::{
+        styled_toggle_button, styled_toggle_button_stretched, StyledToggleButton,
+        StyledToggleButtonStretched, ToggleButtonStyle,
+    },
 };
 use embedded_graphics::prelude::PixelColor;
 
@@ -17,6 +22,7 @@ pub trait BasicTheme: Sized {
     type LabelStyle: LabelStyle<Self::PixelColor>;
     type PrimaryButton: ButtonStyle<Self::PixelColor>;
     type SecondaryButton: ButtonStyle<Self::PixelColor>;
+    type ToggleButton: ToggleButtonStyle<Self::PixelColor>;
 
     fn label<S: AsRef<str>>(label: S) -> StyledLabel<S, Self::PixelColor> {
         styled_label::<Self, Self::LabelStyle, _>(label)
@@ -37,6 +43,16 @@ pub trait BasicTheme: Sized {
     fn secondary_button_stretched(label: &'static str) -> StyledButtonStretched<Self::PixelColor> {
         styled_button_stretched::<Self, Self::SecondaryButton>(label)
     }
+
+    fn toggle_button(label: &'static str) -> StyledToggleButton<Self::PixelColor> {
+        styled_toggle_button::<Self, Self::ToggleButton>(label)
+    }
+
+    fn toggle_button_stretched(
+        label: &'static str,
+    ) -> StyledToggleButtonStretched<Self::PixelColor> {
+        styled_toggle_button_stretched::<Self, Self::ToggleButton>(label)
+    }
 }
 
 /// This macro is used to define the theme structure.
@@ -51,6 +67,7 @@ macro_rules! impl_theme {
                     $theme_module::$color_mod::SecondaryButton,
                 },
                 label::$theme_module::$color_mod::Label,
+                toggle_button::$theme_module::$color_mod::ToggleButton,
                 BasicTheme,
             };
 
@@ -61,6 +78,7 @@ macro_rules! impl_theme {
                 type LabelStyle = Label;
                 type PrimaryButton = PrimaryButton;
                 type SecondaryButton = SecondaryButton;
+                type ToggleButton = ToggleButton;
             }
         }
     };

diff --git a/backend-embedded-graphics/src/themes/basic/toggle_button/light.rs b/backend-embedded-graphics/src/themes/basic/toggle_button/light.rs
@@ -0,0 +1,109 @@
+//! Light theme for toggle buttons.
+
+use crate::toggle_button_style_rgb;
+
+pub mod binary_color {
+    use crate::toggle_button_style;
+    use embedded_graphics::{
+        mono_font::{ascii::FONT_6X10, MonoFont},
+        pixelcolor::BinaryColor,
+    };
+
+    toggle_button_style!(
+        ToggleButton<BinaryColor, FONT_6X10> {
+            Unchecked {
+                Inactive {
+                    label: Off,
+                    border: On,
+                    background: On,
+                },
+                Idle {
+                    label: Off,
+                    border: On,
+                    background: On,
+                },
+                Hovered {
+                    label: On,
+                    border: On,
+                    background: Off,
+                },
+                Pressed {
+                    label: Off,
+                    border: On,
+                    background: On,
+                }
+            },
+            Checked {
+                Inactive {
+                    label: Off,
+                    border: On,
+                    background: On,
+                },
+                Idle {
+                    label: Off,
+                    border: On,
+                    background: On,
+                },
+                Hovered {
+                    label: On,
+                    border: On,
+                    background: Off,
+                },
+                Pressed {
+                    label: Off,
+                    border: On,
+                    background: On,
+                }
+            }
+        }
+    );
+}
+
+toggle_button_style_rgb!(
+    ToggleButton<FONT_6X10> {
+        Unchecked {
+            Inactive {
+                label: CSS_LIGHT_GRAY,
+                border: CSS_DIM_GRAY,
+                background: CSS_DIM_GRAY,
+            },
+            Idle {
+                label: WHITE,
+                border: CSS_STEEL_BLUE,
+                background: CSS_STEEL_BLUE,
+            },
+            Hovered {
+                label: WHITE,
+                border: CSS_DODGER_BLUE,
+                background: CSS_DODGER_BLUE,
+            },
+            Pressed {
+                label: WHITE,
+                border: CSS_LIGHT_STEEL_BLUE,
+                background: CSS_LIGHT_STEEL_BLUE,
+            }
+        },
+        Checked {
+            Inactive {
+                label: CSS_LIGHT_GRAY,
+                border: CSS_DIM_GRAY,
+                background: CSS_DIM_GRAY,
+            },
+            Idle {
+                label: WHITE,
+                border: CSS_STEEL_BLUE,
+                background: CSS_STEEL_BLUE,
+            },
+            Hovered {
+                label: WHITE,
+                border: CSS_DODGER_BLUE,
+                background: CSS_DODGER_BLUE,
+            },
+            Pressed {
+                label: WHITE,
+                border: CSS_LIGHT_STEEL_BLUE,
+                background: CSS_LIGHT_STEEL_BLUE,
+            }
+        }
+    }
+);