diff --git a/polybius-web/src/components/form.rs b/polybius-web/src/components/form.rs index ca3d7f1..f21abd5 100644 --- a/polybius-web/src/components/form.rs +++ b/polybius-web/src/components/form.rs @@ -2,7 +2,9 @@ use polybius_lib::user_data::{NumType, Number}; use web_sys::{console, HtmlInputElement}; use yew::prelude::*; -use crate::components::{input_numeric::InputNumeric, input_string::InputString}; +use crate::components::{ + input_numeric::InputNumeric, input_string::InputString, list_tile_switch::ListTileSwitch, +}; pub enum Msg { AddNumericInput, @@ -10,11 +12,15 @@ pub enum Msg { UpdateNumericValueInput(usize, u16), UpdateNumericTypeInput(usize, NumType), UpdateStringInput(usize, String), + FlipAddYear, + FlipAddSymbols, } pub struct FormComponent { pub numeric_values: Vec, pub string_values: Vec, + pub add_year: bool, + pub add_symbols: bool, } impl Component for FormComponent { @@ -25,6 +31,8 @@ impl Component for FormComponent { Self { numeric_values: vec![], string_values: vec![], + add_year: false, + add_symbols: true, } } @@ -47,6 +55,12 @@ impl Component for FormComponent { Msg::UpdateStringInput(index, value) => { self.string_values[index] = value; } + Msg::FlipAddYear => { + self.add_year = !self.add_year; + } + Msg::FlipAddSymbols => { + self.add_symbols = !self.add_symbols; + } } true } @@ -108,6 +122,8 @@ impl Component for FormComponent { + +
@@ -123,6 +139,8 @@ impl Component for FormComponent { + +
diff --git a/polybius-web/src/components/list_tile_switch.rs b/polybius-web/src/components/list_tile_switch.rs new file mode 100644 index 0000000..da24f8c --- /dev/null +++ b/polybius-web/src/components/list_tile_switch.rs @@ -0,0 +1,55 @@ +use yew::prelude::*; + +#[derive(Clone, PartialEq, Properties)] +pub struct ListTileSwitchProps { + pub title: AttrValue, + #[prop_or_default] + pub subtitle: Option, + pub checked: bool, + pub onclick: Callback, +} + +#[function_component] +pub fn ListTileSwitch(props: &ListTileSwitchProps) -> Html { + // Button clases + + let color_classes = if props.checked { + classes!("bg-primary-500") + } else { + classes!("bg-gray-300", "dark:bg-gray-700/50") + }; + + let mut button_classes = classes!(String::from("relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2")); + + button_classes.extend(color_classes); + + // Toggle classes + + let position_classes = if props.checked { + classes!("translate-x-5") + } else { + classes!("translate-x-0") + }; + + let mut toggle_classes = classes!(String::from("pointer-events-none inline-block h-5 w-5 rounded-full bg-primary-50 shadow ring-0 transition duration-200 ease-in-out")); + + toggle_classes.extend(position_classes); + + html! { +
+ + + {props.title.clone()} + + if let Some(subtitle) = &props.subtitle { + + {subtitle.clone()} + + } + + +
+ } +} diff --git a/polybius-web/src/components/mod.rs b/polybius-web/src/components/mod.rs index 137fe90..3d63591 100644 --- a/polybius-web/src/components/mod.rs +++ b/polybius-web/src/components/mod.rs @@ -1,4 +1,5 @@ pub mod form; pub mod input_numeric; pub mod input_string; +pub mod list_tile_switch; pub mod navbar;