[yew-devel] [PATCH yew-widget-toolkit v2 12/12] touch: fab menu: rework fab menu
Dominik Csapak
d.csapak at proxmox.com
Mon Jun 30 10:25:09 CEST 2025
This changes the way the fab menu is structured:
* use the new FabMenuEntry for entries instead of full Fab's
this way we have better control over the layout and functions
* use a different markup so we can use flex-layout
(see the necessary and corresponding pwt-assets patch)
* remove the left/right direction and center alignment since they're
almost never useful, and can be reimplemented if necessary
(removal makes the css part easier)
* introduce size and color options to better apply the material3 design
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
src/touch/fab_menu.rs | 140 +++++++++++++++++++++++++++++++-----------
src/touch/mod.rs | 4 +-
2 files changed, 106 insertions(+), 38 deletions(-)
diff --git a/src/touch/fab_menu.rs b/src/touch/fab_menu.rs
index 92f2331..6a4f3f7 100644
--- a/src/touch/fab_menu.rs
+++ b/src/touch/fab_menu.rs
@@ -1,10 +1,12 @@
use yew::prelude::*;
+use crate::css::ColorScheme;
use crate::props::{ContainerBuilder, EventSubscriber, WidgetBuilder};
-use crate::widget::Container;
+use crate::widget::{Button, Container};
use pwt_macros::{builder, widget};
+use super::fab::FabSize;
use super::Fab;
/// [FabMenu] direction.
@@ -12,23 +14,63 @@ use super::Fab;
pub enum FabMenuDirection {
Up,
Down,
- Left,
- Right,
}
/// [FabMenu] alignment.
#[derive(Copy, Clone, PartialEq)]
pub enum FabMenuAlign {
Start,
- Center,
End,
}
+/// An entry for a [FabMenu]
+#[derive(PartialEq, Clone)]
+pub struct FabMenuEntry {
+ pub text: AttrValue,
+ pub icon: AttrValue,
+ pub on_activate: Callback<MouseEvent>,
+}
+
+impl FabMenuEntry {
+ pub fn new(
+ text: impl Into<AttrValue>,
+ icon: impl Into<AttrValue>,
+ on_activate: impl Into<Callback<MouseEvent>>,
+ ) -> Self {
+ Self {
+ text: text.into(),
+ icon: icon.into(),
+ on_activate: on_activate.into(),
+ }
+ }
+}
+
+/// [FabMenu] Color
+///
+/// Determines the color of the [Fab] and the [FabMenuEntry].
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum FabMenuColor {
+ #[default]
+ Primary,
+ Secondary,
+ Tertiary,
+}
+
/// Favorite actions button Menu.
#[widget(pwt=crate, comp=PwtFabMenu, @element)]
#[derive(Properties, Clone, PartialEq)]
#[builder]
pub struct FabMenu {
+ /// The size of the [Fab]
+ #[prop_or_default]
+ #[builder]
+ pub size: FabSize,
+
+ /// The color scheme to apply on the [Fab] and the [FabMenuEntry]
+ #[prop_or_default]
+ #[builder]
+ pub color: FabMenuColor,
+
/// Main button Icon (CSS class).
#[prop_or_default]
pub main_icon_class: Option<Classes>,
@@ -44,7 +86,7 @@ pub struct FabMenu {
/// Menu alignment
///
- #[prop_or(FabMenuAlign::Center)]
+ #[prop_or(FabMenuAlign::End)]
#[builder]
pub align: FabMenuAlign,
@@ -52,7 +94,7 @@ pub struct FabMenu {
///
/// We currently support up to 5 children.
#[prop_or_default]
- pub children: Vec<Fab>,
+ pub children: Vec<FabMenuEntry>,
}
impl Default for FabMenu {
@@ -94,13 +136,13 @@ impl FabMenu {
}
/// Builder style method to add a child button
- pub fn with_child(mut self, child: impl Into<Fab>) -> Self {
+ pub fn with_child(mut self, child: impl Into<FabMenuEntry>) -> Self {
self.add_child(child);
self
}
/// Method to add a child button
- pub fn add_child(&mut self, child: impl Into<Fab>) {
+ pub fn add_child(&mut self, child: impl Into<FabMenuEntry>) {
self.children.push(child.into());
}
}
@@ -139,26 +181,33 @@ impl Component for PwtFabMenu {
fn view(&self, ctx: &Context<Self>) -> Html {
let props = ctx.props();
- let main_icon_class = match &props.main_icon_class {
- Some(class) => class.clone(),
- None => classes!("fa", "fa-plus"),
+ let main_icon_class = match (self.show_items, &props.main_icon_class) {
+ (false, Some(class)) => class.clone(),
+ (false, None) => classes!("fa", "fa-plus"),
+ (true, _) => classes!("fa", "fa-times"),
+ };
+
+ let (close_color, color) = match props.color {
+ FabMenuColor::Primary => (ColorScheme::Primary, ColorScheme::PrimaryContainer),
+ FabMenuColor::Secondary => (ColorScheme::Secondary, ColorScheme::SecondaryContainer),
+ FabMenuColor::Tertiary => (ColorScheme::Tertiary, ColorScheme::TertiaryContainer),
};
+ let main_button = Fab::new(main_icon_class)
+ .size(if self.show_items {
+ FabSize::Small
+ } else {
+ props.size
+ })
+ .class(props.main_button_class.clone())
+ .class(if self.show_items { close_color } else { color })
+ .class(self.show_items.then_some("rounded"))
+ .on_activate(ctx.link().callback(|_| Msg::Toggle));
+
let mut container = Container::new()
.with_std_props(&props.std_props)
.listeners(&props.listeners)
.class("pwt-fab-menu-container")
- .class(match props.align {
- FabMenuAlign::Start => Some("pwt-fab-align-start"),
- FabMenuAlign::End => Some("pwt-fab-align-end"),
- FabMenuAlign::Center => None,
- })
- .class(match props.direction {
- FabMenuDirection::Up => "pwt-fab-direction-up",
- FabMenuDirection::Down => "pwt-fab-direction-down",
- FabMenuDirection::Left => "pwt-fab-direction-left",
- FabMenuDirection::Right => "pwt-fab-direction-right",
- })
.class(self.show_items.then_some("active"))
.onkeydown({
let link = ctx.link().clone();
@@ -169,33 +218,50 @@ impl Component for PwtFabMenu {
}
});
- let main_button = Fab::new(main_icon_class)
- .class(props.main_button_class.clone())
- .on_activate(ctx.link().callback(|_| Msg::Toggle));
-
- container.add_child(main_button);
-
for (i, child) in props.children.iter().enumerate() {
if i >= 5 {
log::error!("FabMenu only supports 5 child buttons.");
break;
}
- let orig_on_activate = child.on_activate.clone();
+
+ let on_activate = child.on_activate.clone();
let link = ctx.link().clone();
- let child_button = child
- .clone()
- .small()
+ let child = Button::new(child.text.clone())
+ .icon_class(child.icon.clone())
+ .class("medium")
+ .class(color)
.class("pwt-fab-menu-item")
.on_activate(move |event| {
link.send_message(Msg::Toggle);
- if let Some(on_activate) = &orig_on_activate {
- on_activate.emit(event);
- }
+ on_activate.emit(event);
});
- container.add_child(child_button);
+ container.add_child(child);
}
- container.into()
+ Container::new()
+ .with_std_props(&props.std_props)
+ .listeners(&props.listeners)
+ .class("pwt-fab-menu-outer")
+ .class(match props.align {
+ FabMenuAlign::Start => Some("pwt-fab-align-start"),
+ FabMenuAlign::End => Some("pwt-fab-align-end"),
+ })
+ .class(match props.direction {
+ FabMenuDirection::Up => "pwt-fab-direction-up",
+ FabMenuDirection::Down => "pwt-fab-direction-down",
+ })
+ .with_child(
+ Container::new()
+ .class("pwt-fab-menu-main")
+ .class(match props.size {
+ FabSize::Small => "small",
+ FabSize::Standard => "",
+ FabSize::Large => "large",
+ })
+ .with_child(main_button),
+ )
+ .with_child(container)
+ .into()
}
}
diff --git a/src/touch/mod.rs b/src/touch/mod.rs
index f559689..acb27ae 100644
--- a/src/touch/mod.rs
+++ b/src/touch/mod.rs
@@ -11,7 +11,9 @@ mod fab;
pub use fab::{Fab, FabSize, PwtFab};
mod fab_menu;
-pub use fab_menu::{FabMenu, FabMenuAlign, FabMenuDirection, PwtFabMenu};
+pub use fab_menu::{
+ FabMenu, FabMenuAlign, FabMenuColor, FabMenuDirection, FabMenuEntry, PwtFabMenu,
+};
mod material_app;
pub use material_app::PageController;
--
2.39.5
More information about the yew-devel
mailing list