[yew-devel] [PATCH yew-widget-toolkit v2 09/12] touch: fab: add size option

[Dominik Csapak <d.csapak@proxmox.com>]

While this can be configured with classes (and the large/small method).
It's more ergonomic to have it directly as an enum, especially when
we'll want to pass that through in the FabMenu also.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab.rs | 37 +++++++++++++++++++++++++++++++++++--
 src/touch/mod.rs |  2 +-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/touch/fab.rs b/src/touch/fab.rs
index 72637c7..2ae1551 100644
--- a/src/touch/fab.rs
+++ b/src/touch/fab.rs
@@ -7,6 +7,14 @@ use yew::virtual_dom::{Key, VComp, VNode};
 use crate::props::{AsClassesMut, WidgetBuilder};
 use crate::widget::Button;
 
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum FabSize {
+    Small,
+    #[default]
+    Standard,
+    Large,
+}
+
 /// Favorite action button.
 #[derive(Properties, Clone, PartialEq)]
 pub struct Fab {
@@ -14,6 +22,10 @@ pub struct Fab {
     #[prop_or_default]
     pub key: Option<Key>,
 
+    /// The size of the FAB
+    #[prop_or_default]
+    pub size: FabSize,
+
     /// Icon (CSS class).
     pub icon_class: Classes,
 
@@ -83,16 +95,27 @@ impl Fab {
 
     /// Builder style method to add the "pwt-fab-small" class
     pub fn small(mut self) -> Self {
-        self.add_class("pwt-fab-small");
+        self.size = FabSize::Small;
         self
     }
 
     /// Builder style method to add the "pwt-fab-large" class
     pub fn large(mut self) -> Self {
-        self.add_class("pwt-fab-large");
+        self.size = FabSize::Large;
+        self
+    }
+
+    /// Builder method to set the FAB size.
+    pub fn size(mut self, size: FabSize) -> Self {
+        self.set_size(size);
         self
     }
 
+    /// Method to set the FAB size.
+    pub fn set_size(&mut self, size: FabSize) {
+        self.size = size;
+    }
+
     /// Builder style method to set the button text
     pub fn text(mut self, text: impl IntoPropValue<Option<AttrValue>>) -> Self {
         self.set_text(text);
@@ -131,6 +154,16 @@ impl Component for PwtFab {
         let mut class = props.class.clone();
         class.push("pwt-fab");
 
+        match props.size {
+            FabSize::Small => {
+                class.push("pwt-fab-small");
+            }
+            FabSize::Standard => {}
+            FabSize::Large => {
+                class.push("pwt-fab-large");
+            }
+        }
+
         let button = match &props.text {
             Some(text) => Button::new(text)
                 .icon_class(icon_class)
diff --git a/src/touch/mod.rs b/src/touch/mod.rs
index 87fcc85..f559689 100644
--- a/src/touch/mod.rs
+++ b/src/touch/mod.rs
@@ -8,7 +8,7 @@ mod gesture_detector;
 pub use gesture_detector::{GestureDetector, GestureSwipeEvent, InputEvent, PwtGestureDetector};
 
 mod fab;
-pub use fab::{Fab, PwtFab};
+pub use fab::{Fab, FabSize, PwtFab};
 
 mod fab_menu;
 pub use fab_menu::{FabMenu, FabMenuAlign, FabMenuDirection, PwtFabMenu};
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel